Add the new Facebook “Like” Button Widget on your Blogger Blogs

by

I’ve promised my family and friends that I would create a Blogger counterpart of the plugin I did last night for WordPress, the Facebook “Like” Button Widget Plugin.

Well, I don’t want to keep you from waiting. Here’s how you do it:

1) Login to Blogger (I preferred Blogger Draft in this example)

1

2) Click “Layout” on the blog you want to add the Widget

2

3) Click “Edit HTML”

3

4) Tick the “Expand Widget Templates” checkbox.

4

5) Search for the following code (you can use CTRL+F on your browser)
<div class=’post-outer’>

Once you found it, on the next line you should find this code <b:include data=’post’ name=’post’/>. If you found that, it means you are on the right spot.

5

Copy the code below and paste it right after that <b:include data=’post’ name=’post’/> code (highlighted yellow above).

<script>
fb_like = &quot;http://www.facebook.com/plugins/like.php?href=<b:if cond=’data:blog.url’><data:post.url/></b:if>&quot;;
document.write(&quot;<iframe scrolling=’no’ frameborder=’0′ allowTransparency=’true’ style=’border:none; margin:10px 0 0 0; overflow:hidden; width:450px; height:auto;’ allowtransparency=’true’ src=’&quot;+ fb_like +&quot;’/>&quot;);
</script>

UPDATE: The above code doesn’t seem to work because copying it from here adds some funky characters in the markup. Grab it here instead:
http://snipplr.com/view/32953/facebook-like-button-on-blogger/

Like the highlighted code in the screenshot.

6) Click “Save Template”

6

7) You’re done! Refresh your main blogger blog now and you should be able to see your new Facebook “Like” Button Widget

7

Got it working? Post your URL in the comments below. Cool huh?

31 Responses to "Add the new Facebook “Like” Button Widget on your Blogger Blogs"
  1. Hi – I can’t find the option to edit HTML on the new layout of Blogger in Draft – please can you help me – where should I go to find this now please ..?

  2. OMG I have been trying to figure out how to do this for AGES!! Seriously have tried at least half a dozen different people’s code and it never worked til now… so thank you… don’t know whats different about this but it works….

  3. Thanks so much for your help. This is the most useful code that I’ve ever searched on web. But one thing I wanna ask, is it possible to display all profile pics that ppl liked my post? I just saw some of the ppl’s profile displayed. And the others just like ” and 4 more people like this”. What should I do? Trillion thanks!

  4. Hi,

    Thank you for your useful post. I was able to add a “like” button to my blog on Blogger. Your instruction are very clear and the pictures helped. Your code also worked well. Thanks again. Please visit my blog if you have a moment.
    Tstylewatch recently posted… Inspiration on the TMy Profile

  5. Hi it is great, thanks a lot. I’ve founded so many of these codes but this one is the first which is properly working. I just wonder if you know how to modify to dont show the faces and just the names.

    Thanksss from Argentina

  6. Thanx a great deal. I love it. Didn’t find the two lines you said I would, but found a place to squeeze it into. It’s very cool. I observed that it takes a lot of vertical space. Still, Kudos!

Leave a Reply

Your email address will not be published. Required fields are marked *


 

PageLines