How to Insert Facebook Like Button in Every Blogger Post
Add this code after the <body> tag in the template (Template -> Edit HTML):
Find this line:
and insert this code after it:
Example:
Related: How to add Reddit button to Blogger (Blogspot) - the problem with country specific domain redirection In blogger.
<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.
THANK YOU. Your instructions are the only ones that worked for me. Been trying to do this for weeks. Thanks
ReplyDeleteVery Informative Post. Thanks for sharing.
Delete--->>How To Add Reply Button On Facebook Comment
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.
ReplyDeleteSearch for <body instead of <body>.
DeleteSometimes this tag contains attributes (see example above).
Thank You very much, Ted! I try to follow your instruction and it is work.
DeleteHello admin,
ReplyDeletethanks for your valuable post. I try but in vain.
Best Regards,
ataur
Thank you buddy that is really nice... implemented it on my blog http://getapprovedadsense.blogspot.com
ReplyDeleteHi! 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!!
ReplyDeleteMaybe 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'>.
Deletethanks for this instruction
ReplyDeletehttp://cm-japan.blogspot.com.br/
Thank you! I have a question - can we also see who liked our post?
ReplyDeleteHi 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 :)
ReplyDeleteJust changed langauge of plugin to Polish because my bike blog is in that langauge.
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?
ReplyDeleteI 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 "/>"
ReplyDeleteNice post... A-z Bollywood and Hollywood moves for free.. A-Z Games download free.. http://www.themovies4.blogspot.com
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteIts not working for me , I am using blogger
ReplyDeleteHi 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!
ReplyDeletewww.thecultureofdesign.com
I tried adding social buttons after every post. It doesn't work on my blog. What would be the reason?
ReplyDeleteWhere is the right place to put the button? anyway thanks in advance
ReplyDeleteThanks
ReplyDeleteHow to add like and share button like your
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?
ReplyDeleteNice post, this is osum and very helpful for mine thanks admin you are greatmoving on quotes
ReplyDeleteAfter 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.
ReplyDeleteI 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!
thanks for sharing, I placed on my page
ReplyDeletearrayhd
arrayhd
Thanks for your instruction ^^
ReplyDeletei have try to add this code...but unfortunately it doesn't appear on the post. why?
ReplyDeleteSame with mine and I would really like to add it in. :) I've triple checked everything to make sure I did it correctly.
DeleteHi 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/
ReplyDeleteThank you. Much appreciated.
ReplyDeleteHi 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
ReplyDeleteYou can check www.recipelisted.com for ref.
Thanks it works. using it on my blog
ReplyDeletehttp://goosball.blogspot.com
thanks champ. it's work fine.
ReplyDeleteFor more specific instruction with step by step photo instruction,
ReplyDeleteVisit : http://www.theopportunities.net/2014/02/how-to-add-facebook-like-button-in-blog.html
Nice brother keep it up...
ReplyDeletehttp://allphonesapps.blogspot.com i past it on my blog......
This article is really effective..it's working on my blog www.interestingsecret.com
ReplyDeleteBy Default, the theme I used has a "Share Button". Should I still implement the first part?
ReplyDeleteI 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!
This was awesome !! so quick even a noob like I got it within minutes, yeeeew.
ReplyDeletei 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????
ReplyDeleteYou may try to change the template. Then start modification again.
DeleteThanks, I will try this on my new blog site. Hope it works.
ReplyDeletemay i know why i have two like buttons under my post? :(..How to remove one of the button?
ReplyDeleteI 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
ReplyDeleteIt's working great in my blog.. Thank you for sharing this code..
ReplyDeleteThanks :D This worked like a charm - but how is it that people has liked my posts before I inserted the button?? :O
ReplyDeletenot working on mine. What should i do?
ReplyDeleteI added before or after div class='post-footer', nothing happen. I have to put the coding in every post myself.
ReplyDeleteI am adding the addthis.com coding. fyi.
Thanks for your instruction
ReplyDeleteThanks a lot it works on my site.. I just needed to copy the html on your example to have it working
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteThank 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