Add Facebook Like Button To Blogger Posts - Helper Blogger

Blogger Widgets | Templates | Tutorials

Latest

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. :)

143 comments:

  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. 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
  6. 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
  7. Nice Post dEAR :)

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

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

    Thank you so much for this! ;)

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

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

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

    ReplyDelete
  12. Thanks for such a great post..

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

    Thanking you,
    www.techpandey.com

    ReplyDelete
  13. Tricksfunn
    ya bro not working...

    www.tricksfunn.blogspot.in

    ReplyDelete
  14. 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
  15. Nice post.. It's really easy. Working..:D

    ReplyDelete
  16. Codes are working nicely.

    Thanks :)

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

    ReplyDelete
  18. Thanks! It works

    ReplyDelete
  19. Thanks !!! It really works.

    ReplyDelete
  20. 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
  21. 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
  22. Thanks for the code Rahul, its working perfectly for me.

    ReplyDelete
  23. 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
  24. This works great for postings in Blogger, but for pages not at all - please expand the code; thnx.

    READ BOOKS ONLINE for free.

    ReplyDelete
  25. 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
  26. This comment has been removed by the author.

    ReplyDelete
  27. 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
  28. thanx, I chose the 3d (without count), but count still appear, any idea ?

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

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

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

    ReplyDelete
  32. 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
  33. 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
  34. This comment has been removed by the author.

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

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

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

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

    ReplyDelete
  39. 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
  40. This comment has been removed by the author.

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

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

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

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

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

    ReplyDelete
  46. 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
  47. i like your post pls also share on Guide Pedia

    ReplyDelete
  48. 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
  49. 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
  50. Works great I was able to make the button.

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

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

    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. can't find , what's going wrong with my html ?!!

    ReplyDelete
  61. 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
  62. i try but no like in my blog. btw i change my domain name. from blogspot to dot com.
    pls help me.. ;(

    ReplyDelete
  63. 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
  64. doesn't work? i have 3 on my blog. where i put it? plzz help me :(

    ReplyDelete
  65. thank you for sharing

    ReplyDelete
  66. 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
  67. nice inponya gan
    http://alfijadul.blogspot.com

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

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

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

    ReplyDelete
  71. plz visit my site www.ftvpk.com

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

    ReplyDelete
  73. thanks to share us

    ReplyDelete
  74. This worked perfect and was jus

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

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

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

    ReplyDelete
  78. 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
  79. Visit Here Guys

    http://prohelpers.blogspot.com/

    ReplyDelete
  80. Visit Here Guys

    http://prohelpers.blogspot.com/

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

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

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

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

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

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

    ReplyDelete
  87. 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
  88. Thnk You very Much |
    www.TricksGator.com

    ReplyDelete
  89. 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
  90. Thanks so much 4 u'a post.And Find www.wilfredtarimo.blogspot.com

    ReplyDelete
  91. 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
  92. This comment has been removed by the author.

    ReplyDelete
  93. 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!

    ReplyDelete
  94. 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
  95. From a long time i was searching for this now finally i got it.

    Thanks.

    HD Wallpapers

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

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

    ReplyDelete
  98. 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
  99. 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
  100. This comment has been removed by the author.

    ReplyDelete
  101. 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
  102. A great job you have already done. I’m really delighted to see your amazing work. infographics design

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

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

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

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

    ReplyDelete
  107. http://mktgide.blogspot.com/

    ReplyDelete
  108. giá nhân sâm hàn quốc là một trong những loại thảo dược tự nhiên, có mặt ở rất nhiều quốc gia trên thế giới như Nhật Bản, Hàn Quốc, Hoa Kì... Trong các loại nhân sâm kể trên thì giá sâm hàn quốc luôn được hàng triệu người trên khắp thế giới săn lùng và tìm kiếm bởi những giá trị tuyệt vời. Từ xưa đến nay những công dụng của loại nhân sâm này vẫn được mọi người lưu truyền và ứng dụng vào trong đời sống đặc biệt là chăm sóc sức khỏe của con người. Củ giá hồng sâm hàn quốc chính là nhân sâm Hàn Quốc ở dạng tươi chưa qua sơ chế thành các sản phẩm. Củ nhân sâm Hàn Quốc có những vai trò và tác dụng vô cùng to lớn đối với con người.

    ReplyDelete
  109. nước hồng sâm trẻ em là sản phẩm đảm bảo nguồn dinh dưỡng cho trẻ nhỏ. Tại các nước phát triển, nước ép hồng sâm baby được sử dụng phổ biến và được các trẻ em ưa thích nhờ thành phần cũng như mùi vị đặc trưng nước hồng sâm baby. Cơ thể trẻ nhỏ thường xuyên gặp phải những vấn đề về sức khỏe do sức đề kháng cũng như hệ miễn dịch còn non nớt nước sâm trẻ em, các cơ quan chưa phát triển toàn diện và cứng cáp như người trưởng thành. Hồng sâm baby sẽ là trợ thủ đắc lực giúp trẻ phát triển toàn diện nước sâm baby, nâng cao sức khỏe cơ thể, từ đó trẻ có chất lượng cuộc sống tốt hơn, luôn vui tươi, hòa đồng cùng bạn bè, người thân.

    ReplyDelete
  110. Finally, i get the right information for setting up on my blog..Thanks for sharing..

    Buy Real Like
    buy twitter followers
    buy soundcloud followers

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account). PLEASE DO NOT SPAM