Simple Blogger Tutorials

How to Add Facebook Like Button to Blogger

After Facebook deprecated the share button, the Like button became one of the famous and widely used social sharing button as it let your blog readers to share your posts and articles with their Facebook friends with just one click.

Facebook Like button for BloggerWhen you will visit the official page you will find that there are two different versions of Like button for which the implementation processes are also different. The most flexible one is XFBML but it requires a series of steps before it can be added to any webpage while Iframe version of the Like button is more easy to add. So here we will find out how it can be added to Blogger blogs.

Facebook Like button for Blogger

Step 1: Log in to Blogger and from the dashboard go to blog’s Template tab. Next click “Edit HTML” and check “Expand Widget Templates”.

Step 2: Find <data:post.body/> and immediately after or before it (or both if you want to have the Facebook Like button on top and also at the bottom of the Blogger posts) add the below code after selecting the options you like to have.

Button Options

Layout:

Verb:

Color:

Font:

: px


Float:

Show for:

Preview and code

Ajax Loading
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div style="float: none;"> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </div>
</b:if>

Step 3: Save your template.

Attributions:

  • layout – There are three sizes avilable, options are ‘standard’, ‘button_count’ and ‘box_count’.
  • action – The text to display, that is, ‘like’ or ‘recommend’.
  • colorscheme – The colour of the button.
  • font – Font you like to use.
  • width – I have enabled this option for users who want to change the width of the Like button. If you don’t know the default widths as per Facebook standards then don’t change anything here.
  • show_faces – Option to show profile pictures of your Facebook friends (only) who have liked your post. I have set it to ‘false’. If you want then you can change it to ‘true’ but you also have to change the height accordingly.
  • send – This option is not available in Iframe version.

XFBML Like button

It is an example of XFBML (or HTML5) Like button which has the send button and also has a special feature, i.e. it will open a comment box whenever a user clicks it to Like an article.

Note:

P.S. This post has been updated on 2013-4-16.

168 comments :

  1. got problem! can u help me?

    error: http://img192.imageshack.us/img192/9873/clipboard01hu.jpg

    my site is on my name!

    ReplyDelete
  2. Like Button Error: when clicked it will pop-up a massage "page could not be reached". This problem is happening to many people and could be a bug. For more info visit here.

    ReplyDelete
  3. I implemented it and it works however the button appears just right after my post (like after the last word) or the other variation under the post title...
    How can I add this button next to my "share bar", the part you can click to leave a comment, you see the labels etc... you know what I mean...
    Thank you!

    ReplyDelete
  4. You can find for <div class='post-footer-line post-footer-line-2'> and after this snippet you can add the Like button.

    ReplyDelete
  5. My blogger template doesnt have in it....and the code just doesnt seem to work no matter where I try it. Any ideas?
    http://www.owhstarsandstamps.org

    ReplyDelete
  6. Have you checked "Expand Widget Templates". After expanding press Ctrl+F and find "<data:post.body/>. Then copy paste any one of the FB Like Button code. It'll surely work.

    ReplyDelete
  7. it work for me just don't include this:



    on the FIRST LINE of the code and this:



    the LAST LINE on the code, it was actually highlighted into red XD

    http://dadedidhodong.blogspot.com <-- new blogger :P

    ReplyDelete
  8. i did according to ur steps, but it nt works =( haih

    ReplyDelete
  9. I checked, it's added to your blog. If you still cannot see it then try clearing the cache of your browser.

    ReplyDelete
  10. thank you very much. added already.

    ReplyDelete
  11. my blog said , More than one widget was found with id: HTML11. Widget IDs should be unique . how bout tht ?

    ReplyDelete
  12. What was you adding? These codes does not contain any id with HTML11.

    ReplyDelete
  13. Thank you so much. I could make it succesfully. Have one more query. In my blog, it just show the "Like Button" and no supporting script like "be the first of your friends to like it" is given. Can you please guide?

    ReplyDelete
  14. You have added "Like button count". Go for the "Standard Like Button" for what you want.

    ReplyDelete
  15. my blogger html code does not contain :
    " " so where do I put the code :-(

    ReplyDelete
  16. Are you asking for <data:post.body/>?

    You will find it after checking the "Expand Widget Templates" within "Design > Edit HTML" tab in your Blogger's "Dashboard".

    Open your browser's "Search box" by pressing "Ctrl" and "F" keys together on your keyboard.

    ReplyDelete
  17. Great, but how to add it at the top of the posts?

    ReplyDelete
  18. Place the Facebook like button code above <data:post.body/>

    ReplyDelete
  19. How do you post it after the labels bar so that it is not in the post?

    ReplyDelete
  20. Find <div class='post-footer-line post-footer-line-3'> and after it add your Like Button.

    ReplyDelete
  21. right now with that code, it just says the "facebook user likes a link." on the wall feed, with a "attachment" that shows an auto grab of any blog image + title of the link + description of any text.

    my question is, how can i set it such that it will say, "facebook user likes the _______(title of post) on ______ (my blog name)", and for me to specify a more relevant thumbnail + text description of each individual post, automatically? Is the latter even possible? Lets say the first image used in the blog post, and the first 150 characters of the 1st para is preferred. Cos right now it shows the last image and the last texts from the URL.

    Anyone tried successfully?

    ReplyDelete
  22. Try XFBML Like button for Blogger. It will give you a title, image and the description from each individual posts.

    ReplyDelete
  23. It works fine for me except on facebook there is no thumbnail, and my blog really has to do with pictures, it would be helpful if there was some way to get a thumbnail to show up on facebook when I click like on the blog.

    ReplyDelete
  24. Please refer to the reply above

    ReplyDelete
  25. hello raju nice post,those who have implemented LIKE button as XFBML then this code will work, but if someone implemented LIKE button with iFrame then it does not work. So once i clicked SEND button in your post it freezes and no pop up appears. I have implemented a another workaround.Unfortunately your blog is not letting me to post codes.

    PS - I like your blog..Simple and Neat

    ReplyDelete
  26. It's not my blog, it's the blogger's comment form that doesn't allow anyone to use "<" and ">" markup. So to share the workaround you can use &lt; instead of < and &gt; instead of >.

    ReplyDelete
  27. "Those who have implemented LIKE button as XFBML then this code will work, but if someone implemented LIKE button with iFrame then it does not work. So once i clicked SEND button in your post it freezes and no pop up appears."

    I have the exact same problem. How do you workaround with it, Rahul?

    ReplyDelete
  28. Rahul Saigal29 April, 2011

    To those who have LIKE BUTTON WITH IFRAME i have modified the code, the send button can be implemented on every post of blog. So its your wish if you want to implement in header, post or footer of posts.

    &itdiv id="fb-root"&gt&it/div&gt
    &itscript src="http://connect.facebook.net/en_US/all.js#xfbml=1"&gt&it/script&gt
    &itfb:send expr:href='data:post.url'&gt&it/fb:send&gt

    Make sure you replace &it with < and &gt with >.
    data:post.url will enable this button to implement on every post.

    ReplyDelete
  29. Thank you Rahul but the code is for the send button only. Better use the XFBML Like Button and turn the option on. It will have the ability to Like or Send or do both at the same time.

    ReplyDelete
  30. I tried to replace the iframe code with the XFBML Like Button. All my likes are gone. I changed it back to iframe.

    How should I deal with this?

    ReplyDelete
  31. I have replied you in my XFBML post.

    ReplyDelete
  32. This comment has been removed by a blog administrator.

    ReplyDelete
  33. hello raju.. how to add send button if my facebook like with iframe? u can see at my blog post.. i want like+send button

    ReplyDelete
  34. @Tricia
    Put the both buttons into divs and add CSS property to float left or right.

    @Haz
    I've updated the post, it's currently not supported in ifrmae version.

    ReplyDelete
  35. Hi! I've just added this into my blog, but it doesn't seem to appear. Will it appear immediately after I save, or must I wait for a while?

    Thanks. :)

    ReplyDelete
  36. It should appear immediately. If its not visible try clearing the browser's cache.

    ReplyDelete
  37. This doesn't work for me at all. It just doesn't show up. Note that I have a non-standard Blogger template. Do you have any advice? Also, do you know of any good Facebook like and Twitter share widgets like this that are integrated into one?

    ReplyDelete
  38. Hi Raju. I have already successfully added the button, & it appears! But it appears only when I open the entry individually.

    For example, it appears when I open the entry like this: http://hannahjohary.blogspot.com/2011/03/what-myiesha-did-throughout-weekend.html

    But when I open my blog at http://hannahjohary.blogspot.com in general, it won't show.

    How do I fix this?

    Thank you in advance! :)

    ReplyDelete
  39. Hello:
    @brain
    Please give your blog's URL

    @Hannah
    Delete the snippets marked in red. Please read the last part of the post for full explanation.

    ReplyDelete
  40. sorry for the out of topic
    i want to ask why does my blog post has no description when shared by Like button or by Share button....

    Description : First paragraph on blog post...

    please help me, i'm already confused....


    Last Question : May i have your Facebook like and send Button Code at the end of this page ???


    you may send me the code by email or post it here....

    thank you very much for your help

    ReplyDelete
  41. Thanks Raju. You have been so helpful. :)

    ReplyDelete
  42. raju...it doesn't work...i had tried it again and again..but still can't worked.....even i clear my chache....

    ReplyDelete
  43. Anonymous30 May, 2011

    Hello. I have the iframe set up on my site but I'm trying to get the meta tags to how a thumb nail, show a title, and so on. But once I put the meta tags in they don't show up on FB. Please Help!

    ReplyDelete
  44. Added open graph meta tags? If you have added correctly then give FB some time (max 24hrs) to scrap your page.

    ReplyDelete
  45. Hi Raju,
    The "like" button shows up on each blog post, but when someone clicks on it, on Facebook it just says a general like for the ENTIRE blog post. Does that make sense? It doesn't click through to the specific blog post. How do I make each "like" button unique for each blog post?

    It can be seen here.
    www.SiliconValleyBachelor.com.

    Thanks!
    Kevin

    ReplyDelete
  46. help i did it but it i can't see it and i've already cleared browser cookies what do i do?

    ReplyDelete
  47. @SVB
    I checked it and it's working fine. I didn't face any problem.

    @Tony
    It's there but you will only see it in post pages. For now, delete the red codes to let it also be seen in every page or wait for this post to get updated in a day or two.

    ReplyDelete
  48. Hey Raju,
    I'm in the process of starting up a new blog at http://idea729.blogspot.com/
    However, when I try clicking the like button I added according to your instructions(Note: I set it so it only appears on post-pages, and so that it appears with the post sharing tools), it doesn't seem to work. It gives me a "You like this" message for a second, then it goes away. Any idea what could be up?
    Appreciate the help,
    -RM

    ReplyDelete
  49. I liked your test post and found out no problem!

    ReplyDelete
  50. Thanks it start working..

    ReplyDelete
  51. Anonymous10 July, 2011

    Is is possible to put "like" button either:
    -Below each of the comments by the author or blog administrator
    -Or Below the comment area (Say just after all comments in a page, immediately above "Post a comment")

    Appreciate your help!
    S

    ReplyDelete
  52. I didn't tried it adding below Blogger author comments, I will try this. But it can be easily added in comment section. Here is an example:

    Find <h4 id='comment-post-message'><data:postCommentMsg/></h4> and before it add any one of the codes mentioned above.

    ReplyDelete
  53. It worked! Thank you so much!

    ReplyDelete
  54. Thank you so much!
    This is a great help :)

    ReplyDelete
  55. how do I make it link to my facebook fan page?

    ReplyDelete
  56. also can I put it in the left side bar some how?

    ReplyDelete
  57. Above codes are for Blogger's post pages only.

    To link your Facebook fan page you can visit Official Like button page and type the link of you fan page and Get Code. you can add it to your sidebar by adding "HTML/JavaScript" gadget.

    ReplyDelete
  58. Thank you for the article. Searched few sites but only your blog Helped ME.
    Its neatly explained. Good work.

    ReplyDelete
  59. Woah... it works.
    I'm designing a custom template based on the minima classic template for my website and all other methods that I tried online didn't work. Thanks a lot and God bless you.

    ReplyDelete
  60. Ok, what I really want is for a like button with a box count to show up in the floating sidebar that I have... basically excatly like it does on this site. How would I do that? I tried using the code you have above and it wouldnt show up... Can you help me?

    Thanks :)

    ReplyDelete
  61. very helpful! Thanks for sharing your knowledge :)

    ReplyDelete
  62. Hey -thanks so much for making this so easy!!
    I am new to all of this and it can be very daunting.
    grazie mille!

    ReplyDelete
  63. Hi Raju, this is so helpful and I just added Like button to my blog. Thank you! http://styleimported.blogspot.com/

    Question :
    As you see, the button isn't exactly parallel.. I tried to change "height:21px; to 17px (or lower number), and the button got lower. However, the bottom part wasn't visible..
    also..
    I'd like to have little space between comment and the button.. (it's too close each other).

    Please help.. Thank you

    ReplyDelete
  64. Hi, I posted a question here yesterday, but I just found more problems..
    My friend tried to click the Like button I just added yesterday, but it didn't appear anything on her facebook page..

    Also after she did click the button, there is "check mark" on it and nobody seem to click it anymore..
    Please take a look at my blog.. http://styleimported.blogspot.com/

    Thank you so much!

    ReplyDelete
  65. Okay, it seems every thing is normal, I can like or unlike the posts and it appears on my profile.

    Regarding the position of the Like button:
    If you want it to be parallel in that position then you need to add some more codes and snippets and replace some snippets from "here to there".
    Better place the bigger standard button under <data:post.body/> as it would be simple and people can find it easy to Like your posts.

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

    ReplyDelete
  67. I think you will only be able to see the profile pictures of your friends who have liked your post but not everyone.

    ReplyDelete
  68. I just added this to my blog. Thanks

    ReplyDelete
  69. It's so late.. but thank you so much for your reply!

    ReplyDelete
  70. Hey, help me out. When I like a blog post, the the bunch of text below the title is the info from my about page and not a clip from the post body, how can I fix this? Big thanks!

    ReplyDelete
  71. Hello,i there anyway to check the name of the people who click the like button on my blog.i can only see the name of people who are in my friends list.

    ReplyDelete
  72. It's the rule of Facebook and you cannot see other peoples name unless they are friends of yours.

    ReplyDelete
  73. hye.. i wass added it... but when i share on fcebook.. it will show blog title + post title + description... i want to remove blog title when i share on facebook. i only want show post title + description on facebook.. i dont want blog title.. please help me..

    ReplyDelete
  74. I think that is not possible. If you find it's possible, then let me know.

    ReplyDelete
  75. Hi Raju,

    Very helpful post! Thank you very much. I've added this to my blog. But why is the word "Label" is indented to the right? http://gimmemyblog.blogspot.com

    ReplyDelete
  76. Either put the Like button within div, example:

    <div>
    [Facebook code goes here]
    </div>

    Or move the Like button after <div class="post-footer-line post-footer-line-1">

    Or move the labels to <div class="post-footer-line post-footer-line-3">

    ReplyDelete
  77. I'm able to add Standard like button but button is not clickable. I did not get hand icon on Like button. whats wrong?

    ReplyDelete
  78. Check if it's already Liked by you.

    ReplyDelete
  79. raju, I tried putting on the button with count and I'm not seeing it, any tips?

    ReplyDelete
  80. Check if you have added it correctly or not.

    ReplyDelete
  81. hi how can i show facebook button on right side. currently button showing on left side

    ReplyDelete
  82. Use this:

    <div style='float:right;padding:5px;'>
    [Like Button goes here]
    </div>

    ReplyDelete
  83. Can I see who all of my friends liked it... At present I only see the count, that how many friends liked itt.

    ReplyDelete
  84. You can see only your friends.

    ReplyDelete
  85. Really nice thanks a ton for this.

    ReplyDelete
  86. i wan to make it below my post..but it still remain above!!y is it?

    ReplyDelete
  87. how can i delete the like button above??

    ReplyDelete
  88. I already told you how to add it below posts, read the post or comments carefully.

    To delete the Like button above the post find <data:post.body/> and just above it you will find the Like button [iframe] code, just delete it and save your template.

    ReplyDelete
  89. My fb button is slightly off alignment with my twitter button...not sure why? http://www.thehealthrevival.com/2011/11/cilantro-love-affair-with-herb.html

    Thanks for your post and any further help :)

    ReplyDelete
  90. I have managed to get the button to appear at the end of my posts OK, and when I test it out the thumbnail and post title appear on facebook - but the snippet of text is from the comments section, and not the body of my post. Is there a simple way of altering the code so that it either (a) just references the thumbnail pic and post title or (b) adds the text from the post and not the comments section? I can't be doing with anything other than "compose" mode when posting, it would be too much faff. Thanks for your thoughts on this. http://threadnoodle(dot)blogspot(dot)com/ (Have I just repeated this comment??)

    ReplyDelete
  91. @Health Revival
    Find the codes where you have added the like button, you will find:

    <div style="padding:7px;">
    [Like button codes]
    </div>

    and change the padding to 4 pixels, it will be:

    <div style="padding:4px;">
    [Like button codes]
    </div>

    However, it's a small workaround, not the full fix.

    @Iz
    It's already in the "Related Posts" link lists!!! However, here you go:
    Fixing Facebook Description Problem when Liked

    Adding Open Graph Protocol to Blogger

    ReplyDelete
  92. Thank you for that suggestion - but
    (a) I already looked at the related post to fix the problem, and this doesn't help me - it looks very complicated and I don't really understand it, other than that I wouldn't just be able to post using "compose" and hit publish and forget about it. I want to set this up in the code for my page so I don't have to fiddle ever-after
    (b) I can't find any reference to "padding:7px" anywhere, so I can't try this. I've looked and looked but can't see it.

    But I can see there is a bit of code about jump links just after where I've put the like button code (which itself is just after data:post.body/) but before the comments section. Does it make any difference if I put the code before or after the jump link?

    ReplyDelete
  93. I've now tried the first fix, but when I added the p (and the < >marks, which this comment thing doesn't like me typing in full) before and after I wasn't able to preview the page, I was given a message about "Explorer preventing cross-scripting" and all I could see was a # and a white screen. Should I persist with the < p > business? I'm reluctant to muck up the code for my page because basically I don't know what I'm doing here...

    ReplyDelete
  94. In your template, you will find the Facebook code just before <data:post.body/> and after the Twitter button, there you will find the padding with 7px. Change it to 4px.

    Are you using IE? Have you tried any other browser like Firefox or Chrome? If the problem persist, contact me.

    ReplyDelete
  95. Hello. I originally had a Facebook like box for people to become a fan of my FB page. After I installed the Like button for posts it has disabled my page. Do you know what has happened? And what I can do to fix this? Thanks for your help.

    ReplyDelete
  96. Which/what page are you talking about? Can you show me an example?

    ReplyDelete
  97. Worked perfectly, thanks!

    ReplyDelete
  98. Hi Raju,
    The facebook like button works on my blogger but it doesn't pick the right image. Do you have a solution for this?

    ReplyDelete
  99. Hi Raju,

    I am not sure if you or your readers have encountered this but the number of likes in my blog shows the total number of likes for all the posts in my blog. So it's shows a universal (same) number on all posts rather than showing the correct/exact number of likes on each post. Can you please suggest a solution?

    Thanks a lot!

    ReplyDelete
  100. @Joyce
    I have already replied about the same matter in above comments, if you have missed it then follow the links that are given to Iz frome here.

    @Metro Manila
    If it's so then it's not the codes I have provided in this post. If you want to fix it then implement my codes...

    ReplyDelete
  101. Hi! I have a Facebook like button on top of my page http://kayerevil.blogspot.com It has around 113 likes as of last night, when today I logged in it says "Be the first to like..." Where did all the likes go? When I log out of Facebook and check my site, it contains 113 people like this, but when I try to press like, it says "error". Then if I log in to Facebook, it says again "Be the first to like.." Please help me what to do, it took me around 14 posts to accumulate the 113 likes, i'll be very sad if it can't be fixed. Thank you.

    ReplyDelete
  102. First check if you have added the Like button correctly and is appearing on every page. If everything is done correctly, then nothing I can do because it's from Facebook side.

    ReplyDelete
  103. Raju, thank you for the information. I have an error code at the very top of my page: xmlns:fb='http://ogp.me/ns/fb#'

    Can you help me figure out how this got there?

    I added the standard Like button. Before that I attempted to add the Like and Comment feature but I couldnt' get it to work. I removed the html I added for this fancier version so I'm wondering if you have suggestions about how to remove the above error.

    Thank you for your help and for the super fun FB Like button! I didn't think this was possible.

    Cheers, Kate

    ReplyDelete
  104. Kate, you have to add those lines before > sign. Here's how to do it, follow every single line:

    Add Facebook XFBML Like Button to Blogger

    ReplyDelete
  105. Is there any way to add the 'like' button to the overall blog website? i.e. on the banner with the 'about me' gadgets/etc and not to each individual post?

    ReplyDelete
  106. I here mentioned how to add like button to individual posts. To get a Like button for your blog's URL only, visit Facebook official Like page, within the form give your blog's address in the URL field, select the options you want and "Get Code". Now you can add this to your sidebar or wherever you may want.

    ReplyDelete
  107. Hi, I have a question. How to move the button up like this post? Because the bottom is not very visible?

    ReplyDelete
  108. http://aimaninas.blogspot.com/

    test the sharebutton and the like button how i put the title of the post, description thumb of youtube video every time i click on share button the title only apear if i click in share button inside of the post, i already try this http://www.simplebloggertutorials.com/2011/01/add-facebook-xfbml-like-button-to.html... can you tell me how i fix this ... thanks

    ReplyDelete
  109. Hey,
    Is there any way I can contact you personally so you can help me add the facebook like button..I tried following your directions several times but it isn't working for me! I would really appreciate it!!

    ReplyDelete
  110. @Que
    At the top of this page you will find the "contact me" link.

    @Berenice
    If others can do it then you can also do it :) It's really easy, all you need to do is follow first two steps very carefully. If you are facing any problems just leave me a reply here so that others can also know about problems and the solutions.

    ReplyDelete
  111. I want to see the names of those who press my blog "like button" on my facebook wall or profile. Is there a way to do that? Thanks!

    ReplyDelete
  112. I followed exactly what you said by copying pasting the code right after the and saved the template, but when I go back to my blog the facebook like button does not appear. I don't know what I am doing write I tried it several times, but the Facebook like button is no where to be find on my blog! Can you help me?!

    ReplyDelete
  113. @NY
    To see who have liked your Facebook page, log in to your Facebook account. On top right corner you will find an arrow from where you can change settings and log out. Click it > Select "Use Facebook as" your fan page. After loading of the page completes, click the icon which generally shows "Friend requests" (found on top left corner, beside Facebook logo). That's it.

    @Berenice
    It seems that either it can be related to your template problem or there's something that you are missing.

    ReplyDelete
  114. When I click on that arrow I have only four options:

    account settings
    privacy settings
    log out
    help

    Nothing about "Use Facebook as"

    ReplyDelete
  115. Are you sure? This feature has been rolled out by Facebook many months back. Here's the link to the help file:
    http://www.facebook.com/help/?faq=168135343245607

    ReplyDelete
  116. thanks Raju
    I have another question: how can I place the Like button under the "read more" jump break... or hide this button so can be visible only in the full posts?

    ReplyDelete
  117. To show like button on post pages read "Points to be noted:" part.

    To place it there find <div class='post-footer'> and below it add the codes.

    ReplyDelete
  118. Thanks so much! It actually worked!

    ReplyDelete
  119. Hi Raju, its me again, since i cant make it on XFBML format, i try the simple like button but it actually doesnt work out and there is xmlns:fb='http://ogp.me/ns/fb# appear again on the top left hand side of my blog. Here is my blog , http://conniesnap.blogspot.com/
    Can you help to fix?

    Thanks a million and sorry for the inconvenience caused.

    ReplyDelete
    Replies
    1. You will find that there are two xmlns:fb='http://ogp.me/ns/fb#'. Delete the second one has been added after > sign.

      Delete
  120. Hi raju, is it possible to get a like-button only on the starting page for the entire blog? just like the g+1-gadget?

    ReplyDelete
    Replies
    1. Easy, simply visit the official page, type your blog's/Fan Page address, select the options and hit "Get Code". For easy install, use the Iframe code.

      Delete
    2. it works! thank you raju!

      Delete
  121. Hey! Thanks for the great tutorial. I've implemented several different codes for a Facebook like button and in general they work fine. However, I always have the problem that the counter says "0" as long as I don't like the post myself. Only when I like the post I see the actual number of likes.. Do you know what could be the problem with this? Thanks for your help! David

    ReplyDelete
    Replies
    1. This could be problem of your browser or of Like itself. If you think that it's a problem of Fb then report this as bug. But when I visited your blog, it seems that all the likes as showing, for example, for the first post you got 7 likes (if I'm not wrong).

      Delete
  122. Hi your tutorial is great i installed the standard button and when you click on the post the like facebook button shows but how can i get it to show with having to click on the post!! This is my first blog I would really appreciati your help!! :-)

    ReplyDelete
  123. Read points to note" part. However, I have updated the post, now you can select whether to show this Like button on post pages or on every page by clicking the buttons.

    ReplyDelete
  124. you could please help?? i cant get the like button to appear unless i click on the post i read the comments above and still cant make sense of what tio do :-(

    ReplyDelete
    Replies
    1. Okay, scroll to the post where you will find the codes to copy and add. Now before coping, select whether you want it to show it on every page (default) or on post pages by clicking the buttons just below it. Now copy it and add it. If you still having any problem in understanding, reply me back. :)

      Delete
  125. I've been looking for a tutorial on how to install the FB LIKE button for forever and this one's the only one that really worked for me. Thank you so much for posting this!

    Love from the Philippines!

    ReplyDelete
  126. wow great man
    thanx alot :)

    ReplyDelete
  127. i found it 3 times and paste the code on every one but it didnt work...some help please

    ReplyDelete
    Replies
    1. It depends on the template, but however, try the first one.

      Delete
  128. Hey thanks. this is great,. do keep it up

    ReplyDelete
  129. at first it appear but then after few time reload it disappear..n i try to put it back and it wont appear until now :(

    ReplyDelete
    Replies
    1. This can be a problem form Facebook's side or your browser. Clear your browser's cache to see if the problem persists.

      Delete
  130. does this actually show up in people's newsfeed? because when i click the like button from this site (sbt) it shows up in my newsfeed but once i implement it on my site, it does not show up in my newsfeed or on my wall...?

    ReplyDelete
    Replies
    1. Hmm, good question, indeed, I also confused about it, but, try adding Open Graph Protocol to Blogger and check your Fb settings.

      However, adding the XFBML version of the Like button can solve your problem. If a user likes your post and leaves a comment, it will surly be seen on the news feed.

      Delete
  131. Thanks for your great blogger posts. Your advice works perfectly, with one exception. If I "Like" one post, it opens the interface to log into Facebook, I enter the username and password, and your widget successfully posts the like on my Facebook account. Your widget icon also dims, indicating that the post has already been "Liked". Here's the problem,if I an still logging into Facebook and try to like a second post (a different one), the log in dialog box flashes on screen, but quickly disappears and no "Like" action is performed. I have to go to my Facebook page and log out to activate your widget's log in and "Like" function again. Then I can activate it normally, as I did originally.

    ReplyDelete
  132. Worked pretty well. But instead of showing after post it appeared fter another widget. How can fix that.

    ReplyDelete
    Replies
    1. Try adding it immediately after <data:post.body/>

      Delete
  133. Hello Raju, thank you for this great tutorial but it doesnt seem to work for me as the like button still didnt appear on my page after several attempts! www.judithaudu.blogspot.com what should i do or what am i doing wrong? Thank you

    ReplyDelete
    Replies
    1. Add the codes first as told in the tutorial!

      Delete
  134. Thank you thank you!!! worked for me! For those who had trouble, add the code immediately before and after . That means adding the code TWICE. If you find two sets of in your template, add the code to the first . Hope this helps!

    ReplyDelete
  135. Works beautifully! Thanks so much for the easy-to-follow directions. Much appreciated.

    ReplyDelete
  136. Awesome, works a treat - many thanks :)

    ReplyDelete
  137. Hi, I'm glad that your tutorial really helps =)

    However, when I experiment it by clicking the 'like' button and head to my FB to check it out to see if it appears on my activity, it does but it appeared as the blog tittle only, not the blogpost title =(

    How to fix this problem?

    ReplyDelete
  138. I hope to remove the like button from my blog, but the new blogger dashboard doesn't show the expand widget template button anymore. May I know how can I locate my codes to remove the like button? Thanks.

    ReplyDelete
    Replies
    1. With changes from Blogger to template editor, there's no more "Expand Widget Templates", instead find for <data:post.body/> only...

      Delete
  139. Hi Am not getting the IFRAME code:
    am getting Codes only to HTML5 and XFBMl
    If i click on IFRAM it Giving the error like
    "This plugin does not have an iframe implementation with the selected options. Please use the JavaScript SDK and the HTML5 or XFBML implementations, or change the value of the send parameter."
    what i should do ?

    ReplyDelete
    Replies
    1. You're doing it on Facebook's Like button page! Checklist:
      1. Give a URL
      2. Uncheck the "Send" option
      Now you're good to go...

      Delete

Don't SPAM! Read comment policy.

Like