How to Add Social Media Buttons to Blogger Posts


WP Greet Box icon
Hello there! If you are new here, you might want to subscribe by email or subscribe to the RSS feed to be notified of updates to our blog.

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. 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!

Don’t want to tackle these updates yourself?  I can help!

 

How to Add Social Media Buttons to the Top of your Blogger Posts

add social media buttons to blogger posts

  1. 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.)
  2. Click the “Edit HTML” button. In the window that appears, click the “Proceed” button.
  3. In the window that appears, check the “Expand Widget Templates” checkbox at the top.
  4. In the HTML code, find the first instance of this line of code:
    <data:post.body/>
    (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.)
  5. Paste the code from BloggerSentral ABOVE that line of code.
  6. Click the “Save Template” button.
  7. 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 == &quot;item&quot;’>

and delete this line of code (line 55):

[/b:if>]

VARIATION #3:
Removing the Facebook Send Button

social media blogger post

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

social media blogger stumbleupon

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;’>
<script src=’http://www.stumbleupon.com/hostedbadge.php?s=1′/>
</div>

VARIATION #5:
Removing the Google+  Button

social media buttons blogger

Delete the following lines of code:

<!– Google +1 –>
<script type=’text/javascript’>
(function() {
var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
})();
</script>

and delete these lines of code:

<!– Google +1 –>
<div style=’float:left;’>
<g:plusone annotation=’bubble’ expr:href=’data:post.url’ size=’medium’/>
</div>

Don’t want to tackle these updates yourself?

I can help! Simply click the “Pay Now” button below to pay via PayPal – or contact me for other payment methods. The cost is only $29 – and you can choose any of the variations (or any combination of these variations!) shown in this article. After receiving your payment I will email you to get your blog login details.

Add Social Media Sharing Buttons to My Blogger Posts: $29





21 thoughts on “How to Add Social Media Buttons to Blogger Posts

  1. Kelly Ward

    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.

  2. Kelly

    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?

  3. Kelly Ward

    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.

  4. Kim

    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.

  5. Tom

    Hi,

    the pinterest button has no gap between it and the facebook button? Can you fix this so there is an even gap

  6. Kelly

    @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?

  7. Kelly

    Thanks for the example, @Stacie.
    Try this:

    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.

  8. Sherri

    Hi,
    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!

  9. Kelly Ward

    @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.

  10. Bekah

    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.

    1. dkwadmin Post author

      @Bekah,
      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.

Comments are closed.