Divi Page Builder

The Ultimate Web Design Toolkit!

Claim the discount before it disappears!

GET THE DISCOUNT!

How To Add Facebook Like Button to Blogger (Blogspot)

/ Blogger, Blogger Tips

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:

[box]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.[/box]

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”
    [box type=”info”]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.[/box]
  • STEP 2: Find this line of code inside the template box:

    <data:post.body/>

    [box type=”info”]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.[/box]

  • 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

Divi Visual Page Builder

The Ultimate WordPress Toolkit. Complete Access!

For a short time only, we are offering you 10% off your membership.
Claim the discount before it disappears!

10% FOR A LIMITED TIME

106 thoughts on “How To Add Facebook Like Button to Blogger (Blogspot)”

    1. MadTom

      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.

  5. Jasmine E

    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?

    1. MadTom

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

  11. Alex

    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.

  15. Erika

    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.

    1. Erika

      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.

      1. MadTom

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

    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.

  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:

    1. MadTom

      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.

    1. MadTom

      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.

      1. Krista

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

  24. Linnor

    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!

    1. MadTom

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

  26. Yasmin

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

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

    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. Ryan J. McGinnis

    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”‘>

    1. MadTom

      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. Misty Kearns

    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. Misty Kearns

    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!

  38. Anna

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

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

  44. Chaz

    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?

    1. Tommy

      Hi Chaz! There are 2 ways you can add the like button:
      (1) Add a facebook Like Box: https://madtomatoes.com/how-to-add-a-facebook-like-box-to-your-blog/
      If your website don’t have a facebook page yet, you can create one from here: http://www.facebook.com/pages/create.php

      (2) Add a facebook Like Button: http://developers.facebook.com/docs/reference/plugins/like
      Just enter the address of your website
      or your website’s facebook page URL in the “URL to like” field.

      1. Chaz

        I’m sorry, hadn’t seen this yet. Thank you for the answer, and for the add, by the way. So there is no way to add the Like Button without having a Facebook Page to relate it to? I’m asking because I have seen this on a friend’s website. He doesn’t have a page, but people can still Like his website. Or this just doesn’t work with blogs?

        1. Tommy

          There is. Just follow the second way. Instead of a facebook page url, you can use the address or URL of your website like this:
          chazthecat.pt.vu
          or
          creativitydoesnthurt.blogspot.com

  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:

  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. :)

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

  66. Kathi

    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!

  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!

  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!

Comments are closed.

Scroll to Top
Copy link
CopyCopied
Powered by Social Snap