Sunday, 21 April 2013

Insert Facebook like button in every Blogger Post




Hi friends, In this post we will learn how to insert facebook like button in every Google Blogger Blog posts at the beigning and end. Social networks have been playing an important role in Blogging for driving traffic. Facebook is one the most liked social network among all the Internet users. Facebook enables you to create a Fan page and share your content on it. When a person like your facebook fan page, he/she subscribe to your content on facebook. He / She will be getting updates from your fan page about your Blog and they will visit you. Indeed it is an important source of referral traffic. We all know the importance of traffic for Rankings.
insert Facebook like button in Blogger posts

Wordpress has many built-in plug-in that enables this feature easily. But Google Blogger users have to do this manually by editing their blog's template. It is not a difficult task and if you know a little bit of HTML/XML then it takes a few minutes. You need to follow these steps in order to make it happen:

  • First of all, I recommend you to take backup of your current template so that you can avoid any loss.
  • For backup, go to your Blogger dashboard. Click on template and then Backup/Restore on top-right side. Click on download full template and save it to your computer.
  • Now that you have taken the back up, it is time to choose a facebook button. Visit Facebook Developers page, it will show like the one below:

customize facebook like button

  • Enter the Facebook page URL and customize your like button style.
  • If you don’t want the send button to appear with the like button, uncheck the send button from above form.
  • When you are done with the customization, you need to click on get code. It would pop-up a window like this one:

Facebook like button code

  • Now copy the code shown above, it is the JavaScript code you need to put in the <body></body> tag. Press CTRL+F to find <body> and paste this code just below it.
Update: Those who are unable to find the body tag like <body>, they should try to find it like this <body
  • Now copy the second code, if you want to put facebook like button at the end of every post you need to find this code first <data:post.body/>, if it is more than once try finding the last one.
  • Just after the last <data:post.body/> put the code you copied from facebook developer page.
  • Click on preview and make sure that everything is fine before saving.
  • Now click on Save Template and view any post. You will find facebook like at the end of every post.
  • If you want to put the like button in the beigning of every post you need to follow the same procedure but put the second code after this line
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'> instead of <data:post.body/>. You can use both of them as well for displaying it in the beginning and ending of your Article.
You may also like our All in one social network Widget.


You just inserted Facebook like button in your blogger blog posts. If you face any problem, you can comment here. I will be Glad to help you. I hope this will make your blogging experience better and help you getting likes and traffic.

You may see other Blogging and SEO tips on Unziptech.

If you like my work; you can show your regards by hitting Facebook like button, following us on Google+ or Twitter, stumbling our posts on stumble upon or giving us a link back via the links below. Stay tuned for more tech updates.

Do you like this post? Please link back to this article by copying one of the codes below.

URL: HTML link code: BB link code:
author pic
Author: Mohammad Zafar Ahmad
Zafar Ahmad is PHP/Java Developer and a Passionate Blogger. He likes to write about Blogging tips, SEO tips, Blogger Widgets, Smart phones, Tablets and Online Earnings. You can find him on Facebook, Twitter or Google+

83 comments:

  1. Replies
    1. Did you placed the code at the right place and followed the whole procedure? Check it once again, you can see its working on my Blog.

      Delete
  2. This is crazy... I Can´t find body in the new version of editing template on blogger.... Has it happened to anyone ?

    ReplyDelete
    Replies
    1. Well there must be a body tag in your template..Use Ctrl+F to find body..

      Delete
  3. sir is it still works , just like the comment above me there is no expand widget anymore...

    http://symbianizetech.blogspot.com/

    ReplyDelete
    Replies
    1. Yes it works. Google has introduced its new Template editor, So there is no need to expand the widgets. You can simply find the code using CTRL+F..

      Delete
  4. Is 'body' the same as 'head' ? Because there's no body in my version of template

    ReplyDelete
    Replies
    1. No it is not the same..but body comes after the closing head tag..if you can't find it..take a backup of your template and email me xafar89[at]gmail[dot]com..i will try to find out the problem..

      Delete
    2. i also did not find body in my template

      Delete
  5. hi, what should i put as FB URL?

    ReplyDelete
    Replies
    1. You need to put your own Facebook Fan page link to get the like button from facebook developers..

      Delete
  6. Please the blogger template has been change, it is very different now and also confusing. help out please

    ReplyDelete
    Replies
    1. Take a backup of your template and email me at admin[at]unziptech.com. i will check it.

      Delete
  7. Its not working for me sir..I just want to add "Follow me" option on my blog where you can connect to FB, Twitter, G+, RSS, Pinterest, Linkedin pages..Can you please help me with that.

    ReplyDelete
    Replies
    1. @Sunny
      Yes sure, take a backup of your blog template and send me at admin[at]unziptech.com. i will check your template so that i could get to know where is problem..A few of my online readers sent me their template backup and i added this button following the same procedure..

      Delete
  8. Hi Zafar,

    I added the code but it doesn't appear anywhere. I need to have the facebook like just beneath the post title, is that possible?

    ReplyDelete
    Replies
    1. @Hanis
      Yes it is possible to add this beneath the post title..i have got your email regarding the same..i will check your template..

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

    ReplyDelete
  10. Ok, I swear that after the head, the code says:
    head

    body expr:class='"loading" + data:blog.mobileClass'
    There is not a straight "body" tag. Where should I put it?

    ReplyDelete
    Replies
    1. Yeah that's the body tag..in some templates its like < body > and in some templates its like the one you mentioned.. Put the code beneath it..

      Delete
  11. This comment has been removed by the author.

    ReplyDelete
  12. cant find the seconde code "data:post.blog"
    someone please help me

    ReplyDelete
    Replies
    1. take a backup of your template and send me at admin[at]unziptech.com

      Delete
  13. Hi, I tried to do this but could not find this code anywhere in my template code:
    Not sure what is going on. Please can you help me. Thank you.

    ReplyDelete
  14. Arghh it didn't post, it is this code: < data : post . body /> but without the spaces.

    ReplyDelete
    Replies
    1. Yeah it is without spaces..i didn't put any spaces in between, check it again..

      Delete
  15. It didn't work for me either, though I believe I put everything in the right place. Can I send you my code as well? Thank you.

    ReplyDelete
    Replies
    1. Ya you can send me your blog template backup at admin[at]unziptech.com..i will check it myself..

      Delete
  16. This comment has been removed by the author.

    ReplyDelete
  17. The button didnt work for me either neither does downloading my template to send to you for help. Instead i get this error message "The XML page cannot be displayed
    Cannot view XML input using XSL style sheet. Please correct the error and then click the Refresh button, or try again later.


    --------------------------------------------------------------------------------

    The operation completed successfully. Error processing resource 'file:///C:/Users/USER/Downloads/template-47904474477680020...

    "
    Please help

    ReplyDelete
    Replies
    1. Hello Majovo, I put all tutorials after testing them myself so there must be problem with your procedure..you can see these facebook buttons on my blog for live demo..I would be glad to help you if you can send me your blog template so that i could check it and put the code at right place..

      Delete
  18. Thanks so much for your time. I just sent the template from my email dafedafedafe to you. i would really appreciate your help. My blog url is http://jovoflavour.blogspot.com. Thank you.

    ReplyDelete
  19. Hi.
    Thanks for this useful post.
    But it doesn't work on my blog.
    Help me please!

    ReplyDelete
  20. Yippeeeeeeeeee. Mine is working on my blog now. Thanks for helping out and editing my template. You are the best!

    ReplyDelete
  21. Hello! Thanks for posting this! I am having trouble though. Do you paste the first code immediately after the word body or after the whole line: body expr:class='"loading" + data:blog.mobileClass'?

    Also, I do not have data:post.blog anywhere in my html. I have data:blog.metadescription a few times. Any help would be so appreciated!

    ReplyDelete
    Replies
    1. Yeah you need to paste it after the complete body expr line..You must have in your template, If you don't have it please search it like data:post.body or post-header-line-1 or you can send me your blog back up i will check your template myself..send it on admin[at]unziptech.com

      Delete
  22. Hi Zafar,

    My problem also is to find the body where to put the code. Can you please help me with this? Since there is no "Expand Widget Template" option anymore.

    ReplyDelete
  23. This is a good post, but for the life of me I can't get this to work. I have no idea why.

    ReplyDelete
    Replies
    1. If you follow the complete procedure mentioned above in the tutorial m sure that you will be able to add this FB button to your blog..if you r still getting trouble you can send me your template backup at admin[at]unziptech.com

      Delete
  24. hi zafar
    i've been trying to put the like button on the end of each blog post but have had no joy. it seems you have already had a lot of requests for help but i was wondering if you would be able to help me too?
    thanks!

    ReplyDelete
    Replies
    1. ya sure..you can send me your blog template backup on my email id..

      Delete
  25. Can't get it to work, either :( Can I send you my template?

    ReplyDelete
  26. it would be helpful if you told people how to actually get to the HTML of their site.

    I finally figured it out. You click on "Layout" and then next to the customize button it says "edit HTML"

    ReplyDelete
    Replies
    1. Oh..I always write it in my tutorials..Might not have included this point..Thanks for mentioning it..

      Delete
  27. Thank a Lot, It was very Helpful.. . . :)

    ReplyDelete
    Replies
    1. Thanks that you find my blog informative..keep visiting.. :)

      Delete
  28. auto share blogger post to fb fb page,twitter k bary mein bta dein.

    ReplyDelete
    Replies
    1. For Auto share on Twitter using feedburner check out this post

      http://www.unziptech.com/2013/04/enable-auto-tweet-using-feedburner.html

      and you can connect your twitter account with facebook using the official twitter app and enable auto share on facebook via twitter..

      Delete
  29. I followed the whole procedure... But mine is not working...?

    ReplyDelete
  30. HellO!

    I tried the procedure u mentioned, but nothing happend!!

    can u please fix the issue!!

    http://pinkytte.blogspot.in

    here I have tried it!

    ReplyDelete
  31. @Bloomin Garden
    @ Lavanya

    Please send me your blog template backup..I will check it out..

    ReplyDelete
  32. Thank you, It was very Helpful...............
    http://sqlneed.blogspot.com

    ReplyDelete
  33. i tried my best can u help me

    ReplyDelete
  34. Done all of the step but nothing appear on my blog... kindly assist with it... :'(

    ReplyDelete
  35. @aadityan
    @Sarah
    Please send me your template backup..

    ReplyDelete
  36. i can't find the body tag thing either :(

    ReplyDelete
  37. Seems Blogger applied a new HTML code in the templates mines different from before that's why I cant see it either.

    ReplyDelete
  38. I had trying this code at my blog but it didn't work http://stylesnblush.blogspot.in/

    ReplyDelete
    Replies
    1. It should work if you properly follow the instructions..I have placed this like button in hundreds of blogger templates and many of my readers have also added it..

      Delete
  39. @ Nada Salah
    @ Dan Clerico
    If you can not find the body tag, try searching for it this way <body
    Every template has a body tag, there is nothing wrong with the new blogger HTML codes..

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

    ReplyDelete
  41. Hi, the tutorial is very helpful, but I can't find the in my HTML, do you have any idea why is that and how can it be fixed?
    Thanks a lot!

    ReplyDelete
    Replies
    1. There must be a body tag..search for the body tag like this <body

      Delete
    2. I have found the body tag and pasted the first code, but i don't know where to paste the second one because i can't find
      * sorry, I now realize I didn't say so in my first comment

      Delete
    3. I have the same problem, I can't find the second code.

      Delete
    4. The Ctrl+F is not working in my html box.

      Delete
  42. iam searching this for a long time finally i got it check this http://leadsquote.com/

    ReplyDelete
  43. Hi! Thanks for the tutorial! I have one problem, i get the like button on every post but it is connected to my entire site. So if i like one post all the buttons on all the posts change to "liked", have you ever encountered this problem before?:)

    ReplyDelete
    Replies
    1. Yes it is your facebook page like button..I will post a new tutorial which will work for individual posts..

      Delete
    2. Ditto, I want to get individual page likes. Did you post that tutorial? Thanks for the help you provide.

      Delete
  44. Do we need to add a different like for every post. I tried the above method, but nothing shows up on my blog

    ReplyDelete
    Replies
    1. No, you don't need to add different like button, the above procedure will make the like button appear in every post..

      Delete
  45. Hi dude

    Your Post was awesome it seems to be a good energy resource it fuu fills the thirsty related to this topic.

    ReplyDelete
  46. bro i wanna make my blog address look like this www.bigmoneybeat.com with out blogspot

    ReplyDelete
  47. Hi Zafar,

    I have a "problem" with the like button, and the motive I've writen it with quotes is that I put the like button in the end of every post, as usual, but now the LIKE BUTTON needs an absolute URL to the code (EX.: href="http://www.unziptech.com/"), but I want to put a button to the post itself (EX.: "http://www.unziptech.com/2013/04/insert-facebook-like-button-in-every.html").

    I did some changes and teste some codes to try to put it to work, but 'till now I have no Idea how to do it.
    I read somewhere to try it + window.location.href + inside an script, instead of put the absolute URL but the Like button just disapeared. I'm rly burning my brain out to do it here, and I apreciate if you have heard (or read) something to resolve this.

    Thakyou for your attention in advance.

    ReplyDelete
    Replies
    1. **EDIT: actually I did it with a simple change.

      Instead of use this:
      < div class="fb-like" data-href="href="http://www.unziptech.com/" data-width="250" data-show-faces="true" data-send="true">< /div>
      (I used your blog url for Ex. only)

      I used this:

      < fb:like expr:href='data:post.url' width="250" colorscheme="dark" layout="button_count" show_faces="true" send="true">< /fb:like>

      It seems to works fine on Blogger :D
      I hope my efforts helps other people to solve that problem.

      Delete
    2. Thanks for the code..actually i am not getting much time to write a tutorial for the same..I appreciate your work..

      Delete
  48. sir is it still works , just like the comment above me there is no expand widget anymore...
    http://rehanssoftwares.blogspot.com/

    ReplyDelete
    Replies
    1. This tutorial still works 100% as there is no need to expand the widgets in the new blogger template editor..

      Delete
  49. I can't find :( I've tryed so many times
    -Sasha

    ReplyDelete