Tutorials, Tips, and Resources

for Creating a Better Blog



7-Day Blog Bootcamp Challenge


Shape up your blog in a week! (learn more)



How To Add A Facebook Like Button to Blogger Posts

Ah, yes, social media. It’s always important to provide your readers with easy access to share and like your content. In this post I will teach you how to easily add one of Facebook’s ever-so-popular “Like” buttons to each post on your Blogger blog. It’s really easy, follow along below:

1. Go to your Blogger dashboard
2. Click on Template in the sidebar, then Edit HTML
3. Click inside of the text area and press CTRL + F (or CMD + F on a Mac) to open up the “Find” text box.
4. Inside the “find” box in the top right corner of the text area, enter this code and press enter TWICE. You want to work with the second instance of it:

<data:post.body/>

This code acts like the placeholder for all of your post content.

If you want to add your Like button to the top of your posts, add one of the following Facebook codes ABOVE this code. If you want the Like button on the bottom of your posts, add it UNDER this code.

facebook-like

Copy this Facebook button code below for a Horizontal count style:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=button_count&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:100px; height:21px;'/>

Or, copy this code for a Vertical count style:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &quot;&amp;layout=box_count&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:55px; height:62px;'/>

If you prefer it without the count, use this Standard code:

<br/><br/><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.canonicalUrl + &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:35px;'/>

Give it a try! As always, feedback is welcome below! You can also submit a topic suggestion through the Contact page at the top of the site!


  • Melissa

    First, this is great! Thank you. Second. When I go directly to my blog, and scroll the through the posts, the LIKE button doesn’t appear, it’s only when I click on a specific post from the archive/post list. Thoughts?

  • Amy

    Through searching my html code via CTRL and F that code does not come up πŸ™

    • Dana Fox

      Do you have a custom theme? Try searching for other variations of it, like “post.body” and see if you can find it.

      • Amy

        I found it thank you πŸ™‚ I have added it into my blog posts. It looks a bit lonely there on its own now though haha x

  • Christina

    What about wordpress? πŸ™‚

    • Dana Fox

      You can easily add one to your WordPress posts without doing any coding at all. Just search for a Facebook Like button plugin and click the install button πŸ™‚

  • Carling

    Thanks for your help, I tried a few other sites, but yours was the only one that finally worked!!
    Stiksmama.com

  • Sophie G

    Can i see the likes on my facebook page or the person who liked it somewhere?

  • Marikka

    I can’t locate the , or even parts of it like post.body. I looked from other sites and they have the similar directions and I just can’t get the like button

  • Thanks for this dear Dana. I recently changed my template and thus required to add my widget and gadgets all over again :S. cheers keep up teh good work.

  • Thank you! This is so clearly written and easy to follow. You even thought to tell me how to search within HTML editor. I’m so clueless I didn’t know that. You have a real gift of teaching. Keep it up! πŸ™‚

  • Hello again! I’ve been tweaking my template in Blogger, and somehow my Facebook like button has disappeared. When I search for the code , it isn’t there! I have no clue what happened, but now I don’t know how to reinsert my button. Could you advise, please? TIA!

  • David Nelson

    Thanks so much for your wonderful gift of knowledge. It solved my problem, beautifully. I love what the good people do to our Internet.

    I did encounter one puzzle. While most of my posts show the Facebook signal, one (the one I most wanted to see) did not display it. I tried tinkering with the code you provided and the HTML for that particular page, but either the post disappeared or it ignored me.

    I would sure appreciate your help, if it’s convenient. But, at any rate, you have done me a great turn — I’ll pay it forward and look for a chance to pay it back, too.

    A greatly relieved and grateful David

  • thanks for this, still have no likes but now i know people can like it if they ever read it ahah

  • Hi! This is exactly what I was looking for – but, now I want to CENTRE it. Which bit of code can I alter to do that? Thanks. x

    • Uisa

      Same concern. I also want it centered. Is it possible to do that?

      • Uisa: Just simply wrap the whole thing in codes. for example:
        … the facebook code here …

        • Uisa

          thank you! i will try it. πŸ™‚

    • Just simply wrap the whole thing in codes. for example:
      … the facebook code here …

  • Felicia Hcg

    Thank you, adding the button was easy. However, I see people clicking the button, and the count goes up on my blog, Was I supposed to do something to link the two?

  • its work..thanks

  • Every time I try to add any code for adding a social media link it just doesn’t appear below or anywhere near my post. I have tried all the CSS codes, and tweaking my template. :'( If you could help me with this. πŸ™‚ I really like the sliding social media plugins you have here, is there a tutorial for the same?

    http://www.allsheneeds.in

    • Sometimes when you’re adding code you need to be sure to add it under the second instance of the code you’re supposed to paste it under. The first instance is usually for your mobile view. You can check out this post for the social ones I use: http://icanbuildablog.com/2014/06/increase-blog-engagement-with-addthis/

      • Thank you so much @dana_fox:disqus !! The add this tool bar worked !! πŸ™‚ πŸ™‚

    • I have the same problem and no idea how to fix it πŸ™
      Neither add this nor this button work for me T_T

      • Make sure you’re putting the code in the proper place. Sometimes different templates have multiple instances of the data:post.body bit and you need to be sure you’re placing it under the proper one. The first instance is usually the mobile view. I would try it under each one you find, separately, and check to see if it shows up.

        • You were right, thanks a lot!
          I tried again, with the other instance of data:post.body and it worked ^^
          Thanks again, have a nice day!

  • kalikotpepot

    thanks! read carefully and followed the instructions, now it’s live! more power!
    http://www.kalikotepot.blogspot.com

  • Thanks! It works really good!

  • Ann

    Dana how do you change those social share buttons with your own designs? Is it possible to share the code with us? πŸ™‚

  • I just couldn’t add the Like button no matter how many times I’ve tried. I’ve even checked if I’ve put it under the right instance. Then I tried copying the html code for the like button on my previous blog to my recent one because it works on my old blog. But, nothing works.

    • It will not appear in the Preview when you preview your HTML edits. You’ll need to save your template and then view it on your live blog.

      • RadFemFTW

        This is what happened to me, it wasn’t showing up in preview, but it worked when I saved!

    • dorter

      Actually one can add any like button to blogger using https://likebtn.com/en/blogger-like-button. It is not necessarily should be a FB like button.

  • Favian Gonzalez

    Thanks pal, that was awsome!

  • JoΓ£o Messias

    Hey! So I tried to use this, it worked quite well, thanks! However, the likes I’ve been getting are directed to the blog itself and not to each post individually. Do you know how to do that?

    • You would need a different code for that, it’s not the same as this like button. A bit confusing, I know. I’ll have to do another post on implementing a post “like” button.

  • Miri Davidovitz

    HI , I KEEP GEETING THIS MESSAGE –
    More than one widget was found with id: HTML4. Widget IDs should be unique.
    What should I do ?
    Thanks

  • Cj Thompson

    hi, i’m just wondering how to have the “like” button showing up when you look at my blog from mobile now. This has worked so far for computers.

  • Cj Thompson

    hi, don’t know if my last comment came through but i used this and it has worked fine for my blogger account. I just want to know how to make the like button come up when viewing my blog from a phone?

  • Works a treat thankyou! But do you know how to stop this from appearing on static pages?

  • Priya Gadiya

    I can’t find it either!

  • Good One Worked Perfectly For Me πŸ™‚

  • franjurga

    Can you tell me how can I remove the current Facebook “like” counter I have? It shows only 2 photos and I’d rather have the one that does not. Also, what does the count represent and how does it know the address of my Facebook page? It is not the number of likes on the page, and it pulls up a share screen with an old post from my blog. It’s great to go through these things once in a while because you see them on your blog every day and don’t think about them. Thanks!

  • Thank you so much Dana!!

  • Great post, well explained. Thank you. Have implemented with ease.

  • Guest

    I added this, and it put the “share” buttons at the bottom, but not a “like” button.

  • Micheal Anderson

    Hi Dana, the script works only for pages not posts! how is it possible to make it also work on newly published posts?

    Thanks

    • It should work on all of your posts as well, unless you have not implemented it in the proper place or have a custom template that may have altered something

  • Paul

    Works great, thanks a lot. Cheers!

  • Thank you

  • Heidi

    Hi,
    I tried this but when I went to press enter to find the code it told me it could not be found in the html of the template? I dont know if this is a common issue or not.

    – Heidi

    • Heidi

      I found the issue and solved it!

  • jtheberge

    I was successful adding the “like” button but all of my posted photographs disappeared. How come?

  • Baraka Blessing

    after copying that facebook like codes where shoul i paste……help plz

    • It’s explained in the first part of the post πŸ˜‰

  • Daryl Hightower

    this is good for liking a post. where do i imbed to like the PAGE

  • I’ve been wanting this feature for AGES and other websites methods didn’t work whatsoever, you are literally a life saver x

    Gemma Louise | Just Little Things

  • Imran

    Hi Dana, The like buttons are located on each posts. if i publish a new post on my blog, will the people who already like one of my post previously be automatically notified? I also want them to receive the most recent updates of my post on their facebook. Thanks.

  • JennyA+

    It worked, but now my two posts are gone. Help!

  • Eva

    Hi, I can’t find the in my HTML. Is there another way I can add the facebook like button or how can I solve this problem?

    Thank you!

    • Izzy

      I have this same problem, did you figure it out at all?

  • Hi,

    Can you tell me what I did wrong?? I added the code for the FB like button but now my blog only shows my post title and not the body of my post. I don’t want to get in there messing with code that I really know nothing at all about. What can I do to make my whole post show and keep the like buttons? Also how does it know my FB page I never enter any of that info??

    Go my blog and check out my issue please

    Thanks Dana @queenofmycastle3.blogspot.com

  • How do I find the second instance in my code? I feel I just have this in the wrong place this is why my post body is not showing up?
    Dana

  • Sammy

    Thank you so much! You are my blogging life saver! Muaksssssssss!

  • Minhajur Rahman Sakkhor

    It’s appear in pages too. I need only in post.

  • this is working!!! thanks a lot!!

  • Manu Sree

    Really helpful in creating traffic, for example i just created a huge traffic for my FB page. But ofcourse it took time.
    https://www.facebook.com/ajujacobofficial

  • jasmin precious

    Thank you so much! It really worked ^_^

  • Israr Qureshi

    Really Helpful. what do say about my site?
    http://itrovers.blogspot.com/

  • Haqif Azmi

    i also want to add share button.. can you help me?

  • thanks so much – it worked beautifully and I’ve pinned it for future reference!

  • thanks

  • Sara

    I have 2 blogs. In one of them, when I implemented a few months back, this worked like charm. Today when I tried adding the same code to the second blog, the button appears; but when I ‘like’it, the count does not immediately appear, and the like button changes to ”Γ§onfirm”, asking permission to post on the wall of the FB account- and only when permission is given, the like count actually takes the no. of the count.

    Why is this happening? Is this a new change in FB?

    • Marianna Mariel Waterah

      I have the same problem. How can i fix this?

    • Muhd adeni

      same thing happen to me. Do you find a way to fix this?

  • Marina Est

    I have a question. I have my own facebook button, and i want that the count box apear next to it. (not the original facebook image). How i can do that? Tkx*

  • Rahul Patil

    I am trying this from last two day and I was unable to add the Facebook like button. But within 30 sec I was able to get it, after reading this. Thanks

  • Sumaia Parven

    The World Wide Web offers you an excessive amount of cool HTML codes that are sure to be a real attraction. Which is why this seriously is the best resource to tap into when searching for cool HTML codes. For more information: javascript

  • Jessica Cassidy

    This tutorial works. Thank you so very much.

  • Izzy

    I’ve searched for the code, but it doesn’t seem to exist in my blog? Any ideas on how to resolve this? Thank you in advance!

    • i think it is not possible that your blogger does not have that code, try searching again. πŸ™‚

  • Barry DeCarli

    Thank you. That worked perfectly! Especially, since I no almost nothing about HTML.

  • Subran

    Social media is the strongest platform now a days to reach
    people around the globe. Based on this tremendous platform, there are many
    people who want to get in touch with the mass. Social media marketing is the
    best way in this regard. Man and women from various sectors want to increase
    their potentialities. That’s why they want to buy
    facebook likes or facebook event join.
    But the fact is, these likes should be authentic and natural. So people look
    for trusted vendors like smmsell.com to
    increase likes, followers, subscribers in their facebook, twitter, youtube,
    Instagram, soundcloud, pinterest etc. platforms they use.

  • Durga WarriEr

    Thanks a lot! In the initial try it didn’t show up somehow. But when I tried again it worked like magic! And I tried running all three codes individually. Choose the standard one as it was going well with the content. Thank you so much!! Keep posting such useful tips!

  • ericmutua44

    This is a nice article.I guess you should read my article on how to add facebook pop up widget to your blog..http://techoverload.net/facebook-popup-like-box-widget-blogger/ Thank you

  • The code is simply not showing up in my HTML code πŸ™
    Is there a solution for that?

Navigate