You want your blog visitors to share your great content with their friends, right? So make it easy for them by adding social media buttons to each of your Blogger posts! They can share your posts on Facebook, Twitter, Google+ and Pinterest without leaving your blog. (If you have a WordPress blog, you can view those instructions here: How to Add Social Media Sharing Buttons to WordPress Posts.) Don’t worry – you don’t need to do this every time you write a blog post. Simply edit your Blogger template and they’ll appear on all your blog posts.
I found several blogs and websites with instructions; however most show you how to add just the Pin It button – or just a Facebook Like button. Adding the code for each of them individually results in the icons not lining up very nicely in your post. Then I found an article on the BloggerSentral blog from author “Greenlava” that included code to add a Twitter Tweet button, a Google+ button, Facebook Like and Send buttons, and a Pinterest Pin It button – all nicely aligned in a row! Below you will find the instructions from that blog post, as well as instructions for some different variations for how the buttons appear in your blog.
UPDATE 12/3/2012: This code has been edited to fix the Pinterest “Pin It” button not retrieving the thumbnail images from the blog post.
NOTE: This requires editing your Blogger template. Before proceeding with the instructions below, I recommend that you backup your Blogger template first!
How to Add Social Media Buttons to the Top of your Blogger Posts
- In your Blogger Dashboard click on “Template” in the left menu. (If you’re using the old interface, you will need to click “Design” instead.)
- Click the “Edit HTML” button. In the window that appears, click the “Proceed” button.
- In the window that appears, check the “Expand Widget Templates” checkbox at the top.
- In the HTML code, find the first instance of this line of code:
(Note: This line of code appears multiple times throughout your template. The number of times this appears varies depending on your template. Lately most of the templates I’ve worked on required that I find the SECOND instance of it.)
- Paste the code from BloggerSentral ABOVE that line of code.
- Click the “Save Template” button.
- Click the “Close” button.
VARIATION #1: Moving the Social Media Buttons to the Bottom of your Blogger Posts
If you prefer that your social media sharing buttons are at the BOTTOM of your posts, follow the instructions above – but instead of placing your code above the <data:post.body/> line, place the code BELOW it.
VARIATION #2: Adding the Pin It button to the Posts on your Home Page
You may notice that all four buttons (Twitter, Facebook, Google+ and Pinterest) appear on your blog post pages; but the Pin It button is missing from the posts on your home page. That’s because if someone were to pin one of your images from your home page, the link would go back to your blog’s home page (instead of to that blog post). This isn’t very helpful to someone clicking on your image on Pinterest – because it would take them to your home page instead of to the blog post where that image is. That being said – if you do prefer to have the Pinterest icon/link appear on your home page too:
Delete this line of code (line 40):
<b:if cond=’data:blog.pageType == "item"’>
and delete this line of code (line 55):
VARIATION #3: Removing the Facebook Send Button
If you just want the Facebook Like button to appear (and not the Facebook Send button) find this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’true’ show_faces=’false’/>
and change it to this line of code:
<fb:like colorscheme=’light’ expr:href=’data:post.url’ font=” layout=’button_count’ send=’false’ show_faces=’false’/>
VARIATION #4: Adding the StumbleUpon Button
Find this line of code:
<div class=’horizontal-social-buttons’ style=’padding:10px 0 10px;’>
and add these lines of code below it:
<!– StumbleUpon –>
<div style=’float:left; margin-right:30px;’>
VARIATION #5: Removing the Google+ Button
Delete the following lines of code:
<!– Google +1 –>
var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(po, s);
and delete these lines of code:
<!– Google +1 –>
<g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
This is exactly what we need! Thank you Kelly for sharing this 🙂
Also is there a way to add a green Share button or is this not necessary?
You’re very welcome, Francois!
Kim – Are you referring to the ShareThis button? If you use this code, you don’t need to also add the ShareThis button as many of the links would be duplicate. However, if you prefer to use the ShareThis button, you can do that by getting the code found on their website: http://sharethis.com/. The code they give you is for a widget that appears on the sidebar of your website (and not for each individual post); but if you search their forums, I believe they provide instructions for how to modify the code so that the button appears within each blog post.
Ok thank you!
Didn’t work for me! It only added google plus to top, and on the bottom it only added google plus, twitter and facebook. NO PINTEREST anywhere. Do you think the blogger template is blocking this code?
That’s odd. It sounds like it might be your template that it’s having difficulties with. I’d have to look closer at your template design code to know for sure though.
Is there a blog it button code so that people can reblog my posts? I tried to add the blogger buttons along with these but they don’t show up when I select them.
@Kelly: You are using the Dynamic Views template. You can’t add social media plugins below post titles (or any other plugin inside the post body). So if you want to add these social media sharing buttons, you’ll need to change your template.
@Kim: I’m not sure what blogger buttons you’re trying to add. Can you please explain further?
that’s my blog
not able to show fb share button on this template please help
Without seeing your code, it’s difficult for me to tell you what code needs to be changed in your template. If you want me to fix it for you, you can click the $29 Pay Now button above and I can help you further.
the pinterest button has no gap between it and the facebook button? Can you fix this so there is an even gap
@Tom – I tested out the original code and all the variations I posted in this article – and there is not a gap between the Pinterest and Facebook buttons. Which code version are you using? And can you include the URL for where this isn’t working for you?
I’m having the same issue as @Tom – Pin it button has no go spacing from the facebook button! I’ve tried both codes you’ve linked about and both work out the same.
My webpage for example:
http://superficialsydney.blogspot.com.au/2012/08/justfabcom-georgette-review-photos.html Thanks x
Thanks for the example, @Stacie.
Find the Facebook Like/Send code by searching for this line of code:
The next line of code is:
change that to this:
[div style=’float:left; margin-right: 15px;’]
This will add a 15 pixel gap before the Pin It button. You can make that number higher or lower to change the width of the gap.
Many thanks Kelly – that worked perfectly !
I’m happy to help, Stacie! I’m glad it worked for you.
I’m having trouble aligning these right. Tweet, and like it are on the left, and then a big space before pin it. What I would really like to do is center them all, and obviously get rid of the weird space. Also, how can I hide these on just one post (I have the blog set up more like a site, with the first post being my main page.) Thanks in advance!
@Sherri: I don’t know which code version you’re using; but try playing around with the margin-left (or margin-right too) style as noted in earlier comments. Also, this code adds the code to the top of all posts. If you don’t want them to appear on your home page, you could use the “if” statement that appears for the Pinterest button (line 40) – and add it for all of your other social media icons as well.
Thanks for sharing this! I got the first part with no problem, but when I try to add the StumbleUpon button per the instructions, blogger keeps giving me this message:
Error parsing XML, line 1589, column 3: The content of elements must consist of well-formed character data or markup.
It sounds like it didn’t like your code. I would suggest copying-pasting the code and making sure you’re getting all the correct characters of the code included in your template. If that doesn’t work, try typing the four lines of code (instead of copying/pasting). Perhaps some of the characters aren’t transferring correctly.
Is it possible to add tumblr to this? 🙂
@stylonylon: To add the Tumblr code, you could try using the code from here:
Thanks so much, something that finally works, the stumble upon codes gave some errors though, so i just skipped it.
Great post ! With different styles of social sharing buttons ! Searching for the codes form longtime and not even worked some codes ! Atlast got the working code 🙂
Great work. Thank you very much.
my blog doesn’t have “” code. what I’m supposed to do?
I’m not sure which code you’re referring to.
Sweet! This one worked where others I tried didn’t, and the result is a nice clean “share” bar. Many thanks for doing this. I do notice that the buttons appear below the post text on my home page (as desired via Variation #1), but for some reason in the individual posts, I get the buttons both below and ABOVE the text. Some little code issue, no doubt, but any ideas on where I should look?
That data:post.body line of code appears multiple times throughout your template. The number of times this appears varies depending on your template. Lately most of the templates I’ve worked on required that I find the SECOND instance of it. Try moving your code to the 2nd instance of it and see if that helps.
Turns out I had some extra code above the second “data:post.body” line — probably from one of my previous efforts — that was adding that second set of buttons. Took it out, and all is good. Thanks again, Kelly. By the way, do you have any thoughts re mobile? When I look at the mobile version of my blog on my phone, I see only the google-plus share button, not the others. Width issue maybe?
Hmmm! I’m not sure why the others aren’t showing up on mobile devices. Sorry!
Hi Kelly, I hope you can help me out with this, please, I’ve tried everything.
For some reason the facebook button isn’t showing up in my blog, but the others two are, do you know what could be the problem? This is how it looks like on a random post from the blog: http://i.imgur.com/0PUOuW2.png
Thanks so much!
Hi Jon. It’s hard to tell from the screenshot. What’s the link to your blog?
I’ve added it now to my profile. Thanks for the help
Hi Kelly, I tried to do the same as the steps but I couldn’t find the script
I put it on the similar script but doesn’t work.
Thanks for the help
Joan, I can see the social media buttons on your blog posts. What’s not working for you?
Thanks that’s what i need
Thanks Kelly Ward for share this post , Thanks once again , i have successfully add these code in blogger
You’re very welcome! I’m glad you got it to work.
Nice thanks Kelly, i use it to my blogger 🙂
Hey Kelly, I have gone through many websites but didn’t get that much variants. 4th one is good for me. Thanks for posting.
Thanks Kelly For Sharing this info, Can u tell us “how we can add social media share button to the left of post body”.
To the left of the post? I’m not sure what you mean. Are you looking for some type of social media bar that floats on the left side of the screen?
Hello, Kelly! Thank you for this great feature! But I’ve got a strange problem going on here. The code is working but not on my older posts.
It stops showing them once I go back to mid June of 2014
This one from June doesn’t work: http://www.thewinestalker.net/2014/06/aglianico.html
While this one from July does: http://www.thewinestalker.net/2014/07/mexico.html
Have you seen this before?
That’s really odd, Joey! I noticed some of your posts in May and June have the social share buttons and some don’t. It’s not just all the ones prior to mid-June. I would suggest looking at your code for the blog posts that don’t have the share buttons and comparing them to one that does… and see if there’s something different in your post code that’s messing with the social share buttons code.
Okay, I think I figured it out but I won’t be able to try it until tonight. All of the ones that are doing this were originally written in Microsoft Word, then copied and pasted into Blogger (I don’t do this anymore). So the code is really messy, and has a DIV = “separator” tag around each image with similar instruction to the buttons. This is the only thing that’s different. I’ll get rid of those tags tonight and let you know.
Well that didn’t work. Turns out all the other ones have that same code. Hard to check that on an iPhone.
There is no difference in any code. Exactly the same.
Also, the buttons work in the previews of the pages that they don’t appear on. Just not on the published page. They don’t work on the home page either, preview or published, but I’m cool with that.
Well this is frustrating!
Figured it out! You know what the problem was? I had the nerve to have text in the Search Description! LOL
Anyways, thanks again for this! I love it!
I’m glad you got it figured out!
Thanks very much for the info, Kelly. I’d accidentally deleted these when I did a template update last month.
They’re working now on the individual posts but I can’t see any of them on my home page. Any suggestions?
Blog address is: http://dianebarnes.blogspot.com
Hi Di, I would suggest taking a look at your template for the
code. This line of code appears multiple times throughout your template. The number of times this appears varies depending on your template. Lately most of the templates I’ve worked on required that I find the SECOND instance of it.
For my blog it didn’t work on the first instance. On the second it only put them on pages WITHOUT a search description (and wasn’t showing on the home page), and on the third it only put them on pages WITH a search description (and then showed on the home page).
Thanks for the suggestion, Joey. Hopefully the 3rd instance will be the one that works for me too. Cheers, Di
Thanks for the suggestion Kelly. I’ll do a bit more playing. I think I had to add them to the second instance to get them on the post. Maybe I’ll try the third as Joey suggested & see what happens.
Helpful Post for social button to setup in blogger
I am just revamping my blog site and I wanted to add the social media buttons to my posts. I tried using your code but unfortunately none of the buttons appeared. Can you please help?
Please email me more details on the problem you’re using, including your blog URL, and I can take a look!
thanks i need this trick for my Blogger and also for my Website…
nice tutorial thanks
kelly… thank you So much for your tutorial …. it is very helpful for me really good work.
thanks for this
Thanks for the valuable post. Really helpful. Keep sharing such amazing post. I would like to read all this.
Hi, this code worked well for me. Thanks! I have used the share buttons at the bottom of each post. If I want to remove these buttons from the homepage, how do I go about doing that?
And how do I get all the buttons in a straight line? Now it’s a bit up and down.
Many thanks for your help!
Here’s my page http://www.fullscoops.net/
Both of those issues would require some extra tweaking of the code. If you want me to fix it for you, you can click the PayPal button above and I can work on that for you.
Thank you for sharing this information. I’ll try apply to my blog 🙂
Thank you Kelly Ward this very nice
Great tutorial Kelly, thanks a lot! 🙂 That is exactly what I need to optimize my blogger. Could you tell me please, how can I rearange the buttons? I would like to have the FB like button at first, then the Google+ button and at the end the Pint it button. Is it possible to put FB share button after the FB like button to? And is it possible to place the buttons in the center at the bottom of the posts, because now they are left at the bottom of the posts?
Yes, you can make those changes. To rearrange the buttons just move the different sections of code for each social media platform – up or down in the code. You’ll see “start” and “end” comments in the code so you can easily tell where each button is. To center-align the buttons, you can play around with some CSS code to get the div to center.
I tried to Make my website theme better and add some social media sharing buttons butt i fail every time can any one check and guide how can i do it?
The instructions in this article should work. What problems are you running into?
Hey! Thanks for this code, it worked really nicely. i was wondering though, is it possible that I could have these share buttons in my post footer instead of at the bottom of the post? Thank you!
You could try just putting the code in your post footer section instead.
Thanks for nice post.
CANT SEE MY SHARE BUTTONS IN DESKTOP
I just responded to your email about this issue.
Thanks Kelly Ward for sharing this amazing post. I was stuck reading other blogs, but when I read your guide, then my problem was solved, thanks for sharing these great ideas.
i didn’t find the code to post above and I’m at lot with what to do.
Click on the link in this blog post that says “code from BloggerSentral”. That will take you to their website where you can copy the code.
Hello please guide me how to add whatsapp share button on the top of the post.
This code only includes Twitter, Google+, Facebook and Pinterest buttons.
it worked, but can add google+
Yes, it includes Google+ social media buttons.
Best instructions yet, thank you!
Thanks Kelly Ward for sharing this information I have successfully added these button on my blog.
Hello can you guide me how to add pintrest button on my blog.
The Pinterest button is included in this tutorial.