Pages

How to Add Facebook Share or Like Button in Blogger Templates


Social media sites like Facebook & Twitter could be great source of quality traffic for any blog. You can also add a Facebook Share or Like button in each of your posts. This button will allow users to quickly share a post on Facebook.


Note: This tutorial is no longer working. Facebook has changed it's codes. Try it and if it doesn't work, please don't comment or email me as I don't know the solution yet. Thanks :)

Add Facebook Share/Like Button Below Post Title


To add Facebook Like button below post title, simply follow these steps:
  1. Back up your Blogger template.
  2. Open the Template section.
  3. Blogger Updated Dashboard
  4. Click the Edit HTML button.
  5. Blogger Edit HTML Button
  6. A new window will open. You'd have to click the Proceed button to start editing.
  7. Blogger Proceed Button
  8. Check Expand Widget Templates option. The page will automatically refresh.
  9. Find <head> in your template and replace it with the following code:
    <head>
    
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
      fjs.parentNode.insertBefore(js, fjs);
    }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));</script>
  10. Now find the following code:
    <b:includable id='post' var='post'>
      <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
        <a expr:name='data:post.id'/>
        <b:if cond='data:post.title'>
          <h3 class='post-title entry-title' itemprop='name'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>
        </b:if>

    You might see multiple codes similar to the above code. However, make sure that the code you find has <b:includable id='post' var='post'> in it.

    Tip: Just search for <data:post.title/> and you'll find the above code lines.
  11. Place the following code right AFTER the code in previous step:
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='fb-like' data-send='false' data-show-faces='true' data-width='450'/>
    </b:if>

    The result should look something like this:
    <b:includable id='post' var='post'>
      <div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
        <a expr:name='data:post.id'/>
        <b:if cond='data:post.title'>
          <h3 class='post-title entry-title' itemprop='name'>
          <b:if cond='data:post.link'>
            <a expr:href='data:post.link'><data:post.title/></a>
          <b:else/>
            <b:if cond='data:post.url'>
              <b:if cond='data:blog.url != data:post.url'>
                <a expr:href='data:post.url'><data:post.title/></a>
              <b:else/>
                <data:post.title/>
              </b:if>
            <b:else/>
              <data:post.title/>
            </b:if>
          </b:if>
          </h3>
        </b:if>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='fb-like' data-send='false' data-show-faces='true' data-width='450'/>
    </b:if>
  12. That's it. Save your template. Open a post on your blog and see the Facebook button in action.

Add Facebook Share Button Below Post Body


To place the Facebook share button under each post, you have to follow the first 3 steps given above. Then find the code given in step 4 above. Scroll down a bit and you'll see the following code:

    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

Warning! Do not use 'Ctrl + F' to find the above code. You have to find the code given in step 4 and then you can find the above code by scrolling down a bit.

After finding the above code, place the following code right AFTER it:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-like' data-send='false' data-show-faces='true' data-width='450'/>
</b:if>

The result would look something like this:
    <div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
      <data:post.body/>
      <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb-like' data-send='false' data-show-faces='true' data-width='450'/>
</b:if>

After that, save your template. Open a post page on your blog and see the Facebook button in action :)

70 comments:

  1. is there a post somewhere about changing the template so that when you post to facebook it actually adds text from the post instead of just posting your blog description every time? thanks!

    ReplyDelete
  2. @ littlebird, I don't think such thing is possible with Blogger without some JavaScript magic & there is no such article/tutorial available in this respect.

    ReplyDelete
  3. OMG. I have been trying to add the f-ing button "Share" to my posts for about 2 hours now. I have tried every possible html code I could find and somehow it would never work as I wanted. Until now.
    In addition, I could even move it from the left side to the right side, something I could not do with other codes.
    THANK YOU.

    ReplyDelete
  4. how to make it in the left or riht??

    ReplyDelete
    Replies
    1. Replace "float: left" with float: right"

      Delete
  5. Amazing...i tried many codes before this, but they didnt worked as i needed. this is the best one and I have added to my blog

    ReplyDelete
  6. At last!! Direct, simple-to-follow instructions that ACTUALY work! And the best of all you can choose a button - or even a neat little icon - instead of that ugly and intrusive counter thing that seems to be the only choice everywhere else.

    Thank you.

    ReplyDelete
  7. @ Billy, thanks for such great comments.

    ReplyDelete
  8. It didn't work for me. I've tried so many times.. :(

    ReplyDelete
    Replies
    1. It didn't work for me either. I have one of the dynamic views, so maybe that is something.

      Delete
    2. Hi Selena, Facebook has recently made some changes in their code that's why the button is not working. You should check the default Blogger share buttons.

      Delete
  9. Thank you sooo much for this!

    ReplyDelete
  10. Just added this button to my blog - thank you so much!!!!!

    ReplyDelete
  11. @ Firdaus, send me your template file!

    ReplyDelete
  12. finally did it!! I've been more than an hour trying with many sites but never worked. thanks !!

    ReplyDelete
  13. it did not work for me either .... i am sad..

    ReplyDelete
  14. I DID IT!!! iam not sad any more! Thanks!

    ReplyDelete
  15. Bilal,

    Can you please help me with this? I am NOT the most computer savvy and am very nervous to mess with any of the widget stuff!!

    Would really appreciate it!!

    Thanks,
    T Denise Clary
    Blog: www.tdeniseclarybooks.blogspot.com

    ReplyDelete
  16. @ T Denise Clary, hey you can try the following tutorial:

    http://www.betatemplates.com/2010/06/official-blogger-share-buttons.html

    If still need my help, feel free to ask :)

    ReplyDelete
  17. Ι'Μ IN LOVE WITH YOU MY FRIEND... I FINALLY FIND IT !! THANK YOU SOOOOOOOOOOOOOOOOOOOOOOOO MUCH !!!

    ReplyDelete
  18. This only shows up on the first displayed post on my blog. Both button and count are not displayed on all posts beneath the most recent one.

    Any ideas why?

    ReplyDelete
    Replies
    1. Hi, I think you've installed some other share buttons and they are working fine. If you still need my help, feel free to leave a comment.

      Delete
    2. Still need your help, so leaving a comment. Thanks.

      I have Tweet, Facebook Like, Facebook Share and +1 buttons installed on every post.

      All four buttons show perfectly and work fine on my separate post pages.

      But on my home page the Facebook share button and count only show up on the most recent post (at the top). All previous posts (below the top post) don't show the Facebook share button or count.

      Any ideas how I get it to show on all posts on my homepage?

      (The same question also applies to label pages, like this.)

      Thanks a lot.

      Delete
    3. Hi Bilal!
      Many thanks for your tutorial!
      Unfortunately, I have the same problem as s0upy...
      The Share button appear only on the first post and I can't figure out why...
      I realised that I have twice in my template the line:
      Maybe It's coming from this...
      I'm just getting crazy!
      Please, any help would be welcome!

      Best Regards,

      fred.

      Delete
    4. Hi s0oupy & faud, I've just updated the tutorial. Facebook has changed their button code. As of now, this button can work only on post pages. It will not appear on the main or label pages.

      Delete
    5. Thanks a lot for your reply. It's really appreciated.

      Having just looked at my blog again, I can confirm that it works on post pages (same as before), but it also still works on my main and label pages, except it still only appears on the first post on those pages (same as before).

      Are you saying that it should not now be appearing at all on my main and label pages (this is not what I have observed) or were you simply explaining why it only appears on the first post on those pages?

      Thanks again.

      Delete
    6. Hi s0upy, I'm saying that it will not work or appear on the main page. You've implemented the previous version of this tutorial that is why it is appearing on your main page. However, in updated tutorial, it appears only on post pages and works fine :)

      Delete
    7. Ok, that's clear. Thanks.

      Weird how the other buttons work on all posts on main page, but this one didn't.

      Also weird how they've changed the code to make it even worse by not having it appear on the main page at all.

      Oh well.

      Delete
    8. Hi s0upy, you are right. We can use Blogger's own share buttons or some widget like 'AddThis' for this purpose.

      Delete
    9. Yes, true. I have tried both those but there were no live counts available last time I looked. Maybe I'll check them out again to see if they have added that functionality.

      Thanks for the post, and for your time.

      Delete
  19. Hi, may i know how does this work with new blogger interface? Thanks

    ReplyDelete
    Replies
    1. Hi Jean Ong, I've just updated the tutorial. Now it works with the new interface :)

      Delete
  20. Thanks for your time and generosity, Bilal. Good work!!!

    ReplyDelete
  21. hi! i have tried and double checked everything and it isnt working. i am pretty good with these things too. Any suggestions?

    ReplyDelete
    Replies
    1. Hi Daughter of the Sun, kindly email me your template file.

      levisinside0@gmail.com

      Delete
  22. Hi!!! I've tried it but unfortunately it's not working. And i am sure I've not done any mistake in HTML codes. can you please help me out.

    ReplyDelete
    Replies
    1. Hi Himanshu, you're using a heavily cutomized template. I can't help you. Sorry :(

      Delete
  23. I went through all the steps. When I tried to save the new template I got this message:

    Error parsing XML, line 478, column 4: The character sequence "]]>" must not appear in content unless used to mark the end of a CDATA section.

    ReplyDelete
    Replies
    1. Hi nesquik405, send me your template file.

      Delete
  24. Hi...I added this to my blog, but have recently decided to start using the blog as a website. I need to remove the share options from each page. Any idea of how I can do that? Please help!

    ReplyDelete
    Replies
    1. Hi, what is your blog address?

      Delete
    2. Hi- I just sent you an email with my blog address. Look forward hearing back from you...as soon as possible!! : )

      Delete
  25. I have done this step by step and cannot get it to work. It saves changes but when I go to look at my blog there is nothing different. Any suggestions?
    sweetsouthernmel.blogspot.com

    Thanks,
    Mel

    ReplyDelete
    Replies
    1. Hi Milanie, I would recommend to use Blogger's own share buttons. But if you really need to have a Facebook button then send me your template. I'll try to fix it.

      levisinside0@gmail.com

      Delete
  26. hi dear i am not able to get facebook like tag on my blog my blog adress is this www.backdoorengineers.blogspot.com and my id is zayz0007@gmail.com hopping to hear frm u soon

    ReplyDelete
    Replies
    1. Hi Juned, this button is not working for a lot of people. Kindly use Blogger's own share buttons instead.

      Delete
  27. I can't seem to find the code anywhere in the original html. Also, do you replace just "head" with the following code or everything below it as well?

    ReplyDelete
    Replies
    1. Hi Lito, this tutorial is no longer valid and I don't know the solution yet. Sorry :(

      Delete
  28. Replies
    1. Hi Sumon, this tutorial is no longer valid and I don't know the solution yet. Sorry :(

      Delete
  29. I really can't thank you enough

    ReplyDelete
  30. Both codes are for the like . i need one for the Share .please help

    ReplyDelete
    Replies
    1. Hi Basma, I don't know about the share button. I've tried but it didn't work.

      Delete
  31. Has Blogger changed its template since this was written? I'm not seeing the "Proceed" and "Expand Widgets Template" choices.
    Thanks.

    ReplyDelete
    Replies
    1. Hi Mary, yeah you are right. I've also noted recently about these changes. Might update the tutorials as well.

      Delete
  32. hope to have it soon...because my like button was missing :(

    ReplyDelete
  33. Apparently, the Share button didn't show up. :(

    ReplyDelete
    Replies
    1. Hi Katherine, this is an outdated tutorial and might not work for everyone :(

      Regards,
      Bilal

      Delete