How to Insert Facebook Like Button in Every Blogger Post

Add this code after the <body> tag in the template (Template -> Edit HTML):

<div id="fb-root"></div>
<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 = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


Find this line:

<div class='post-footer'>

and insert this code after it:

<div class="fb-like" expr:data-href='data:post.canonicalUrl' data-send="true" data-width="450" data-show-faces="true"></div>

Example:



Related: How to add Reddit button to Blogger (Blogspot) - the problem with country specific domain redirection In blogger.

Comments

  1. THANK YOU. Your instructions are the only ones that worked for me. Been trying to do this for weeks. Thanks

    ReplyDelete
    Replies
    1. I have a suggestion for you. The new script is still work 100% and free.
      There is also an example of if you want to see results:
      http://www.kangsigit.com/2016/01/Script-POOL.html

      Note: This is not linked to FACEBOOK, so no third party.

      Delete
  2. I can't find a body tag on my HTML :/ what's the problem? Is it possible to insert by myself? I'm really new to HTML.

    ReplyDelete
    Replies
    1. Search for <body instead of <body>.

      Sometimes this tag contains attributes (see example above).

      Delete
    2. Thank You very much, Ted! I try to follow your instruction and it is work.

      Delete
  3. Hello admin,
    thanks for your valuable post. I try but in vain.

    Best Regards,
    ataur

    ReplyDelete
  4. Thank you buddy that is really nice... implemented it on my blog http://getapprovedadsense.blogspot.com

    ReplyDelete
  5. Hi! I already have a twitter like button in my footer, so when I try to add the FB Like button there also, it doesn't show up and cuts off some of my Twitter button? Could you tell me how to post things side-by-side in the footer? Thanks!!

    ReplyDelete
    Replies
    1. Maybe you should try to add <br /> tag after the code you add to the post-footer. Also you may try to add the code before the <div class='post-footer'>.

      Delete
  6. thanks for this instruction

    http://cm-japan.blogspot.com.br/

    ReplyDelete
  7. Thank you! I have a question - can we also see who liked our post?

    ReplyDelete
  8. Hi Ted, big thx for that post. I tried many solutions for blogger, and only this one works fine. And it is much easier to implement than others :)

    Just changed langauge of plugin to Polish because my bike blog is in that langauge.

    ReplyDelete
  9. Thank You, Ted! I try to follow your instruction and it is work when I Preview Template but when I view my blog I couldn't find it. Could you tell me what's the problem?

    ReplyDelete
  10. I found < body , the < body > isnt there... it gives an error: Error parsing XML, line 1070, column 9: Element type "body" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
  11. Nice post... A-z Bollywood and Hollywood moves for free.. A-Z Games download free.. http://www.themovies4.blogspot.com

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. Its not working for me , I am using blogger

    ReplyDelete
  14. Hi Ted, thanks for sharing! Do you know how I go about inserting this link into my blog by the header of each blog post rather than the footer? Thanks for any further help!
    www.thecultureofdesign.com

    ReplyDelete
  15. I tried adding social buttons after every post. It doesn't work on my blog. What would be the reason?

    ReplyDelete
  16. Where is the right place to put the button? anyway thanks in advance

    ReplyDelete
  17. Thanks
    How to add like and share button like your

    ReplyDelete
  18. Hi Ted! I worked out on your code and both 'like' and 'share' buttons where displayed. However, I do not want the share button. I would like to insert only the 'like' button. Can you please help me solve this?

    ReplyDelete
  19. Nice post, this is osum and very helpful for mine thanks admin you are greatmoving on quotes

    ReplyDelete
  20. After changing my template, it took me a long time searching for info on how to bring back the FB like and share button on http://mommywrites.blogspot.com. You know, yours is the only blog I saw that is easy to follow and has codes that work.

    I wonder why Facebook's explanations on its page seem very complicated and hard to understand. Anyhow, I'm glad I saw your blog. Thank you very much for the helpful instructions!

    ReplyDelete
  21. i have try to add this code...but unfortunately it doesn't appear on the post. why?

    ReplyDelete
    Replies
    1. Same with mine and I would really like to add it in. :) I've triple checked everything to make sure I did it correctly.

      Delete
  22. Hi there - I'm having some trouble. I think I must have other code that is "blocking" this from working somehow? Any suggestions on what to search for and perhaps remove? If it helps determine the problem, my feed button at bottom of each post seems to just be decoration. Here is link to my blog if seeing it helps. Thanks so much! http://www.myrealitybit.com/

    ReplyDelete
  23. Hi Mary, You can add the same in Header as well! . Search for "div class='post-header'". You may find more than one times in the HTML template. Just paste the code below the second or the last post header

    You can check www.recipelisted.com for ref.

    ReplyDelete
  24. For more specific instruction with step by step photo instruction,

    Visit : http://www.theopportunities.net/2014/02/how-to-add-facebook-like-button-in-blog.html

    ReplyDelete
  25. Nice brother keep it up...
    http://allphonesapps.blogspot.com i past it on my blog......

    ReplyDelete
  26. This article is really effective..it's working on my blog www.interestingsecret.com

    ReplyDelete
  27. By Default, the theme I used has a "Share Button". Should I still implement the first part?
    I tried to use the code given above but had no luck on making it a success. Any ideas on this?
    Also tried AddThis or ShareThis just to come up with a like button but had no luck on that as well.

    Thanks!

    ReplyDelete
  28. This was awesome !! so quick even a noob like I got it within minutes, yeeeew.

    ReplyDelete
  29. i deleted <body tag by mistake and now dont know how to retrieve it . some body can help me how to fix it and where to put <body????

    ReplyDelete
    Replies
    1. You may try to change the template. Then start modification again.

      Delete
  30. Thanks, I will try this on my new blog site. Hope it works.

    ReplyDelete
  31. may i know why i have two like buttons under my post? :(..How to remove one of the button?

    ReplyDelete
  32. I want to be develop my carrier in outsourcing such as freelance, o-desk and other related real website. Always i trusted .secured and reliable online earning ways.Now i can started my carrier on outsourcing, i can providing facebook like, you tube viewers. tweeter followers, tweeter favorites. please visit the link. shipon perves

    ReplyDelete
  33. It's working great in my blog.. Thank you for sharing this code..

    ReplyDelete
  34. Thanks :D This worked like a charm - but how is it that people has liked my posts before I inserted the button?? :O

    ReplyDelete
  35. not working on mine. What should i do?

    ReplyDelete
  36. I added before or after div class='post-footer', nothing happen. I have to put the coding in every post myself.

    I am adding the addthis.com coding. fyi.

    ReplyDelete
  37. Thanks a lot it works on my site.. I just needed to copy the html on your example to have it working

    ReplyDelete
  38. This comment has been removed by the author.

    ReplyDelete
  39. Thank you! By the way one can add any like button to Blogger using widget https://likebtn.com/en/blogger-like-button. Just my two cents...

    ReplyDelete

Post a Comment

TedJonesWeb.blogspot.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com

Popular posts from this blog

This is why "Credible friends app" is bad - don't use it

Brexit will make Bitcoin more popular

"I'm earning 15k and my friends earn 80k", "I feel like I want to end my life."

When you print important crypto stuff (private keys) make sure you use a proper font and don't leave traces on your printer's hard drive and your computer's hard drive