Home » Blogger Tutorials, Tricks and Hacks » Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.

Add FaceBook Like Button For Blogger ( BlogSpot ) And Customize It.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

249,495 views

few days ago, face book surprised us by launching a lot of social plugins, one of them, actually the most popular one yet is the famous like button,
In this tutorial you’ll learn how to add it to your blogger blog.
and you’ll learn how to customize

  • change the verb, like or recommend.
  • change it’s color.
  • change it’s font.
Step 1. adding it to your template.

The button code,

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

where to add it ?

Log into your blogger account, then go to Layout >> Edit Html.
Before doing any thing you must check Expand Widget Templates box.
And find the next Code

<div class='post-header-line-1'/>

And after it, paste your button code

What, If you didn’t find the code above in your template, The try to find the following,

<data:post.body/>

And paste the button code Before it.

click Save Template and you are done.

Step 2. Customize your button & Demo.

in the above code you can customize 3 parts. and i’ve colored them to make it easy for you to recognize,

in the above code change the following parts,

  • like this part controls the verb that appear on your button, keep it as you see or change it to recommend if you want.
  • arial this part controls the font type, keep it or change it to one of the following,

    lucida+grande
    segoe+ui
    tahoma
    trebuchet+ms
    verdana

  • light this part controls your button color theme, and you have three options, light, evil, or dark
  • Update, How to make it appear on your home page.

in the button code there are two parts you’ll need to remove to make this button appear on your home page, the first line and the last line, if you still don’t under stand, please see the following parts and delete it before pasting the code to your template,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
</b:if>

I wish you all like it and please leave your comments if you need any help, to see demo for it please click here.

Liked It ? Please Share

Comments

158 Responses | Post A Comment | Subscribe To Comments RSS Feed

    • Yep, really nice. I just put the code after the “” so Facebook “like” button will appear at the end of the post. People usually decide do they like the post after they read it…:)

      • Zeljko says:

        Is there any way that like button apear in the bottom of the post?

      • Max says:

        Hi Zeljko, sure, you put it’s code below, a code that similar to

        postfooter
        post-footer

        and just paste your code after the end of the line,

  1. Thanks for the customization of this like button! Its easy nw, its one click easy, i have an increasd no. of fans since Like started as compared to previous fan button! hoope this hels more!

  2. Racheal says:

    I pasted the the code given according to the instructions, But the ‘like’ button didn’t appear.

    • Max says:

      hi Racheal
      this is because you preview your blog home page or index page, your like button will appear in the post page,( inside it )
      i hope it’ll work for you,

  3. Racheal says:

    I found out that the ‘like’ button could only be seen in one post, but not the home page of my blog. I thought it appear in every post in the main page. Can you help to fix this? Thank you so much, a reply would be really appreciated

    • Max says:

      hi Racheal again, i’ll update the tutorial to teach you how to make it appear in your home page too.

  4. fleur vinca says:

    hye there..

    thank you so much for making this so easy.. i hv tried it and it works!

    great! thank you..

    hope u could make tutorials about the other fb’s social plug in also.. :)

    • fleur vinca says:

      in addition, i just realize that this like button could only be seen by people who’s in the friend list. if my visitor is not in the friendlist with the other that liked my post. they cannot see who liked it. tq. or is this only happen to me?

    • Max says:

      hi fleur vinca, thanks for commenting, i’m working on it right now.

  5. Thalhah says:

    not working

  6. Thanks so much for this great tutorial. I had tried some tutorials on this subject from other sites last week, and none of them worked correctly. This one worked like a charm, and I love how you gave instructions on putting the like button below the post title instead of just below the post. Awesome!

    • fleur vinca says:

      hi betsy and max,

      i dont know whether this only happen to me, but i realize that the like button can onli be liked by two person. if third person liked the post, then they only show 2person only and eliminating the other person. can u confirm that to me?

    • Max says:

      thanks Betsy, your words are great and this encourage me for adding more and more tuts.

  7. Thalhah says:

    owh.. i have to change template first.. my previous template not working

  8. zsolt says:

    how can i ad this to blogger pages?

  9. Thalhah says:

    waiting for facebook comments plugin. i know facebook also release comment plugin but i dont know how to implement. so please…

  10. fantastic!
    thank you for this!
    works perfectly on my photography blog, for sure! :)

  11. sonico says:

    Great now works!

  12. Jen says:

    Thanks!! You’re awesome!

  13. Karen says:

    Thanks!!!!!
    amazing!!!
    HUGE hugs for sharing this!!!

  14. Derek says:

    It doesn’t look like the “Like” button on facebook.
    It only show a checkbox.

  15. Beben says:

    I think size for width of the frame can make long distance…450 <–

  16. It works! Thanks for the explanation. One question: the Like button pops up at the top of my posts. How do I get the button to show up at the bottom of the posts?

    • Max says:

      hi samuel, to add it in this location, you have to paste your button code after the following part,

      <data:post.body/>
  17. underfooter says:

    thanks, this is a good post…

  18. thilinamb says:

    very informative and worked like a charm..

    thanks for sharing..

  19. Russell B. says:

    I followed your directions to a tee and it worked perfectly; better than what’s on the FB Developers social plug-ins page, thanks a lot!!

  20. Kathryn says:

    Thank you for your very well worded instructions. I followed them and it worked perfectly. I was wondering, however, if you can suggest placement for the code if I want the “like” button to be for the entire blog and not just for each post?

  21. captain88 says:

    nice mann.. it work…

  22. abuanu says:

    fantastic!
    thank you for this!

  23. l3utterfish says:

    IS there any way to add this to an OLD blogger template?

    Saludos
    l3utterfish

  24. After someone Likes it, the names disappear. It seems like they become white and won’t show up against my blog. (I moved it to the footer of my post, rather than the header; didn’t want to be presumptuous putting it before someone has a chance to read it!)

  25. Thanks for sharing the info. You made it so easy!

  26. Max says:

    Hi all readers and visitors,
    thanks all for your great comments and i promise you all to post more and more great tutorials.

  27. sap says:

    so nice and a lot with info tq max…

  28. Carlo says:

    Because of great Blogger resource blogs like yours, we’re all fortunate to stay informed about the latest hacks we can perform for better usability for our readers. Thank you!

    • Max says:

      thanks carlo for your great words, its really inspiring me to add more and more tutorials and templates to the site.

  29. Rita says:

    I got it to work…but rather then linking to the post…it’s linking to the blog and pulling in my profile picture the wording beneath it and sometimes additional images…any ideas – I included the URL if you want to see?

  30. Dennis says:

    Hi there,

    All working great. Disabled it from homepage and separate pages with the code provided. However: I have a blog with one post per day. Is there a way to show it on the homepage (and not on the blogger pages) in a way that when you press “like”, you post a direct link to the latest post to facebook? I mean, if I enable it for the homepage, people that like my post of that specific day will always post my general url to facebook, not the link to the post.

    Hope you understand what I mean ;-) . Thanks for your thoughts.

    • Max says:

      hi Dennis, yes you can, in your blogger account, go to dashboard >> layout >> edit html >> and click addnew gadget, and paste the button code there. but in the above code change " + data:post.url + "
      with your blog url, and click save then change it’s place to your favorite place.

  31. Jehona says:

    Hi!
    I get an error message when I click like…Please can you help me to fix this problem as soon it is posssible!

    Thank you very much!

  32. Santosh Pingale says:

    Hi Max,
    I want to know can I insert a Fixed bar in the blogger page like as in Facebook.
    If yes how…

  33. Reuben Poon says:

    This is awesome. Thanks!!!!

  34. survivalist says:

    Thanks for make it so clear.

  35. sarah blo says:

    i can’t find the two codes

    <data:post.body/
    is there any chioce that i could fine in my template??..

  36. Hi i succesfully pasted the coding and it appeared…. but when i click the button like, it appears Kanishen Balakrishnan likes this link and then this appears Be the first of your friends to like this. · Admin Page · Error

    • Andrew says:

      I’m also having this problem. Sometimes the ‘like’ button works, sometimes I get this message.

      Also, sometimes when it has worked correctly, it doesn’t show up on my friends’ feeds.

  37. hadadjus says:

    Max :) please help me , when i add this booton it work right but when i click i like a poste , in facebook i show the title of my blog not the title of the post liked !!! please help me

  38. Ashley says:

    This worked great & was easy to do! Thanks so much!

  39. Sabrina says:

    I tried everywhere to find a way to make this tool work on my blogger. This is the first one of many that gave a great tutorial. Thanks for all of your help! :)

  40. Andrew says:

    Fantastic work, absolutey amazing. I have a small problem. At first all worked well, but now when I click ‘like’ on a post sometimes (more often than it doesn’t) I get an ‘error’ message. Can you help? Thank you!

    • Max says:

      hi Andrew, this problem happened some time, and it comes from facebook. it’s not about how you added the button or how i told you to add it, i wish facebook developers will fix this soon.

      • Andrew says:

        Thank you Max, very kind of you to take the time get back to me. I should have guessed it was a problem with Facebook.

        Since I left the message here the problem seems to have been resolved, but when people ‘like’ posts on my blog they are not appearing on their Facebook news feeds- is this also Facebook’s problem?

        Thanks again Max, this is a brilliant idea and SO helpful.

  41. Prince Lity says:

    Thanks so much ^^

  42. Yellow says:

    Hi, this is working perfectly except when I put the code in, I get blank space between the Facebook button and the “Posted by” line. I’m not using any line breaks in the template. Any idea how I could solve this? Thanks.

  43. Carlo says:

    Great tutorial. Up and running in like 30 seconds. Excellent!
    -Carlo.

  44. arnamee says:

    mAX, why this code dosn’t work in my blog, when i preview,its okke, but then its nothing .huhu

  45. I see how it’s added (I actually moved mine to after the time-stamp instead) and now I see “2 people have “recommended” (the word I chose).”

    So that’s cool, but are statistics gathered anywhere? How do I find out who liked/recommended the article?

  46. effysaiful says:

    hmmm can’t find the code to begin with, to put the like button code after it =(

    or

    what do i do? is it because i don’t use the default template from blogger?

  47. irishfleur says:

    thank you for your tips! it’s really a big help to us

  48. julie says:

    thanks so much!! just a question, how do you get it to appear on your homepage of blogger?

  49. rawhide says:

    Your Comment He

    More than one widget was found with id: HTML4. Widget IDs should be unique.re …. *

    this is what happens always with my minima template..always. i cant even add a comment box beacause of this same error.. can anyone help me please??

  50. okay at first it seem to difficult to follow but when you really pay attention.. everything will be as easy as pie.. thank a lot!

  51. your post is very usefull… thanks… :)

  52. Dom says:

    Thanks a lot!! This is really useful!!

  53. Jill says:

    Is there a way to show more than 12 faces/pics??

  54. Janvier says:

    Hey Max, been trying to get the code right for a while. Now its telling me I have 9 likes and I just put the code up. Tried Facebook’s Developer instructions and the same thing pretty much. When I preview the post, it shows and says 9 likes on a post with no content. Strange, maybe you can help.

  55. Gurhan says:

    Hi..
    I’ve done what you said.My page’s appearance changed.How can make this button and my theme work together?

  56. calai says:

    not working in my blog…. can you help me??? maybe i need to change template?? but when i try using template designer AWESOME, INC. it works but the expandable posts is not working… can you help me… thanks

  57. jaganmangat says:

    thanx alot for this i did step by step how u said and got positive results….

  58. James says:

    I did as you mentioned above in both cases but still nothing to appear…take a look

    http://justimaginnow.blogspot.com/

    can you solve my problem…

  59. Mia says:

    Hi,thanks for sharing this! It all worked out well for me but I have the same question as Andrew, about when people ‘like’ posts on my blog they are not appearing on the Facebook news feeds. Is there something to do about it?

  60. Saikrishna says:

    Hi Max,Can You Please Explain How To Add The Facebook Like Button On The Right Side Or Left Side Of The Post.Just Like You Mentioned In Your Post About “How To Add Retweet Button”
    Please I Need Your Feedback
    Thanks For Your Help.

  61. sows says:

    hi. i try following ur instruction but it seems i cant. no “like” button appears. can u help me out w/ this? thanks and more power..

  62. Trip To Love says:

    Thanks a lot!! This is really useful

  63. wawa says:

    great. it’s easy and working. :)

  64. Doris Lee says:

    Thank you for the tutorial and I’ve got the button on my blog. However I need to know who are the “others” in the list. Can you please help me with that since it is not clickable. Thank you very much!

  65. moldovan says:

    Dear Max,
    I made a Like vs. Not-Like Button for Facebook – no download or other requiremets.
    Could you check it and if you like share it with your readers?

    http://apps.facebook.com/Not-Like

  66. Mallory says:

    G’day, I just wanted to say thanks heaps for your hard work :)

  67. Ann Ashvinee says:

    I did both of the ways so many time…but it still cannot works..can some body help me???

  68. sense says:

    CPM AND CPC AD NETWORK

    WEBSITE OWNERS EARN MONEY

    http://WWW.ADSWORLD.TK

    * Go from signup to embed code in seconds.
    * Generate revenue from website or app ads, and get paid for every clickand more supported.
    * Text and image ads in standard sizes.
    * Live statistics on clicks, impressions, CTR and more.
    * Join over 17,500 satisfied websites.

    INSTANT PAYMENT WOULD BE MADE BY PAYPAL

  69. WilijA says:

    Super! Thnx. It works perfectly. With your help I feel almost like a genius now :D

  70. Pet says:

    Thanks for the great like tip:-) I added in my blog already and would like to share to other on your good job…Keep it up!!!

  71. refgyt6 says:

    does this work for blogger classic template?

  72. how to use like button for separate posts in blogger ?

  73. THx for lesson!!! love it some much!!

  74. Sarah says:

    Hi. Thanks for the lesson! I’m just wondering if it’s possible to see who has clicked the like button? All I see is a counter like “one other person…”

  75. Nina Gorecki says:

    It works! thank you :)

  76. munaji says:

    it’s something new for me, i will try it

  77. Intan says:

    Thanks for your tutorial, but it didn’t work to my blog. Can you please check it out for me? Cos I couldn’t find “template”, there’s only “design” and the HTML codes are very different. Thank you so much I really appreciate it :)

  78. Nancy says:

    Hey is there a way you can SEE who “liked” your posts on blogger? I can’t figure it out!!!! Thanks!

  79. Vaibhav says:

    Thank you dude nice info thanks.

  80. Ben London says:

    Thanks…very well explained and helpful tutorial.

    Ben

  81. vikas ruhil says:

    hey i complete both the above step sucessfully but facebook share button is not working but same the retwwet button is working help me please

  82. ibzsupernova says:

    i would like a “like” button for the full page not for each post….do you have the code? :)

  83. logos says:

    thanks this working

  84. Mould Maker says:

    i would like a “like” button for the full page not for each post….
    do you have the code? :) the same .

    • Max says:

      Hi mould, the best way to do it is to add it to your home page by using the java / html gadget.

  85. hatim says:

    Thanks for sharing this.
    I was looking for this for a long time.
    And am really learning a lot from your site.
    thanks

  86. Angelocracy says:

    Can you remove the blog title from the post title

  87. Tsilos says:

    Thanks so much for these tutorials, I’m blogging in style now! :)

  88. Pratik KAdam says:

    Just change the van to fan in ur description..
    IT says u r a van of blogging.. change it to fan :P

  89. Pratik KAdam says:

    And thx for the FAcebook Like button help.. really helped :D

  90. Bally says:

    Hi guys.
    Does anyone know why if anyone click on LIKE, the post doesn’t appear directly on facebook, but there is to click again on CONFIRM? =S
    Thk!

  91. kana says:

    I followed the directions and I am not finding the like button on any of my posts can you please have a look and see if you can help me. I would like to figure this out I have spent way to many hours trying to get this to work.

    • alex says:

      Let me make a useful clarification: The “LIKE” button will NOT appear in your main page (where you see your recent blog posts). You have to click on a post’s title which takes you to a new page, in which you see the whole post alone. In THAT page you should be able to see the “Like” button.

  92. Sara says:

    This worked for me and I am very much NOT computer-savy. Thanks for the easy tutorial!

  93. Zsuzsanna says:

    Hi….
    I tried everything, but I can’t find or the other one.
    I have only this: div class=’clear’
    What should I do??? :(

  94. SMS says:

    Thanks alot…

  95. Thank you so much for this! <3

  96. johnnie says:

    I used addthis.com they do it all for you if you like any of the options they provide

  97. dodoman says:

    thank you i will try it

  98. alex says:

    Hey there thank you for the instructions. It was very helpful. I wanna ask you if there is a way to show it also under each and every post on your homepage , just as the other social bookmarkings appear.

    • Max says:

      hi alex, please read the tutorial and comments carefully and you’ll find your question already answered.

  99. Thanks a lot for your post, it really helps.

    God Bless you

  100. ida says:

    I keep copying the code in my templet but there is no change and i dont see the “like” button,
    can anybody help me with that?

  101. Candy says:

    your teaching language is very clear n simple.
    just tested in my test bolg.
    used it at two places, just after post title & at the end of post.
    working nice. very very very thanks for this great help.
    now applying in my main blog http://xpoxpo.blogspot.com
    you are requested to visit my blog and suggest the modifications.

    regards
    Candy

  102. Thank u fore the simple instructions, I followed it n it worked right
    :D

  103. zimie says:

    i did it. after a few errors. thanks!!! good tutorial.

  104. Pradyumna says:

    Does the comments and like both work at the samr time??

  105. jeanette says:

    Thank you, thank you, THANK you! So many widgets and html code changes either don’t work for me or do squirrelly things, but this one worked perfectly right away!

    I agree with earlier posts that your instructions are clear, concise and easy to follow. Thanks for sharing!

  106. Didnt work for me until I went to another blog who advised me to take off and then it worked on EACH of my posting. To anyone wanting this to appear on EACH of their posting, try this. Nevertheless, thanks!

  107. Parag shukla says:

    Um, I just added the LIKE button on my blog.
    But the problem is, even if you like an individual post, It automatically likes all the posts!
    I hope you are getting me.
    Even if you like one post, it likes all the post all by itself.
    How to fix that?

    Please help ASAP!
    Thanks.

  108. rode says:

    I hav not this codes: , and haw i can??

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here