Adding the Facebook "like" button to a Blogger blog

After adding the Facebook like button to my blog (which runs wordpress), I also tested the same on my old blog in blogger. And since most of the art blogs I read run on blogger, I thought I could share the method to add the facebook like button at the end of your blog posts in blogger. It is much easier than adding to a self hosted wordpress blog, as there is just a single edit to be done.

• Goto the Facebook developers page to customize the Like button. The button can be customized to be displayed as "Like" or "Recommend". I went with Like itself, because it is so widely used in all of facebook and helps a reader map it to FB at first sight.


• In the URL to like, enter "post.url", as this is how the unique permalink of each blog post is represented within the blogger template. By default, this will be set to "http://developer.facebook.com" and must be edited to suit your blog.

• After customizing the button, click on the Get Code button to get the code to be inserted into the template.

• Select the code in the top, with the iframe.


• Goto Layout->Edit HTML in your blogger dashboard. Select the checkbox "Expand widget templates".


• Take a backup of the existing template before proceeding, by clicking on the link "Download full template".


• Search for the line "<div class='post-header-line-1'>" in your template.


• Insert the copied code in between <div class='post-header-line-1'> and </div>.

Now preview the template before saving the changes, to see if the button looks fine. While customizing the like button in facebook, only the width is specified and not the height. I have set it to be 30px and this looks fine. After previewing the changes, save the template and you're done!

I have added the feature to my old blog on blogger and it works fine. Go ahead and introduce the Like button in your posts, so that not only friends in your network but also anyone else who visits your blog will be able to share the content to their network.