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


156 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. Thanks for sharing this tips.

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

    Thank you so much for this! ;)

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

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

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

    ReplyDelete
  14. Thanks for such a great post..

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

    Thanking you,
    www.techpandey.com

    ReplyDelete
  15. Tricksfunn
    ya bro not working...

    www.tricksfunn.blogspot.in

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

    ReplyDelete
  18. Codes are working nicely.

    Thanks :)

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

    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. Nice widget work on my blog
    Here is demo
    http://fullsoftbd.blogspot.com

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

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

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

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

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

    ReplyDelete
  57. Thanks worked great!

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

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

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

    ReplyDelete
  60. Thx Bro, That's worked !

    http://abi-malka.blogspot.com

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

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

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

    ReplyDelete
  64. 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
  65. makingdifferent4u.blogspot.com

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

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

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

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

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

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

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

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

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

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

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

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

    http://prohelpers.blogspot.com/

    ReplyDelete
  81. Visit Here Guys

    http://prohelpers.blogspot.com/

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

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

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

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

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

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

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

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

    ReplyDelete
  93. 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
  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. Great expectations

    Life is full of surprises, particularly if you are a newly - wed . Expressjodi you a glimpse into the future and tells how to be prepared to face married life

    Love is all about romance whereas marriage is a lot about responsibility. When two different individuals from different backgrounds live together, differences of opinion on things like spending habits, career, having and raising a baby, sharing household responsibilities etc, are bound to crop up, the key is to broaden your outlook and accept all the changes that marriage brings, and to remember that marriage is a momentous change for you and your spouse. And, fear not, over a period of time, you will find a way to make it work.

    Responsibility

    With marriage comes a whole lot of responsibility. "From the time you ger married, the decisions you make will not be yours alone, but your partner's as well. This is because your choices will impact both of you. But this doesn't mean that you're tied to a ball and chain. "It only means you have a companion with you for life. In fact, in your capacity as a spouse, you become your partner's caretaker, friend, confidante and even punching bag etc.

    Finances

    Arguments over money are bound to happen, so be prepared for it. And unless you establish some ground rules for dealing with financial issues, you will continue to have these arguments. Bear in mind that you are now a part of a unit, and no longer flying solo.

    In - laws or outlaws?

    if you thought that marriage is all about sharing your life with your significant other, think again, and this time, factor in your in - laws into the equation. When you're used to a particular lifestyle, moving in with your in - laws can be a rude shock. You will be required to make changes in your daily routine. Like waking up a little earlier to help around the house or rescheduling your plans on weekends or even modifying some of your eating habits. these might seem like an additional burden, particularly if you are a working woman. Remember to keep an open mind when it comes to handling your in - laws. They may be rigid in their ways, but there is always a way to work out a compromise.

    Sharing space

    Marriage involves sharing everything - whether it is sadness or glad tidings, chores or finance, which can be a difficult task. This is why marriage necessitates an equal contribution from both side. " Sharing is absolutely essential for a happy marriage,. Besides making it easier to run the show, it also brings you closer to your partner, and cement a bond in a way that only experience can.
    Differnces of opinion

    Shaadi brings two different individuals together, as well as two sets of arguments for everything. Remember that your husband is as new to the marriage and the relationship as you, and he is facing the same issue for the first time as well.Irrespective of the nature of the relationship, any two people are bound to have differences of opinion at some point of time, It is how you handle these differences that mtters. The best antidote for deviant interest lies in adapting to the situation. "Be carteful not to retaliate for the sake of it,"

    Planning for the future

    As a single independent working woman, you may be used to your lifestyle, going on holidays or splurging on the latest pair of Jimmy Choos. But married life is a journey and you need to plan carefully to get to your destination. "Planning is the key. Make sure you and your husband are on the same page as far as long - term goal are concerned," "Whether or not you plan to have a baby or deciding on investments for the future and are thing that you should discuss in advbance, if you want to avoid unpleasant surprises in you married life,"

    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. The vital information in this blogs has allured me. pirater un compte facebook

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

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

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

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

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

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

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

    ReplyDelete
  109. 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
  110. Awesome! Immense information there.

    facebook likes

    ReplyDelete
  111. 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
  112. 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
  113. thnk you.. awesome. thnks for sharing this..
    http://djkupang.com

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM