Adding Facebook Like Button To Blog Posts (For Blogspot)

Update: There’s a better social sharing plugin you can use on your blog here.

Facebook like button is probably the most important facebook integration to socialize your blog. It allows your blog content to be shared with the click of a button without leaving the page. I recently wrote a post on creating a facebook fan page and adding a like box to your blog and I suggest you check it out if you haven’t. Adding facebook like button involves just a couple of steps easy to implement. You can add a like button for your fan page or a like button for each and every blog post. There’s an old post I made on adding facebook like button to blog posts but this one explains it even further.

ADDING LIKE BUTTON TO EACH BLOG POST

This makes it a lot easier for your readers to share your blog posts with just a click. To add facebook like button to every blog posts automatically, follow the steps below:

1. Login to your blogger account and select Design

2. Click on Edit HTML

3. Check the box labelled Expand Widget Template

4. Like I always emphasize, back up your template before making changes in case something goes wrong

5. Press CTRL + F and search for <data:post.body/>

If you’re using a magazine style template or used the automatic read more hack I posted, you might find two or more <data:post.body/> in your template. You should try both to know which one works. The second works on my template though.

6. If you prefer to have the facebook like button to appear on top of your blog post right below the title, paste this code above <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'><div><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:400px; height:27px;'/></div></b:if> <br/>

7. If you prefer to see the like button below your blog posts, paste this code below <data:post.body>

<br/>
<br/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div><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:400px; height:27px;'/></div>
</b:if>
<br/>

8. You might as well put it in both positions. Save your template and view the change on your blog.

Note:
You can change the layout written in red which is set to standard by default to button_count if you want the like button to show number of likes instead.

You can as well set show_faces which is false by default to true. This enables the like button to show photos underneath but it applies to the standard button only.

The code above too only shows the like button on post pages. It won’t appear on static pages like label search results and home page. To make the like button appear on static pages involves removing two lines of codes: <b:if cond=’data:blog.pageType == &quot;item&quot;’> and </b:if>.
With those removed, the facebook like button appears on static pages and on blog post pages as well.


MAKING FACEBOOK LIKE BUTTON LINK TO YOUR FACEBOOK FAN PAGE

In case you prefer a simple facebook like button that links to your facebook fan page instead of a bogus like box, there’s a slight change than can be made to the code above. You only need to change the URL as shown below:

<b:if cond='data:blog.pageType == &quot;item&quot;'><div><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=FAN PAGE URL HERE&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:400px; height:27px;'/></div></b:if> <br/>

You should change FAN PAGE URL HERE to you own facebook fan page full address. Be sure the URL starts with http://. You can also place this code before or after <data:post.body> as explained above.

Alternatively, you can add this as a widget by going to you blog’s layout and clicking on add widget on the exact position you want the like button to appear. Select HTML/Javascript and paste the code below:

<div align="center"><iframe src="//www.facebook.com/plugins/like.php?href=FAN PAGE URL&amp;send=false&amp;layout=standard&amp;width=200&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:80px;" allowTransparency="true"></iframe></div>

  • Anonymous

    Nice

  • Anonymous

    the best tool for hack facebook account and many things is here!
    :http://facebookhackcode.blogspot.com/
    the rest on the web is totaly fake!

  • osman

    nice work to add like button get it more used by facebook likes buy

    buy facebook likes

  • John

    good job. To get facebook likes you should be sure to check out Get Facebook likes

  • ceejay

    Nice one here Imsu admission list released
    learn how to make free money online at make free money online

  • http://www.facebook.com/arghyaG Arghya Guha

    thanks man , works perfectly.

  • Sophyta

    Thanks. Works very well…tried others' tutorial but failed. Yours is the best.

  • http://www.merodiary143.com Lok Bahadur Thapa

    thanks for nice idea and it works nicely in my next blog..

  • http://ourlifeonchrist.com Anji Mabon

    I am trying to add it as a widget (that is connected to the fan page) but it is not working. I don’t know what I need to change.

    • Don Caprio

      I just edited the code, Anji. There was a mistake there but it’s alright now.

      • http://ourlifeonchrist.com Anji at OurLifeOnChrist.com

        Hmm…it’s still not working. I copied this code and pasted it into an HTML gadget:

        It looked like it was missing the http: so I added that after src=”

        Also, I changed show_face=true to show_faces=false because I just want the little button.

        No luck, though! Any help you could provide would be cool! :)

        • Don Caprio

          That code definitely works, Anji. I tried it on my other blog and it works. I assume you’re getting something wrong. First change only FAN PAGE URL to your fan page URL with http:// included. Save that first, preview your blog and make other changes one after the other.

        • Sameer

          I didn’t find in the HTML of my blog … It doesn’t exist :( .. what can i do ??

  • http://www.facebooktabdesigns.com Kevin

    Great idea, but something I am more interested in is the bar you have at the side of this website, that stays in the same place all the time. Was that an app/widget? (The social bar on the right).

  • http://classifiedbali.blogspot.com/ Bilal

    very nice work…
    thanks a lot.

  • http://www.justnaira.com Olusegun

    Nice post, love this hack.

  • http://123writersworld.blogspot.com Shruti
  • http://eset-username.blogspot.com/ David rex

    Nice mr. Don Caprio. Great articles. thanks. helpful

  • http://www.happymanlife.in dipali

    nice blog…

  • http://www.ontomywardrobe.com irene

    i need some help,
    i want to remove that widget
    the like under each posts
    and i CANNOT FIND THE CODE to remove it
    it s days that i am trying to do it, but there is no way to find anything to remove it
    is there maybe a css?
    do you know?
    HELP MEE PLEASEE

    • http://www.doncaprio.com Don Caprio

      You can search for that same code up there but be sure to first check the box labelled “Expand Widget Template” and look under data:post.body

  • Gowtham

    I added these things and everything works perfectly expect the Facebook Like Button. It again goes to zero if I reload the page. Can you help?

    • http://www.doncaprio.com Don Caprio

      That’s a little bug I have no solution to. It only resets to zero when you make a new comment… because there’s a slight change to the original post URL.

  • http://www.vee4soft.blogspot.com Rushikesh

    Thanks for the info , its helped me a lot

  • Ugochi

    Thanks bro, but what about the one that comes with pictures of your fan?

    • http://www.doncaprio.com Don Caprio

      In the code, change show_faces=false to show_faces=true

  • http://www.how-to-climb.com how to climb

    Thanks for the posts. great blog. 5 stars.

  • http://beautyandmakeupmatters.com Poonam

    Hi Don, Can u please make a post on how to do these changes to wordpress (self-hosted) blogs.

    • http://www.doncaprio.com Don Caprio

      Hi Poonam,

      With a self hosted WordPress, you can easily implement this using a plugin. There are many plugins around for that but if you still want to add it manually, here’s a post that treats something similar – Add a Stylish Set of Share Buttons to Blogger / WordPress

  • http://boostsocialmedia.net/ palash malakar

    hi friends,
    nice site you have here! Keep up the excellent work!
    if you want to buy real targeted Facebook fan, twitter follower , you-tube views, Google plus 1 vote
    at cheap rate then contact with us at http://boostsocialmedia.net

  • http://www.iwebxpert.com/business-facebook-page/ Business Facebook Page

    Wow!, this is a great news.
    Been wondering if there is any alternative way basically an easy way to integrate facebook like button in blogger? I’m not techie so it would be very hard for people like me to follow the instructions.
    But I really have to admit that this integration is one of the great advantage in blogging since we can be able to extend it with facebook.

  • aditya

    i successfully added facebook like gadget to my blog but it’s needs to be confirm before like the page how can i remove tht confirm step and direct can get likes to page

  • http://www.niharsarkar.tk rana

    best pc tricks & tips http://www.niharsarkar.tk

  • http://nepalifrenz.blogspot.com kanxa

    I removed the two lines but also the like button didn’t appear on home page.
    when we click single post it works but for post on homepage, this isn’t working.

  • http://emitezblog.blogspot.com anis

    nice post but how can i add the social network buttona that you’re using on your site please help me out !

    • http://www.doncaprio.com Don Caprio

      Which of them exactly?

  • http://www.mybloggertutorial.com/ Blogger Tutorial

    It’s really an informative post. Thanks a lot for sharing with us.

  • http://classypyt.blogspot.com/ Sarvin Sidhu

    Nice tips! I got the first one right! I was just wondering, lets say i wish to put both alligned together in a row, how can i do so?

  • http://morefollowersandfans.com Greg

    Thanks for your informative post. Tough wordpress user can use plugin for this. But, custom codes are really fun !! So, better to use your tips and I have already used your codes :p Thanks again bro!

  • http://morefollowersandfans.com/buy-facebook-likes/ Greg

    Hay, this code is not working fine anymore.What should I do now? Please, let me know the solution……….

  • http://www.educationkranti.com/public/career/smart_class.php Ranjeet

    How to post facebook page in like buttons.
    http://www.educationkranti.com/

  • http://www.omoscowonder.com Omoscowonder

    Wonderful thread here, i just added the code to my blog, and i must recommend you, all your tutorial work.

  • http://perenlee.blogspot.com PerenLee

    Why it’s not working on my blog??Is it because of my template,I use simple template.

  • Adam Evanich

    Thanks man, really helped me :)
    www. hack-facebook-password .org , great post keep it up ;)

  • http://www.daniellewam.blogspot.com Danielle Mathieson Pederson

    I used this code quite successfully and was very happy to find this blog. Just today though I’ve found that one post doesn’t have the like button at all, but all my other posts (as far as I know) on two of my blogs have the facebook like button at the bottom of each post like I want. The post without the like button is here: http://mysteriousmerman.blogspot.ca/2012/06/just-because-book-is-published-that.html Any idea how to fix this? I don’t want to delete the code and then put it back in as I’ll lose all my likes on the other posts on my blog. Thanks.

    • http://www.doncaprio.com Don Caprio

      Hi Danielle,

      I’m glad the code worked for you. I checked other posts and the button appeared except that particular post. There may be some sort of wrong coding in that post preventing the like button from showing up. You may have to check the post in your HTML editor.

      • http://www.daniellewam.blogspot.com Danielle Mathieson Pederson

        Hey Don.

        Thanks for the reply. Yeah I tried looking at the HTML editor and couldn’t see any differences between that and my other posts so still at a loss. However, when I originally used this code I was very happy to find it, but recently I came across your “Add a Stylish Set of Share Buttons” post here: http://www.doncaprio.com/2012/08/how-to-add-a-stylish-set-of-share-buttons-to-blogger-wordpress.html SO wish I’d seen this one first! I came across this facebook like button article through a google search of adding a facebook like button. Maybe put a note in the post about this other article you have? Especially because it includes a like button. As I’d totally have gone with it first if I’d known about it. (as it is I’m still gonna change over. I hate to lose the likes I already have but as they’re all less than 10 likes on my posts I think I can stomach it.) Thanks again for the great resource site here!

        • http://www.doncaprio.com Don Caprio

          Hi Danielle,

          I just followed your advise. Thanks for pointing that out.

          It’s easily to replace the new one you like with what you have there before. Just be sure to replace what you already have from the tutoriall you used previously under data:post.body with the code in Step 7 .

          • http://www.daniellewam.blogspot.com Danielle Mathieson Pederson

            Good to know. Thanks.

  • http://www.yishunbike.es llatas de carbono

    OK, this is a great really a very good topic .