Tech Tips. Gadgets. Gaming.

How To Add Facebook Like Button to Blogger (Blogspot)

Facebook Like Button

The Facebook like button is probably the most important and the most used social button on the world wide web today. With its recent upgrade (Facebook sort of merged it with the share to Facebook button, so liking a web page or content you just found would automatically be posted/shared on your Facebook wall, instead of just the normal you liked this __ link wall status), it became a more powerful tool for sharing content. So why not add it to your blogger blogs. It’s simple. Here’s how:

UPDATE (May 05, 2011): The Send button is now added next to the Like button (standard button only). The Send button allows your users to easily share your content and send a short private message to the people that would be most interested or to the group wall of any Facebook group they are member of. It also allows your users to send your content as an email to any email address.

Click here for more Blogger Widgets and Blogger Tips

The Code:

Here’s the code for the standard Facebook like button.

NOTE: This will display the like button on post pages only.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding: 10px 0px 0px 0px;'>
<div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
</div>
</b:if>

Installation:

  • STEP 1: Sign in to your Blogger > Dashboard > your blog’s Design > Edit HTML, and check “Expand Widget Templates
    Backup. It is always a good idea to back your template before making any changes to it. To save a copy, click the “Download Full Template” under Backup / Restore Template. Save it in a folder on your computer.
  • STEP 2: Find this line of code inside the template box:

    <data:post.body/>

    Quick Search. Use the Search or Find feature of your browser. Just press Crtl+F (or Command+F) and paste <data:post.body/> in the find box then press enter. It will take you to that line instantly.
  • STEP 3:…Then paste the Facebook like button code just right below that line, so that it would look like this:

    <data:post.body/>
    
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div style='padding: 10px 0px 0px 0px;'>
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
    </div>
    </b:if>
    

    Click SAVE TEMPLATE. That’s it!

    Like and Send Button DEMO

    Like me!

    How to make it appear on the homepage

    If you want to make it appear on your homepage as well, use this code instead:

    NOTE: This will display the like and send buttons (standard) on the homepage and post pages only.

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div style='padding: 10px 0px 0px 0px;'>
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like expr:href='data:post.url' font='' send='true' show_faces='false' width='450'/>
    </div>
    </b:if>
    

Other layout options

The Facebook like button comes in 3 layout styles: standard (above), button count and box count. Here are the codes for the other 2 layout styles. Installation: Follow steps 1 and 2 above. Then follow step 3 but use any of the two codes below:

Facebook like button with Button Count

NOTE: This will display the like button on the homepage and post pages only.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:21px;'/>
</div>
</b:if>
Facebook like button Box Count

NOTE: This will display the like button on the homepage and post pages only.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style='padding: 10px 0px 5px 0px;'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=65&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:65px;'/>
</div>
</b:if>

For questions or suggestions, use the comment section below.

Click here for more Blogger Widgets and Blogger Tips

Get updates delivered straight to your inbox!

Enter your email address:

105 comments

  1. I have been wanting to add this feature to my blog. That was super easy! Thank you for posting this.

  2. Is this still correct? I can’t seem to make it happen and the ‘button’ above is simply a vertical line. Help! (please.)

    • I’m not sure what you mean… but the codes above are working just fine. Any URL we could look into?

  3. This was working on my blog earlier today. Now it’s not appearing on any of my posts! Help please!

    • Hi Alysa, I just visited your blog and saw the like buttons working fine on post pages. If you are using the first code above, the buttons only appear on your blog’s post pages.

      If you want the like buttons to appear both on posts and on the homepage, use the second code instead.

      I hope this helps.

  4. Oh my goodness, I added something to my blog without destroying it AND it’s showing up!! Thank you so much for walking us through this and doing all the work!!

  5. I want the like button to show up on all my post but NOT in the static pages like the “about me” section or “collections” section of the blog. Is there code to do just that?

    • The code have just been updated. It should not show up on static pages anymore. Try installing it again.

  6. I tried a lot. But it is not possible! Please help me! :(

    • Hi Swati! I just visited your blog and saw the like button appearing on post pages. If you want the button to appear on your homepage as well, use the code above under “How to make it appear on the homepage”.

  7. Jasmine E. /

    Hello again!

    So far the updated code is now showing the like button on my blog homepage and all individual post but NOT the static pages!! Seems to be working like I hoped it would! :)

    Many Thanks!

  8. Jasmine E. /

    Just wanted to add … I tested the like button to see if it would show up in my facebook feed, and its not working. Is there anyway to make the changes so the liked link shows up in the Facebook feed for others to see??

    • I tested the buttons again and they all work fine. The liked link automatically showed up on the facebook wall.

  9. That worked :D
    Wanted the share button to be seen in posts only

  10. Well thanks i have found this blog i got the correct information and i have added the facebook like button to my blogger blog

    Thanks

  11. Let me make a useful clarification: The “LIKE” button will NOT appear in your main page (where you see your recent blog posts). You have to click on a post’s title which takes you to a new page, in which you see the whole post alone. In THAT page you can see the “Like” button.

    • You can use any of the last 3 codes above to show the button on the font/main page and post pages.

  12. i can’t add that to my blog !:(

  13. worked for me!
    thanks a tonne :)

  14. Thnaks, this really helped me a lot :)

  15. I’m feeling so stupid….I had the Facebook “like” button on my blog, and then I changed templates. I tried following the directions above and when I search the template I’m now using, I cannot find – I searched both within the editor and by pasting the entire template into a Notepad file and searching there. Is it possible that the way the new template is set up, that phrase no longer exists?

    Very grateful for any help…thank you.

    • Sorry, I meant to say that I cannot find the text you cite as the place to put the code for the Facebook “like” button (I tried typing it in my comment, but I guess it was auto-edited out). The div post body thing.

      • Hi Erika. Make sure you check “Expand Widget Templates” (Step #1). Then use the quick search function of your browser: Crtl+F or Command+F (Step #2) to find the text.

  16. Hi Mad Tom,
    I really want to add a facebook box on my blog to ask people to join my facebook but I couldn’t get it work. I followed your instructions and when I hit the button “preview”, I didn’t see anything. Could you please take a look at my blog and let me know. I would like to have the facebook box right above “The Spices of Life, Share This On Facebook, etc..” located on the right panel. Thank you so much for your help.

  17. Nice thanks… facebook box on my blog looks good.

  18. hey the instructions were..really simple…browsed a lot of websites for this topic..finally reached here..thanks a ton..

  19. Giorgos /

    i follow all the steps but i cant find the code with the div post body thing.

  20. Hector /

    Hey it works! but when I click the Like Button, in my facebook page appears without the post’s image, appears another random image. how can I solve this? D:

    • Honestly, I don’t know how to solve this. :D

      The random image happens when the facebook script detects multiple images on the post. Unfortunately, it also detects images that belong to other posts or sections of the blog/website. And there’s no workaround yet to fix this.

  21. Krista /

    Hi! I was wondering how I can make the show up side by side? Instead of one under the other?

    • Side by side with what? Any url we could look into? By the way, the send button is now added to the like button. Check it out.

      • Krista /

        Never mind I have already figured it out =) I wanted the tweet and facebook like button to be displayed inline with eachother

  22. thanks, thats really usefull

  23. Thanks! That was a really clear explanation and it worked! I’m so happy :)

  24. is there a way to find out who clicked the “like” button? :) i only see 1 name plus a number specifying the others who clicked “like”
    thanks!

    • You can show the faces of those who clicked the like button by editing line #3 (refer to the first code above): just replace the
      show_faces='false'
      with
      show_faces='true'.

  25. katena keno /

    i followed the instructions and nothing happened no changes

  26. Thank you! Really easy to use instructions for an HTML novice like me. Just wondering, I tested the Facebook like button with Button Count button, but it didn’t link to my Facebook profile?
    Many thanks! Yasmin

  27. Hi there, re my last post, there must have been a delay. It worked and I love my new FB Like button. Thanks for the easy to use instructions!
    I’m following you now please follow me back to help my blog:

    Yasmin

  28. Hi there, re my last post, there must have been a delay. It worked and I love my new FB Like button. Thanks for the easy to use instructions!
    I’m following you now

    Yasmin

  29. bharat /

    hi,
    I have a like button for my posts.
    I want the like button for the blog and not for the post. How can I do that.
    Also, I I remove the like button and place it again, will all the likes disappear ?

  30. I got the like button which is great, but for some reason a series of extra code now shows up on my blog.
    This is the code that shows up:
    b:if cond=’data:blog.pageType == “item”‘>

    • Hi Ryan,

      It seems you missed some part of the code there. Just copy and install the code again. (Be sure to delete or overwrite the existing fb like code)

  31. Hi there, thanks so much for this super helpful post. I would like the Facebook buttons to show up at the top of my post though & not at the bottom. How do I do that? Thanks in advance!

  32. Never mind, I figured it out. :) for anyone else who might be wondering how to have the Facebook like widget posted at the top of the post instead of the bottom- just find this code:

    and enter the above Facebook code below it.

    Thanks!

  33. Hey, thanks for this post.
    How can I put the button on the homepage only ? (or maybe sitewide…but not under each post)

    Thanks a lot

  34. nice Work Man!!!!!!! Thanks So much!!!!

  35. omg thankyou and thankyou!! <3

  36. Bro i hav got 4 i cant figure out below which one ishould write these codes

    • i have 4 data post.body
      below which one i should write? i tried everything jst it doesnt work

  37. Thanks, worked like a charm!

  38. Thanks for the awesome tutorial!!!
    I’d like to know if it’s possible to see who has liked the post though, some thumbnails come up but not everyone’s thumbnail, and I cannot click to see who has liked.
    Thanks.

  39. Hi, I loved the article, thank you so much!!

    I was just wondering how i could make it so I can see who liked the post?

    Thanks!!

  40. This didn’t work for me, I didn’t find the code you mentioned.

  41. Martijn /

    I get a cross side scripting error. Makes sense as the script source is facebook.com …

  42. Thanks! This is working! :-)

  43. Thank man! worked out fine!

  44. hi. I wanted to install the Like Button only on the side of blog, kind of like you have it in the right, and let people like the whole thing, not the posts. Any way I can make that happen?

  45. Thank you so much, it worked :)

  46. Glaziers Oxford /

    I tried this and the only thing that happened is that it added a big white space after the title of each post. The Facebook like button didn’t show up. What did I do wrong? Here is the code I got from Facebook:

  47. Carolina /

    Nothing happened on my blog…
    Any other suggestion?
    Thanks

  48. it’s helpless for me. it didn’t solve my problem and thanks for try

  49. Didn’t work for me either.

  50. If finally showed up! Yay!

  51. Wow nice. But how to add like with count in a specific post only.

  52. great tut, thanks for useful information

  53. Bütün statuslar like olsun

  54. Can anyone tell me the normal width of gadget box in blogger templates ?

  55. Not sure what I have done wrong but I followed the instructions (using Blogger) and absolutely nothing happened!

  56. how can i add it in my social sharing box widgets section??

  57. doesn’t help me

  58. Tillie Warsme /

    Thanks for sharing. really helps me a lot.

  59. Chan Dahlstedt /

    I was looking for an easy way to designate CSS font sizes for my website that will work well with modern, mainstream browsers for Windows. Your resource has provided me with very good tutorial options online. Thanks!

  60. Carol /

    I was successful in getting the facebook like image to appear after every post but can’t seem to make it appear on the sidebar so that someone can click on the icon that says “like me on Facebook”. can you offer an help?

  61. Orilea /

    Thanks so much! I had to use the new button code from the Social Plugins on FB (HTML5 version), but your placement was THE KEY. Grateful for your help. :)

  62. Help! I wanted to delete the fbook button and now my whole blog is messed up! what should I do? I didn’t save a copy?

  63. xristos /

    hi! i’ve got a problem trying to add the button! i cant find the line . i use search but it doesnt exist..

  64. Upen Stha /

    This code , i have 4 of them, which one should I choose

  65. Yes, It was easy, thank You, I done this.

  66. Hello! Ok, I just tried it and it didn’t do anything??? I already have a share button I just wanted a “like” one… not sure what to do. any help would be appreciated!

  67. is very remarkable article thank you very much for updating us and our business and we need them the information

  68. deep som /

    Heya are using WordPress for your blog platform? I’m new to the blog world but I’m trying to get started and set up my own. Do you need any coding knowledge to make your own blog? Any help would be greatly appreciated!

  69. Amber Lynae /

    I could not find this phrase in the template even with the ctrl f search.

  70. Kevin Canto /

    Thank you so much. I’ve been trying to figure out how to do this for at least a month or so. And your step by step directions really works for me!

  71. Very nice article. Thanks.

  72. great help! How about linking Facebook comments back to blogger? Thanks

  73. mas kowa /

    its doesnt work in my blog, help????

  74. i want a static like page on my blog, situated on the right of the blog page. but found only on the end of every blog post

  75. can’t find . Plz help me
    nafjan007@gmail.com

  76. Sent you an email..

Leave a Reply