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. UnknownAugust 4, 2013 at 7:03 PM

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

    ReplyDelete
  2. MinttuAugust 26, 2013 at 12:44 PM

    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. Ted JonesAugust 30, 2013 at 2:15 PM

      Search for <body instead of <body>.

      Sometimes this tag contains attributes (see example above).

      Delete
    2. Akash YadavMarch 27, 2015 at 5:38 AM

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

      Delete
  3. ataurAugust 31, 2013 at 9:23 AM

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

    Best Regards,
    ataur

    ReplyDelete
  4. UnknownSeptember 21, 2013 at 2:35 AM

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

    ReplyDelete
  5. JamieSeptember 25, 2013 at 6:33 AM

    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. Ted JonesSeptember 29, 2013 at 7:01 AM

      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. fmass.October 15, 2013 at 7:35 AM

    thanks for this instruction

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

    ReplyDelete
  7. Active ArunOctober 18, 2013 at 10:23 PM

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

    ReplyDelete
  8. TrzecieKołoOctober 19, 2013 at 12:56 AM

    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. UnknownOctober 23, 2013 at 6:41 PM

    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. SamNovember 13, 2013 at 5:50 AM

    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. Islamic Channel KohatNovember 18, 2013 at 1:44 AM

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

    ReplyDelete
  12. Prateek RathoreNovember 18, 2013 at 5:41 PM

    This comment has been removed by the author.

    ReplyDelete
  13. Prateek RathoreNovember 18, 2013 at 5:43 PM

    Its not working for me , I am using blogger

    ReplyDelete
  14. UnknownNovember 19, 2013 at 7:45 PM

    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. Kakaru KoirengNovember 20, 2013 at 1:20 AM

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

    ReplyDelete
  16. iskoNovember 22, 2013 at 8:36 PM

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

    ReplyDelete
  17. Uttam BaraiDecember 2, 2013 at 11:44 AM

    Thanks
    How to add like and share button like your

    ReplyDelete
  18. Servant of Srila PrabhupadaDecember 6, 2013 at 3:17 AM

    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. UnknownDecember 14, 2013 at 9:17 AM

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

    ReplyDelete
  20. Ruth FlorescaDecember 16, 2013 at 6:55 PM

    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. UnknownDecember 17, 2013 at 8:25 AM

    thanks for sharing, I placed on my page

    arrayhd
    arrayhd

    ReplyDelete
  22. Bảo PhạmDecember 17, 2013 at 12:38 PM

    Thanks for your instruction ^^

    ReplyDelete
  23. UnknownDecember 22, 2013 at 4:10 AM

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

    ReplyDelete
    Replies
    1. Jen from xoxoJenDecember 22, 2013 at 1:51 PM

      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
  24. my reality bitDecember 27, 2013 at 11:50 AM

    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
  25. Asyraf GoldDecember 30, 2013 at 8:12 PM

    Thank you. Much appreciated.

    ReplyDelete
  26. RecipelistedDecember 31, 2013 at 6:02 PM

    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
  27. UnknownJanuary 9, 2014 at 6:00 AM

    Thanks it works. using it on my blog

    http://goosball.blogspot.com

    ReplyDelete
  28. UnknownJanuary 9, 2014 at 7:14 PM

    thanks champ. it's work fine.

    ReplyDelete
  29. How to add facebook like button in everypostFebruary 9, 2014 at 10:13 PM

    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
  30. UnknownFebruary 12, 2014 at 4:37 AM

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

    ReplyDelete
  31. UnknownMarch 3, 2014 at 9:31 PM

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

    ReplyDelete
  32. ReverieMarch 11, 2014 at 11:00 AM

    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
  33. SteveMarch 13, 2014 at 4:53 PM

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

    ReplyDelete
  34. Umar DhillonApril 16, 2014 at 7:56 PM

    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. Ted JonesApril 24, 2014 at 5:31 AM

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

      Delete
  35. Food CraveApril 24, 2014 at 9:56 PM

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

    ReplyDelete
  36. flytobeApril 28, 2014 at 3:21 AM

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

    ReplyDelete
  37. UnknownMay 2, 2014 at 12:23 AM

    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
  38. SagorMay 8, 2014 at 8:32 AM

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

    ReplyDelete
  39. AnonymousAugust 27, 2014 at 6:20 AM

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

    ReplyDelete
  40. KarenSeptember 10, 2014 at 10:00 AM

    not working on mine. What should i do?

    ReplyDelete
  41. Alfred TownOctober 14, 2014 at 1:57 AM

    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
  42. RahulDecember 15, 2014 at 1:45 AM

    Thanks for your instruction

    ReplyDelete
  43. UnknownJanuary 3, 2015 at 11:28 PM

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

    ReplyDelete
  44. UnkhowmanJune 11, 2015 at 5:52 AM

    This comment has been removed by the author.

    ReplyDelete
  45. AnonymousSeptember 17, 2015 at 2:39 AM

    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

Popular posts from this blog

Do not use (only) flash memory (SSD drives, hardware wallets, USB flash drives) for your precious private keys!

Image
Flash memory is not a reliable medium for archives. Especially when there is no regular power. I have personal experience with usb flash drive not powered for weeks - one file became corrupted . (Read more here: Archiving private keys - TLDR version. ) You should always back up on paper and other mediums. Flash memory is prone to failure if it is not powered for weeks or more and if there are ionizing radiation When you write your precious private keys you should use technologies like Parchive and ZFS . And make several copies of your files. It's OK if you use your USB flash drive for another backup, but don't rely on it! Always back up on DVDs (even small files!), paper and online (after encryption with CPU and RAM intensive key derivative function like scrypt). Here is example of using the scrypt utility: $ sudo apt-get install scrypt $ scrypt enc -M 1073741824 -t 200 secret.txt encrypted.scrypt Do not use default values of "-M" and "-t", they...
Read more

Archiving private keys - TLDR version

0. Make multiple encrypted copies. On DVDs (they are better than CDs and Blu-Ray discs; DVD+R are better than DVD-R), paper, cloud services like DropBox, OneDrive, Google Drive, e-mail it to yourself and to your friends, use P2P storage services like MaidSafe, Storj and Sia , etc. 1. Use proper font when printing PGP encrypted keys on paper. 2. Flash memory (SSD, USB flash drives, hardware wallets) is less reliable when not powered regularly (i.e. every week). 3. Use error correction methods like Parchive and ZFS. 4. Print on paper or store on digital media only encrypted data. 5. Your encryption software should use CPU/RAM-intensive KDF (i.e. scrypt with secure options - do not use defaults! ). First, encrypt with scrypt and then encrypt it again with PGP (using different password!) in ASCII armor mode before print it (other methods like QR codes may not be reliable as multiple copies of the PGP ASCII armor). Do not use the same password for the PGP because it's easy to brute...
Read more
[ad removed]