Blogging Tips: Adding Social Media Share Buttons to Every Post
This post may contain links to affiliate websites, such as Amazon and we receive an affiliate commission for any purchases made by you using these links.
Welcome Back to my Blogging Tips Series.
If you missed the first two weeks, you can find them here:
Today I will be showing you how to add social media share buttons to the top of every post, like the ones that I have. Take a look…do you like them? These little beauties make it super simple for anyone to share your content. When I was first trying to set up my social media share buttons, I was adding them manually into each post one button at a time. That lasted about 3 posts and I knew there had to be an easier way. That’s the way it goes around here…I start by doing things the difficult way, get fed up, and then turn to Google.
Here we go:
First, select “template”
In order to get the buttons to show up above each post, you have to edit your html. Don’t worry, this is not as scary as it sounds.
Click “Edit Html”. Before making any changes, be sure to back up your template!
Check “Expand widget template”
Using “Ctrl F”, search for this part of your html code:
The code below is the code for the buttons. Copy and paste this code ABOVE the code that you just searched for ( )
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
Click "preview" and if all looks good, click "save"
After you get your social media share buttons all set up, make sure to head on over and reward yourself by entering my current giveaway. Up for grabs is a $175 Amazon or Target giftcard.
And then go ahead and share the giveaway!
Such a great tutorial! Thank you!! I have tried to put this on, but the “Pin it” button is not showing up. Everything else is great. Is there something else I need to do? I took it off just in case I made a mistake, so it doesn’t show right now.
Hi Kelly, this is great information!! Thank you so much visiting today, your latest reader 🙂
xo, Tanya
Hi! I found you via the Ginger Snap Crafts linky party. I appreciate your tip and I’ve applied it to my blog! I pinned it too! I think others would benefit from this and I’d love for you to share it at my party the Rock N Share.
Great tips! I love to learn:) Thanks for sharing!!
Great tutorial, ideal for this newbie still finding her way in the dark!!
Great tutorial, ideal for this newbie still finding her way in the dark!!
Hi! Followed you over from Get Schooled Sat. Thank you so much for posting this tutorial. I will be adding this to my blog!
Jackie
http://www.thenonmarthamomma.com
Hi! Came from the Get Schooled Saturday. Thank you for sharing this tip. I am a new blogger and posts like this helps tremendously.
Joanne @ Creative Mess
jmacreativemess.blogspot.com
This is a great resource for bloggers..I just pinned it! Thanks for sharing at March Madness
Hi there! I’ve been using this code for a long time. But suddenly it doesn’t work properly. The counter isn’t working, while for example I got several +1’s on some posts. Can anyone help me out? http://orientalspiceandsomechocolate.com
Hi Kiran… I’m not sure why the code is not working properly. I’m currently using another code for share buttons at the bottom of my posts.
Hi, could I ask how you did the code for the share buttons that you currently have? I’m struggling to work out how online!
hello! i just tried to put the social button code in my template , i followed every step, i saved , but nothing appears! help! what is wrong?
Unfortunately, Blogger made some changes a while ago and I don’t think the code above still works. Sorry.