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>

Comments

  1. Anonymous says

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

      • says

        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 says

          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.

  2. says

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

    • Don Caprio says

      You can get the share buttons here – http://www.doncaprio.com/2011/09/sidebar-floting-share-buttons-large.html – Thanks for visiting, Kevin.

  3. says

    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

    • says

      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

  4. Gowtham says

    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?

    • says

      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.

    • says

      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

  5. says

    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

  6. says

    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.

  7. aditya says

    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

  8. says

    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.

  9. says

    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!

  10. Adam Evanich says

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

  11. says

    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.

    • says

      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.

      • says

        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!

Share Your Comments & Feedback:

Please do NOT use keywords in the name field because they won't be linked to anything anyway...just use your real name. Let's try to have a personal and meaningful conversation.

Commenting Note(s):
To insert code into comments, use: [php]code in here...[/php]
Some HTML tags allowed: <strong>, <em>, <del>, etc. (Just don't overdo it, please!)