Add Facebook Like Button Below Post Titles

facebook like button, blogger tricks

This Facebook Like button will allow visitors to Like your post and share it to their Facebook friends. In this post we will see how we can add a Like button for each individual Blogger post, and not a Facebook fan box for the entire blog (which is also a good idea to have in your sidebar). Having a Facebook Like button below your post titles makes easier for Facebook users to like specific posts on your blog, which in turn displays the liked content on their profile (and potentially on their friend's feeds).
If you want to add the Facebook Like Button below your blogger post title, then follow these steps:

Adding Facebook Like Button Below Post Titles


Step 1. Go To Blogger Dashboard > Template > Edit HTML 

Screenshot 
facebook for blogger, facebook button

Step 2. Click anywhere inside the code area and search - using CTRL + F keys - for this piece of code:
<data:post.body/>
Note: you might find it more than 3 times, stop to the second one (or third one in case it won't show up after applying the code from step 3)

Step 3.  Just above it, paste this code:
<p><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&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>
Screenshot

facebook button

Step 4. Save your template and you are done with this simple implementation of the Facebook Like button on your Blogger blog.

106 comments:

  1. Replies
    1. That's because you have more codes in your templates from step 3. Try to add the facebook like button code just above the second <data:post.body/> code (you'll find 3 or 4 similar codes)
      Now it should work.

      Delete
    2. not work how i go to my post nothing pop up

      Delete
    3. Admin, now it works... thanks :D

      Delete
  2. Soljar26/19/2012

    I tried adding the code before the 2nd <data:post.body/>,but immediately I pressREAD MORE on my blog,my posts are not displayed.
    Though all hacks relating to data:post.body works perfect on my former template,since I started using this new magazine template,I've been having problem with it.ANY HELP?

    ReplyDelete
    Replies
    1. i have the same problem, Read more won't work while like button is assembled in the posts. Is there a way to fix that?

      Delete
    2. Just paste above the 3rd ........
      :)

      Delete
  3. Superb post.And very essential content.
    Thanks to post it.Worked for me.

    ReplyDelete
  4. Worked! Thanks! How do I add the like button to the mobile version of the Blogger post?

    ReplyDelete
  5. Worked!!!

    But, I take it below blog.post...

    ReplyDelete
  6. Worked for me as well!! :)

    ReplyDelete
  7. Thank you so much! I have tried using other peoples codes and I haven't been able to got them to work. It is so nice to have the codes work after spending the time to do it.

    ReplyDelete
  8. Hey Thanks. I just have one question. After every post, the like button shows two rows of faces. How do I reduce them to a single row. Thanks.

    ReplyDelete
  9. hey I placed ad on this place 'datapostbody' but they r also coming on homepage please help

    ReplyDelete
  10. Do you have any idea how we can integrate the Facebook like button on the mobile version of blogger?

    ReplyDelete
  11. If you could create tricks on adding like button on blogger mobile, that would be a very big help. Thanks. :)

    ReplyDelete
  12. Worked great for me-Thanks! But why not make a widget for this? or is there one and I missed it?

    1. Go To Blogger Dashboard >> Design >> Edit HTML

    I went this path though
    1. Go To Blogger Dashboard >> Template>> Edit HTML

    How can I get the 'Like' button so people can like the whole site as opposed to one post at a time?

    ReplyDelete
  13. Thank you, worked for me...

    ReplyDelete
  14. Worked for me guys :)

    ReplyDelete
  15. Big thank U...mine ddnt work for the first time ...then i found i have more then 3 data:post.body i pasted it above the 2nd and it worked fine ...thanks again

    ReplyDelete
  16. hello, thank you. it appeared on my blog but right after i clicked the "like" button , an error message appeared says "Sorry, this feature isn't available right now: We're working on this issue and will have it fixed soon. Check the Known Issues on Facebook page for more information." hope you can help, thanks a lot.

    ReplyDelete
  17. Worked just fine the first couple of minutes, then my likes just disappeared. Been having 0 likes since then, probably something with facebook?

    ReplyDelete
    Replies
    1. Did you ever fix this? I'm having the same issue. My latest blog post had 30 likes at the bottom, now randomly says 0...

      Delete
  18. Hi But Y It show's confirm after clicking Like.

    ReplyDelete
  19. i try to post blog with facebiik like buttons but not post what reasion.
    http://www.educationkranti.com/

    ReplyDelete
  20. Thank you! I had tried many tips. This worked really well and it was so simple.

    ReplyDelete
  21. it really works ,thanks. made my blog more beautiful http://shubhamnishad.blogspot.in

    ReplyDelete
  22. http://taglishnews.blogspot.com/ ut works but i want to add like and share . do you have one ?

    ReplyDelete
  23. Why is it not working for me ?
    I followed this also

    That's because you have more codes in your templates from step 3. Try to add the facebook like button code just above the second code (you'll find 3 or 4 similar codes)
    Now it should work.

    But still it is not working.
    My blog is

    http://tassawurbosal.blogspot.com/

    ReplyDelete
  24. I am unable to have it yet . I tried it a lot
    followed this also
    That's because you have more codes in your templates from step 3. Try to add the facebook like button code just above the second code (you'll find 3 or 4 similar codes)
    but unable to make it.

    ReplyDelete
  25. Sir, you are my Hero!
    Thanks a million for this easy trick.

    ReplyDelete
  26. Hlw please can u help me.I want to make money with my blog i made my adsense account but it was disapproped please say me how can i make it my blog manishnewideas.blogspot.com

    ReplyDelete
  27. Sir!

    This helped me so much!!! you have no idea. so it's basically ABOVE the . If you found more than 1 just repeat the steps!

    ReplyDelete
  28. But when the like will go ? and how to set the like with the fb page ?

    ReplyDelete
  29. Worked like a charm... thanks...

    ReplyDelete
  30. I don't have any "Expand Widget Templates" Box to check...is this the reason it doesn't work?

    ReplyDelete
    Replies
    1. Sorry but Blogger has changed the old template editor, so there's no 'Expand Widget Templates' anymore. However you can find it without expanding anything... just go to your template and add the code inside the search box. Btw, right now I've updated my post with some screenshots :)

      Delete
    2. i did a search for the code, but it's not locating any instances. any suggestions? . . .

      Delete
  31. It did work for me !! thanks so much, here is my blog address if you want to check it out http://oser-dire.blogspot.fr/

    ReplyDelete
  32. THANKS THANKS THANKS!!! :D

    ReplyDelete
  33. Worked perfectly! Thank you!

    ReplyDelete
  34. works great! Thanks, you guys are awesome, had tried several codes and tricks from here, and they all work. Keep the good work.

    ReplyDelete
  35. Thank you so much! This was so simple. :) Much love to you guys.

    ReplyDelete
  36. hi there, thank you for this post, very simple and helpful...however, the likes that are displayed are 30 0r 40, even when I have just published a post and there is no way I it can get 40 likes in about 10 seconds

    ReplyDelete
  37. Thank you, it really works :)

    ReplyDelete
  38. Thanks a lot. But if I want to add the like button under the posts, then what to do?

    ReplyDelete
  39. with new settings of html page I can;t find ??? plz guide according to new settings plz

    ReplyDelete
  40. I've tried it above every single <data:post.... code and it DOES NOT WORK! What is wrong? :/

    ReplyDelete
  41. I did everything according to instructions and the preview is not showing any facebook button there!

    ReplyDelete
  42. Thank you for this article. What's weird is that every other article that exists on the web for this feature gives advice from either old Blogger templates that don't exist anymore or just flat out doesn't work. This one worked in seconds flat and I posted mine below the post code so that it'd show up after people read my post. Thank you so much for making it so simple!

    ReplyDelete
  43. yes..it working a easy way....please post how to add fb share button..

    ReplyDelete
  44. only appears is header post, but not int the other pages.

    ReplyDelete
  45. thanks, very helpful post especially for those who don't have any html knowledge.

    ReplyDelete
  46. Worked After the second one ( )

    Thnx

    ReplyDelete
  47. I can do it for my blog
    http://urblue.blogspot.com

    ReplyDelete
  48. Worked like a charm, thank you so much!

    ReplyDelete
  49. Thank you so much. after going through almost 9 websites and blogs. It worked in seconds.Sweet simple steps.
    thank you :)

    ReplyDelete
  50. worked fine for me. thanks.
    is there any way to see who liked?

    ReplyDelete
  51. I used the same technique as you mentioned above to place share this buttons on my sports blog http://www.predictionspot.com/ it worked for me well..thank you..:)

    ReplyDelete
  52. Hi! I used to have this on my posts and then I mistakenly switched my blog all around and the buttons disappeared. I have a mobile view; is this a problem? If so, can I disable it, so I can get the FB like button back on my posts? I come up with zero when I search data:post.body It looks like you've helped lots of people ... maybe even me when I did it a few years ago!!! Thanks so much for your help!

    ReplyDelete
  53. I pasted above it as instructed. Nothing changed!What happen?

    ReplyDelete
  54. when i find in my template it just has only one, and I pasted above it as instructed. Nothing changed!What happen?

    ReplyDelete
  55. thanks for sharing...its working perfactly fine in my blog...keep it up

    ReplyDelete
  56. Superb post.....thanks man

    ReplyDelete
  57. Great Post dude... Thanks for sharing this tip..

    ReplyDelete
  58. The Like button appears on every post on the home page but does not appear on the individual posts. Anything I can do?

    ReplyDelete
  59. This one worked for me after other posts elsewhere failed...it took a couple tries to find the right data:post.body, but then POOF! Worked like a charm. THANK YOU!!

    ReplyDelete
  60. I found only two, I pasted just above the second one, but didn't work. No change in the template. Please help!

    ReplyDelete
  61. <<<<< how i get bar beside me, like.

    ReplyDelete
  62. Thank you so much. Your solution works. I had spent days trying to get this Facebook like to work on blogger I have now set a new blog and it works now.

    ReplyDelete
  63. Apply on 3'rd One it will definitely work dear friends. Thanks Admin.

    ReplyDelete
  64. Anonymous1/29/2014

    Thanks

    ReplyDelete
  65. I can see it on my blog through my laptop and tablet, but others say they can't see it. What did I do wrong? Thanks www.twogreyhoundtown.blogspot.com

    ReplyDelete
  66. Works great thanks, anyone having problems finding data:body in your browser as i did, simply download your template and open it in Notepad++ and search it, and just note the line its on in Notepad++ and find it that way in your browser

    ReplyDelete
  67. Many thanks, truly. It worked like magic!

    ReplyDelete
  68. Is there another to add this widget.....it is not going further than step 2 because the search shows 0 of 0

    ReplyDelete
  69. now it work thnx admin

    ReplyDelete
  70. Hi
    admin i want to add facebook like and share buttons below each post on my php auction script ....can you please help me ? www.xpennyauctions.com
    Many thanks

    ReplyDelete
  71. It worked. Much thanks.

    ReplyDelete
  72. Nice work....But Now How to increase the facebook fan page like??? do you have any idea about this?

    ReplyDelete
  73. wow its worked well for me. thanks for this post. only that i noticed the number of likes is high already even when am not sure its actually up-to-that number. do i need to reset anything? www.currentechinfo.blogspot.com

    ReplyDelete
  74. why is my like button appears in french !!!!!

    ReplyDelete
  75. Hello admin... this isn't working for me after adding this " http://helplogger.blogspot.com/2014/06/stylish-post-summaries-thumbnails-for-blogger-no-javascript.html "!!! :( Please help me!!! :(

    ReplyDelete
  76. Nice, it's work .. thank's .. how to add twitter and g+ share button too?

    ReplyDelete
  77. thank you soooo much :)

    ReplyDelete
  78. I am trying to put a link that they can "Like" my business page with one click. I have it with twitter "follow @dracaenawines" But I can't get any facebook icon to show up.

    ReplyDelete
  79. i posted there this code but not showing facebook like button
    plz help me @ www.chudasihousewife.com

    ReplyDelete
  80. not working for me as well

    ReplyDelete
  81. Thank you sooo much!! I was trying so hard to fix this!! You made my day !!!

    ReplyDelete
  82. It worked well but i thought this will show other buttons to xD like twetter and google + but nope it only shows fb code ! but thanks anyway :D

    ReplyDelete
  83. Not working with my template. I tried it like 4 times :(

    ReplyDelete

Although every comment is appreciated, due to an overwhelming amount of questions, I can no longer provide personalized help. Keep in mind that comments are moderated and may take some time to appear. All spam comments will be deleted. Thanks for understanding!