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>

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

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

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

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

  3. Kevin 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.

  4. irene 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

    • Don Caprio 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

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

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

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

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

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

  9. kanxa 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.

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

  11. Greg 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!

  12. Greg says

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

  13. Omoscowonder says

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

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

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

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

        • Don Caprio says

          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 .

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 *