How To : Adding Facebook Like Button On Blogger's Each Post.

Welcome



Last Updated 17-05-2020

If you're a blogger and use blogspot for blogging you would know that you can't add facebook like button on each post of blogger. Moreover, Adding Facebook like button on each post of blogger is slightly different than adding like button on websites. Here in this post you will know how to add facebook like button on blogger's each post with few HTML and xml tags, don't freak out, its a peace of cake.

Let's begin, This is most reliable technique i have ever used.

Go to Facebook developers paste your url select your styles and generate the piece of code. Make sure that you have selected all your desired options.
See below for illustration
Facebook Like Button Configurator
Now Click on Get the code, You will see Two codes to work on. The first code which is shown in Step1 needs to be placed in body tag of blog. for the second one we will discuss later.

Facebook Like Button Code

now copy the code which is shown under step1.

Facebook Like Button STEP1

Now go to your blog and edit it's template in HTML i.e  Design >>> Edit HTML.

Facebook Like Button Edit HTML


Hit Ctrl+F to find <body see image below and paste the code you copied. see image below for clarification

Facebook Like Button Add Code to Body Tag




Now again go to facebook like code and copy the code shown under step2
Facebook Like Button STEP2

come back to blogger and find <data:post.body/> and hit Enter two times. keep in mind that there two <data:post.body/> you need to paste the code in second one. Now paste the code


Facebook Like Button Add Code To Post

After pasting your code replace your blog url with &lt;div:post.url/&gt;
Your code should look something like this.

Facebook Like Button Add Code To Post URL Correct

Click Save Template and you're done now.
Facebook Like Button Save Blog Template




now you will find like button on each post. 
If You Find Problems Please Let Me Know In Comments
Thanks.

.................

Post Comments Please

44 comments:

  1. Thanks a lot. worked flawlessly.
    by the way, how do i know the people who liked the post? it doesnt show any notification on my facebook account.
    also, how can i have profile pics of those who have liked the post shown below the post? any way of including the XFBML script in template?

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  2. Thanks but

    it's not working for me, do you know why?

    I did exactly the same...

    ReplyDelete
  3. never mind , now it works but it must be pasted on the last cause there are two.
    Thanks again!

    ReplyDelete
    Replies
    1. This comment has been removed by a blog administrator.

      Delete
  4. @webdevelopment : In this post i told everyone to paste it at last or you can say lower body of post."data:post.body/" is ending tag and pasting code after that work fully. thanks for feedback

    ReplyDelete
  5. Hey it works! but when I click the Like Button, in my facebook page appears without the post’s image, appears another random image. how can I solve this? D:

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

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

    ReplyDelete
  8. Dear, Thanks a lot for the information..But how to place it on left side of the post?

    ReplyDelete
  9. Hey thanks but how can I place the like button on top of the post

    ReplyDelete
  10. thanks for feedback : for placing it on top or left or on bottom of post you just need to use the attribute of div i.e align attribute thanks

    ReplyDelete
  11. you're welcome to post you feedbacks again after up-gradation

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

    ReplyDelete
  13. clear the spam post dude...

    ReplyDelete
    Replies
    1. if one can earn or get traffic by my blog it's pleasure for me :-)

      Delete
  14. Hey man !! In new FB 2 codes are shown. which one to place?

    ReplyDelete
    Replies
    1. try to replace old one new code doesn't seem to work

      Delete
  15. how can i put this button to each and every photos?

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

    ReplyDelete
  17. Hello, I'm having a bit of trouble trying to get the like button to like a specific post. Everything is working, but it instead likes the main URL of my blog.

    ReplyDelete
    Replies
    1. Replace your home url with it will work. if you fine more problem please post me your problem on this link http://blog-tipster.blogspot.com/p/ask-for-help.html

      Delete
  18. This comment has been removed by a blog administrator.

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

    ReplyDelete
  20. Nice POst!!!! here is my website www.zuketech.blogspot.in

    ReplyDelete
  21. Hi ! I was pleasantly surprised the moment I loaded this web page of your blog. What was the biggest goal at that moment when you made a decision to compose your first website?

    ReplyDelete
  22. Why it is asking for confirmation after hitting LIKE..???

    ReplyDelete
  23. The new way of editing HTML on Blogger is really difficult because I can't find data post body code, even after I Expand all the Widgets.

    Please, can you contact me at: generator.humor@gmail.com

    Thanks

    ReplyDelete
  24. thanks a lot :) I was searching for this, it really helped :)

    ReplyDelete
  25. Hey, i clicked on the html code and i cannot find data:post.body anywhere...any solutions?

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

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

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

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

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

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

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

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

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

    ReplyDelete

{lang: 'en-GB'}