Adding Facebook Like Button To Blog Posts (For Blogspot)

Shortlink:

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>

Filed Under: Blogging Tips





Author: Don Caprio

Don Caprio is a full time blogger / web designer living in Nigeria and apart from blogging, my other obsession is music. I'm a self-confessed Tupac fan, an iOS lover, an Android user, a Windows 8 power user, a writer with a 5-year old unfinished novel... and the list goes on and on. You can add me on Facebook, follow my updates on Twitter or add me to your circles on Google+! By the way, if your blog needs a custom design, you can contact me here...

Comments

  1. Nice

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

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

    buy facebook likes

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

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

  6. Arghya Guha says:

    thanks man , works perfectly.

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

  8. Lok Bahadur Thapa says:

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

  9. Anji Mabon says:

    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.

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

      • Anji at OurLifeOnChrist.com 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! :)

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

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

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

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

  11. very nice work… thanks a lot.

  12. Nice post, love this hack.

  13. nice post… http://123writersworld.blogspot.com

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

  15. nice blog…

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

    • Anonymous 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

  17. 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?

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

  18. Thanks for the info , its helped me a lot

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

  20. how to climb says:

    Thanks for the posts. great blog. 5 stars.

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

    • 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

  22. palash malakar 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

  23. Business Facebook Page 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.

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

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

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

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

  28. Blogger Tutorial says:

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

  29. Sarvin Sidhu says:

    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?

  30. 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!

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

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

  33. Omoscowonder says:

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

  34. PerenLee says:

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

  35. Adam Evanich says:

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

  36. Danielle Mathieson Pederson 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.

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

      • Danielle Mathieson Pederson 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!

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

  37. llatas de carbono says:

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

  38. I can’t find data:post.body on my html code any where…need help!

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

Current ye@r *