Update Notice (4 Dec. 2014) - Hi, We have started updating non-working scripts,demos and widget generators and it is almost done still if you find any broken script,demo or W.G then you can report it here. Provided link will be fixed within 24 hours.Thanks and regards.

Wednesday, 2 May 2012

Add Facebook Like Button To Blogger Posts




As we all know facebook is one of the largest social media company in the word.If your blog have any fan page then it will help you a lot in increasing traffic on your blog.We already shared all types of twitter tweet buttons and here also we are giving all types of facebook like buttons.i.e. vertical count,horizontal count and without count.You can add this button just below of of post tile and below of the post.Just follow my instructions carefully....

Note - This button will not like your fan page it will like and share your post

How To Add Facebook Like Button To Blogger Posts?



  1. Go to Blogger Dashboard > Design > Edit HTML
  2. First take a backup of your template
  3. Tick the expand widget check box
  4. Find for below code in your template


<data:post.body/>

If you wish to add like button just below of post title the add the below code just before of <data:post.body/>

and if you wish to add this like button just below of your post then add below code just below of <data:post.body/>

Facebook Like Button Styles


You can add like button in three styles :
  1. Vertical Count
  2. Horizontal Count
  3. Without Count

1. Vertical Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=box_count&amp;show_faces=false&amp;width=55&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=62&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:55px; height:62px;'/> </b:if>

2. Horizontal Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/> </b:if>

3. Without Count


<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;send=false&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=35&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:35px;'/> </b:if>

If you faced any problem, please do not hesitate to let me know. :)


178 Comments : Read Them Below Or Add One

  1. I tried all three codes but it only shows this message

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Element type "iframe" must be followed by either attribute specifications, ">" or "/>".

    ReplyDelete
    Replies
    1. Hey thank you so much for informing me I have updated my code...

      Delete
  2. Nice Post...Thanks for sharing it with us. Very much useful.
    www.gulmiresunga.com

    ReplyDelete
  3. Thank you! This was much easier than I thought it would be. Only problem now is on some older posts the Like button is appearing in an odd place, just before the last line of the post but it's okay in the most recent. Any ideas how to fix this? Thanks.

    ReplyDelete
    Replies
    1. I am having the exact same problem. Can you please help? Thanks http://www.caoepulgas.blogspot.com

      Delete
  4. how to make this FB like button to like my fan page..
    my blog is healthisdivine.blogspot.com

    pls help..thanks in advance..

    ReplyDelete
    Replies
    1. Follow this article,

      http://www.helperblogger.com/2012/05/add-facebook-like-box-just-below-of.html

      Delete
  5. Replies
    1. This comment has been removed by the author.

      Delete
    2. Actually the problem is that I already HAVE the Facebook like button, with a counter, in my template. And I cannot, under any circumstances, find the code in the template to delete it. Can you explain that please? I've tried all the reverse versions, ie: I went thru all your codes above and searched for them in my template to reverse the process, but I could find NOTHING. HELP!

      Delete
  6. Thanks a lot, i have always faced problem in my attempts to include the FB like button, adding the share button was easy but like button was difficult. But this post helped me.
    Thanks a ton.
    Abhishek Ahlawat
    (wtfdiary.com)

    ReplyDelete
  7. nice post.I will be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers! :
    Click Here For Latest Blogger Tricks And SEO Tips (http://fullbloggertricks.blogspot.com)

    ReplyDelete
  8. mine says
    We were unable to save your template
    Please correct the error below, and submit your template again.
    More than one widget was found with id: Navbar1. Widget IDs should be unique.

    ReplyDelete
  9. the like only shows up on the snippets, not on the actual page... any idea why?

    ReplyDelete
  10. I almost jumped when it worked! YEAAAAH!

    Thank you so much for this! ;)

    xx Anne G
    http://anneg08.blogspot.com/

    ReplyDelete
  11. nice post. Thanks
    http://top-20-ptc.blogspot.com

    ReplyDelete
  12. Great post! Really helpfull! Worked perfectly! Thanks!!!

    ReplyDelete
  13. Thanks for such a great post..

    I implemented the facebook like button and it's working perfectly fine.

    Thanking you,
    www.techpandey.com

    ReplyDelete
  14. Tricksfunn
    ya bro not working...

    www.tricksfunn.blogspot.in

    ReplyDelete
  15. I got the like button but when we click on like and then confirm, it not getting reflected on facebook. What can be the problem?

    http://kishore-upadhyay.blogspot.com

    ReplyDelete
  16. Nice post.. It's really easy. Working..:D

    ReplyDelete
  17. your code is iframe right?
    I heard they are now using html 5 and xfbml?

    ReplyDelete
  18. I have no data post thing. I have no idea how to add this gadget now. Help!

    ReplyDelete
    Replies
    1. Wait, turns out I have TWO data post body things. I still need help!

      Delete
  19. OMG I love you. I've spent half an hour trying to make this work and with your lovely simple tutorial it worked straight away. THANK YOU!!

    ReplyDelete
  20. Thanks for the code Rahul, its working perfectly for me.

    ReplyDelete
  21. Always love to read your post bro.I want little help from you totally different from it.How Could I add a customized comment box on my blog which will highlight author comment just like yours,thanks

    ReplyDelete
  22. This works great for postings in Blogger, but for pages not at all - please expand the code; thnx.

    READ BOOKS ONLINE for free.

    ReplyDelete
  23. Hi Rahul,

    I tried this code and initially it works, but after installing a few additional widgets it doesn't seem to work! (the Like button does not appear in my blog)

    I've double checked but the codes are complete and I've followed your steps.

    Can you please help me?

    Thank you in advance,

    Dunia Fashyon

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

    ReplyDelete
  25. I just tried this but I wanted to put it at the bottom of the post. First, I found that bit of code you mention in 3 different places, so I tried on all three and it doesn't show the like button at all.

    Then I tried it under the post title and there it shows but it pushes my first line of text towards the middle of the page.
    you can see it here http://mountainsandplaya.blogspot.com/

    Could you help me figure this out? I would love to have it at the bottom of the post.

    Thanks in advance!

    ReplyDelete
  26. thanx, I chose the 3d (without count), but count still appear, any idea ?

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

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

    ReplyDelete
  29. great this helped i my blog as well.. http://twitterazzi.blogspot.com/

    ReplyDelete
  30. Hi, I tried your code on my blog (www.jincythinks.blogspot.com) but everytime I like something, it asks me for a 'confirm' and then after 'confirming' the like; it shows Jincy likes 'Speaking my Mind' (i.e Blog Name) instead of Jincy likes 'Empty Clouds' (i.e Post Name)
    Can you please help?

    ReplyDelete
  31. hi,
    this is really working but when i click on a like button it is asking for confirmation. but i dont want it. i want just one click like button.

    ReplyDelete
    Replies
    1. i agrre
      i want it without the confirm too
      ot at least to add a pop up with the confirm, ppl might not notice they have to confirm after like-ing

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

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

    ReplyDelete
  34. hi,
    there are 3 (data:post.body/) of them, i pasted the code under each of it. does it makes any problem?

    ReplyDelete
  35. How can I center the like button? :)

    ReplyDelete
  36. It does not seem to post in people's newsfeeds. Any idea why that is? And can I fix that?

    ReplyDelete
  37. Hi! Thank you- Finally a code that works.
    Is there a way to make it show up in the mobile version?
    Mine only seems to show up on the full website.
    Thanks again

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

    ReplyDelete
  39. Hey I can't find where to add it.
    my template is http://cyber-expertz.blogspot.com/

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

    ReplyDelete
  41. Thanks for the info, I finally added the button to my page: http://larevistalatina.com ...Can't thank you enough Bro. God Bless!

    ReplyDelete
  42. Like button is added by it appears confirm WHy ?? Plzz Help me

    ReplyDelete
  43. It's not appear on firefox. Any solution?

    ReplyDelete
  44. hi, can you generate the code for me exactly like yours? beneath the post there is google+, facebook like , tweet, share. I want this to be under every blog post of mine. How?

    ReplyDelete
  45. i like your post pls also share on Guide Pedia

    ReplyDelete
  46. Your backpack it's so beautiful, I like it vey much, I also bought on at omega watches online
    , If you want one too. can visit this address, The backpacks are
    beautiful at there. I think you will be love it too.

    ReplyDelete
  47. Nice widget work on my blog
    Here is demo
    http://fullsoftbd.blogspot.com

    ReplyDelete
  48. www.dilkiduniya.blogspot.com

    Dil Ki Duniya Provides Fresh Online Sad Poetry, Love Poetry, Funny Poetry, Fashion, Beautiful Mehndi Designs, Health Related Articles And Much More

    ReplyDelete
  49. Works great I was able to make the button.

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

    ReplyDelete
  51. Why isnt' there any option to change ID or Facebook URL? How does blog is suppose to recognize my profile?

    ReplyDelete
  52. Hi There, I badly need your help! I used this code before and it worked but then after I tried few things out, it's not working anymore. I tried using this code again after deleting everything I added, but still not working. Please please help me!

    Here's my blog page http://stellarhoney.blogspot.com/

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

    ReplyDelete
  54. please visit my fans and like my site
    https://www.facebook.com/TenBestHosting

    ReplyDelete
  55. Thanks worked great!

    XoXo
    Teresa
    http://www.chicaffordable.blogspot.com

    ReplyDelete
  56. Hey brother,Thank You for This step by step guide..!
    Blogger Widgets,Plugins

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

    ReplyDelete
  58. Thx Bro, That's worked !

    http://abi-malka.blogspot.com

    ReplyDelete
  59. Thank you!
    appreciation from fewsecondsinspiration.blogspot.com

    ReplyDelete
  60. Nice post thank u to sharing this type of cool widget.

    ReplyDelete
  61. can't find , what's going wrong with my html ?!!

    ReplyDelete
  62. it s all good :)) except that after u give a like you have to hit confirm :( it would be better if it would automatically open a pop box to ask for comfirmation, or just be automatically congirmed... not everioane will notice that they have to olso confirm after giving like

    ReplyDelete
  63. makingdifferent4u.blogspot.com

    ReplyDelete
  64. i try but no like in my blog. btw i change my domain name. from blogspot to dot com.
    pls help me.. ;(

    ReplyDelete
  65. Thank you for the posting the easy way to do it. I have applied this trick, but i like vertical count button . My website is : http://www.boomwala.com

    ReplyDelete
  66. doesn't work? i have 3 on my blog. where i put it? plzz help me :(

    ReplyDelete
  67. I wonder how you got so good. This is really a fascinating blog, lots of stuff that I can get into. One thing I just want to say is that your Blog is so perfect!
    bad credit business loan

    ReplyDelete
  68. nice inponya gan
    http://alfijadul.blogspot.com

    ReplyDelete
  69. Thanks. it helped me so much. God bless. :)

    ReplyDelete
  70. Thank you very much you solved my problem :)
    www.roadchap.blogspot.com

    ReplyDelete
  71. it worked and so easy. thanks for posting it! :)

    ReplyDelete
  72. This worked perfect and was just what I needed! Thanks so much for posting this.

    ReplyDelete
  73. I have edited my html but the button doesn't show on my blog?
    Why does this happen?

    ReplyDelete
  74. thanks www.tollywoodpolitics.com
    www.bollywoodindiaboxoffice.com
    telugu

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

    ReplyDelete
  76. It will help a lot, explanation is very unique. Thanks for this post. It turns out to be a one major information to have.

    regards
    http://www.sell-breitling.co.uk/

    ReplyDelete
  77. Visit Here Guys

    http://prohelpers.blogspot.com/

    ReplyDelete
  78. Visit Here Guys

    http://prohelpers.blogspot.com/

    ReplyDelete
  79. expand widget check box doesn't exist on my blog !
    what can i do ?

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

    ReplyDelete
  81. :( Not working in my template. Could you help me :( ??
    http://anulaa89.blogspot.com

    ReplyDelete
  82. it won´t work - I´ve tried it several times!
    Could you help me? (www.nadelia.de) ... nadelia@gmx.net

    ReplyDelete
  83. Tried a lot dude .but not working tell me any solution of it.

    ReplyDelete
  84. wow thanks man, really helped me :D
    www.hack-facebook-password.org , great post keep it up! ;)

    ReplyDelete
  85. Thanks, my FB like button works great, but any idea how to make it show up on the mobile version as well? It shows the Google+ button but not the Twitter or FB ones. Do I have to revert back to the web version on mobile? But I love the mobile version...

    ReplyDelete
  86. Thnk You very Much |
    www.TricksGator.com

    ReplyDelete
  87. Generally I do not read post on blogs, however I would like to say that this write-up very compelled me to check out and do so please visit PR Agency in Delhi

    ReplyDelete
  88. Hey There. I discovered your blog the use of msn. This is a really well written article.
    I'll be sure to bookmark it and return to read extra of your helpful information. Thank you for the post. I'll definitely comeback.

    You are welcome to my blog: Technology Bangladesh

    ReplyDelete
  89. Thanks so much 4 u'a post.And Find www.wilfredtarimo.blogspot.com

    ReplyDelete
  90. I found that to make it appear on both your main blog page and each individual post page you need to insert the code under both of the last two sections.

    ReplyDelete
  91. Hi! I've been doing exactly what you say but the button is now showing up? any advice? My blog: www.findingjoyandbeauty.blogspot.fi
    Thanks in advance!

    -Petra

    ReplyDelete
  92. From a long time i was searching for this now finally i got it.

    Thanks.

    HD Wallpapers

    ReplyDelete
  93. thanks for the facebook likes tutorial, will try this on my blogger

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

    ReplyDelete
  95. It's not working for me : http://cool-fun-advert-videos.blogspot.co.uk/
    After I posted it, I got this message: - See more at: http://www.helperblogger.com/2012/05/add-facebook-like-button-to-blogger.html#sthash.MJ37E1XK.dpuf

    ReplyDelete
  96. Games are great for large groups. They include everyone, don’t require a table to site around, and allow for team play. Action Games

    ReplyDelete
  97. The vital information in this blogs has allured me. pirater un compte facebook

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

    ReplyDelete
  99. facebook applications and cheap Facebook fans putting money into your page from a simple way to buy cheap facebook fans to creating an ad campaign. http://famecrowd.com/

    ReplyDelete
  100. A great job you have already done. I’m really delighted to see your amazing work. infographics design

    ReplyDelete
  101. good job i like it www.lesprivatsurabaya-smc.com

    ReplyDelete
  102. Your blog is such like that I have run out of words!!! Really superb
    comment pirater un compte facebook

    ReplyDelete
  103. i like your blog can i guest post on your blog please give me the guest post link.......................http://technologydoze.com

    ReplyDelete
  104. The information in this blog is extremely useful for the people.
    increase facebook likes

    ReplyDelete
  105. So happy with the end result...it instatnly gave me the count of likes...right now smiling ear to ear....u made my day...thanks a bunch
    http://itsallabouteverthing.blogspot.de/

    ReplyDelete
  106. Awesome! Immense information there.

    facebook likes

    ReplyDelete
  107. Thanks a lot for publishing the new good stuff for us. I’ll really get the great advantage from your good stuff.
    open multiple urls at once

    ReplyDelete
  108. Social media is a very important aspect of good SEO. Along with selecting a good web host who can ensure that your site is up when visitors arrive, selecting the right keywords and writing quality content, receiving FB likes can help to boost your ranking.

    ReplyDelete
  109. thnk you.. awesome. thnks for sharing this..
    http://djkupang.com

    ReplyDelete
  110. Its very useful if every one should follow this.thoatxac

    ReplyDelete

  111. Thank you for this guidance.its really informative for all..gresham-dentist

    ReplyDelete
  112. Keep posting the articles,useful to every one lloydsoflansing

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

    ReplyDelete
  114. The information which you people are given are really superb..!!!motoryzacja

    ReplyDelete
  115. All the words in simple way every one should understand easily.tsligong

    ReplyDelete
  116. Nice post. Every one should implement this one mamakneads

    ReplyDelete
  117. Technically very well above you said.mikandome

    ReplyDelete
  118. Nice post. Every one should implement this one ycfnls

    ReplyDelete
  119. What a good suggestion posted by the peoples
    zhuangxioudui

    ReplyDelete
  120. Articles are very nice…Nice comments too
    synthetictruth

    ReplyDelete
  121. Thank you for this tutorial.its really informative tutorial kasynoweb

    ReplyDelete
  122. All the words in simple way every one should understand easily.golflessonsinct

    ReplyDelete
  123. Nice post all information are useful to real life.slowdownsunday

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box).PLEASE DO NOT SPAM