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+
Posted by at
Labels: blogging, facebook like button, facebook widget, increase blog traffic, social networking widget

83 comments:

  1. IZU4 May 2013 at 10:44

    hi mine is not working

    ReplyDelete
    Replies
    1. Zafar Ahmad4 May 2013 at 11:52

      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. Mademoiselle9 May 2013 at 02:36

    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. Zafar Ahmad9 May 2013 at 09:53

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

      Delete
  3. XAny9 May 2013 at 17:01

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

    http://symbianizetech.blogspot.com/

    ReplyDelete
    Replies
    1. Zafar Ahmad9 May 2013 at 17:18

      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. Unknown13 May 2013 at 07:16

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

    ReplyDelete
    Replies
    1. Zafar Ahmad13 May 2013 at 10:10

      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. Unknown15 May 2013 at 16:53

      i also did not find body in my template

      Delete
  5. Unknown14 May 2013 at 15:45

    hi, what should i put as FB URL?

    ReplyDelete
    Replies
    1. Zafar Ahmad14 May 2013 at 16:01

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

      Delete
  6. Buki16 May 2013 at 15:12

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

    ReplyDelete
    Replies
    1. Zafar Ahmad16 May 2013 at 16:35

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

      Delete
  7. Unknown16 May 2013 at 17:14

    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. Zafar Ahmad16 May 2013 at 17:36

      @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. Unknown17 May 2013 at 07:33

    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. Zafar Ahmad17 May 2013 at 09:54

      @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. Unknown21 May 2013 at 12:00

    This comment has been removed by a blog administrator.

    ReplyDelete
  10. Jakari W23 May 2013 at 01:42

    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. Zafar Ahmad23 May 2013 at 10:01

      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. Anonymous31 May 2013 at 06:28

    This comment has been removed by the author.

    ReplyDelete
  12. Anonymous31 May 2013 at 06:33

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

    ReplyDelete
    Replies
    1. Zafar Ahmad31 May 2013 at 09:49

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

      Delete
  13. Kezza4 June 2013 at 15:33

    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. Kezza4 June 2013 at 15:34

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

    ReplyDelete
    Replies
    1. Zafar Ahmad4 June 2013 at 16:17

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

      Delete
  15. Fatuma4 June 2013 at 21:16

    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. Zafar Ahmad5 June 2013 at 09:52

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

      Delete
  16. Jacqueline6 June 2013 at 19:58

    This comment has been removed by the author.

    ReplyDelete
  17. Jovoflavour8 June 2013 at 13:48

    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. Zafar Ahmad8 June 2013 at 14:30

      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. Jovoflavour8 June 2013 at 15:39

    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. Omid Rezaee8 June 2013 at 20:41

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

    ReplyDelete
  20. Jovoflavour8 June 2013 at 22:50

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

    ReplyDelete
  21. Jacqueline9 June 2013 at 01:27

    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. Zafar Ahmad10 June 2013 at 17:07

      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. Unknown13 June 2013 at 04:11

    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. berryeats17 June 2013 at 22:52

    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. Zafar Ahmad18 June 2013 at 23:14

      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. thislittlehouse20 June 2013 at 14:19

    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. Zafar Ahmad20 June 2013 at 14:27

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

      Delete
  25. Anonymous25 June 2013 at 05:55

    Thanks for sharing. Very helpful

    ReplyDelete
  26. JannyLee29 June 2013 at 19:39

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

    ReplyDelete
  27. James Welbes1 July 2013 at 21:08

    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. Zafar Ahmad2 July 2013 at 10:24

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

      Delete
  28. Manav Singhi5 July 2013 at 02:51

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

    ReplyDelete
    Replies
    1. Zafar Ahmad5 July 2013 at 10:08

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

      Delete
  29. Anonymous6 July 2013 at 00:31

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

    ReplyDelete
    Replies
    1. Zafar Ahmad6 July 2013 at 10:28

      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
  30. Unknown7 July 2013 at 00:55

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

    ReplyDelete
  31. Unknown10 July 2013 at 10:04

    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
  32. Zafar Ahmad10 July 2013 at 10:08

    @Bloomin Garden
    @ Lavanya

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

    ReplyDelete
  33. sqlneed10 July 2013 at 11:14

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

    ReplyDelete
  34. Unknown11 July 2013 at 16:08

    i tried my best can u help me

    ReplyDelete
  35. Unknown11 July 2013 at 21:54

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

    ReplyDelete
  36. Zafar Ahmad12 July 2013 at 09:45

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

    ReplyDelete
  37. Unknown14 July 2013 at 06:07

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

    ReplyDelete
  38. Anonymous14 July 2013 at 07:33

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

    ReplyDelete
  39. Unknown14 July 2013 at 19:54

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

    ReplyDelete
    Replies
    1. Zafar Ahmad15 July 2013 at 09:59

      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
  40. Zafar Ahmad15 July 2013 at 09:57

    @ 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
  41. Unknown16 July 2013 at 17:20

    This comment has been removed by a blog administrator.

    ReplyDelete
  42. B.17 July 2013 at 01:09

    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. Zafar Ahmad17 July 2013 at 09:46

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

      Delete
    2. B.18 July 2013 at 01:08

      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. Marina18 July 2013 at 07:24

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

      Delete
    4. Marina18 July 2013 at 07:36

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

      Delete
  43. kamran18 July 2013 at 18:04

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

    ReplyDelete
  44. Victor Peterson20 July 2013 at 23:58

    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. Zafar Ahmad23 July 2013 at 10:21

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

      Delete
    2. John McDevitt30 August 2013 at 12:32

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

      Delete
  45. Arunima Shekhar6 August 2013 at 17:10

    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. Zafar Ahmad11 August 2013 at 10:29

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

      Delete
  46. Unknown9 August 2013 at 22:54

    a big wow man cheer up

    ReplyDelete
  47. Unknown24 August 2013 at 11:24

    Hi dude

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

    ReplyDelete
  48. bigmoneybeatpro24 August 2013 at 19:23

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

    ReplyDelete
  49. Der_K25 August 2013 at 18:09

    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. Der_K25 August 2013 at 19:51

      **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. Zafar Ahmad1 September 2013 at 12:45

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

      Delete
  50. RAYHAN30 August 2013 at 18:22

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

    ReplyDelete
    Replies
    1. Zafar Ahmad1 September 2013 at 12:47

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

      Delete
  51. S.30 August 2013 at 19:26

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

    ReplyDelete

Subscribe to: Post Comments (Atom)