Add the new Facebook “Like” Button Widget on your Blogger Blogs
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)
2) Click “Layout” on the blog you want to add the Widget
3) Click “Edit HTML”
4) Tick the “Expand Widget Templates” checkbox.
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.
Copy the code below and paste it right after that <b:include data=’post’ name=’post’/> code (highlighted yellow above).
<script>
fb_like = "http://www.facebook.com/plugins/like.php?href=<b:if cond=’data:blog.url’><data:post.url/></b:if>";
document.write("<iframe scrolling=’no’ frameborder=’0′ allowTransparency=’true’ style=’border:none; margin:10px 0 0 0; overflow:hidden; width:450px; height:auto;’ allowtransparency=’true’ src=’"+ fb_like +"’/>");
</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”
7) You’re done! Refresh your main blogger blog now and you should be able to see your new Facebook “Like” Button Widget
Got it working? Post your URL in the comments below. Cool huh?
