148 Add Facebook "Like" Box Beneath your Blogger Posts February 01, 2011 /

Facebook has become one of the most popular tools among Bloggers for syndicating blog posts. By adding a stylish Facebook "Like" box beneath your articles in Blogspot, you offer readers a temptingly easy means of sharing your posts with their friends.

Aneesh of Blogger Plugins has developed a simple, customizable way of installing a Facebook Like box for each page of your Blogger-based site. This tool is based on the original code and design developed by Mia of Dezign Matterz. I'm using a slightly altered version of this widget here on Blogger Buster.

In this post, I'll offer an overview of how to install Aneesh/Mia's stylized Facebook Like box, and an additional method for adding a simpler "Like" widget to your Blogger/Blogspot site.

How to install a stylized Facebook Like Box

Head over to the installation page at Blogger Plugins and fill in the form. You'll need to enter the URL of your Facebook Fan page or profile, and also your desired width in pixels.

The code beneath the form will update once you've entered these details.

If you're using one of the newest Blogger templates (which functions with the Blogger Template Designer) you can add the CSS style code in Design>Template Designer>Advanced>Add CSS section of your dashboard if you prefer. Alternatively, follow the instructions in Aneesh's post to add directly in your Blogger template file.

Finally, add the customized code beneath the <data:post.body/> tag in your blog's HTMl code and save your template. After this simple installation, you'll see the Facebook Like box appear on item pages of your site.

How to install a simple Facebook Like box

If you'd prefer to add a simpler Like box, you can install a widget like this (with or without fan avatars) instead:

To add this style of widget, go to Design>Edit HTML in your Blogger dashboard and check the "Expand Widget Templates" box.

Locate the <data:post.body/> tag using your browser's search function and immediately below this paste the following snippet of code:

<b:if cond='data:blog.pageType == &quot;item&quot;>

<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=450&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>

</b:if>

You'll need to make a few slight alterations for this widget to work for your specific template:

• If you would like to show the avatars of people who have liked your page, change the section highlighted in red to "true"
• Change both of the values highlighted in yellow to the width in pixels you would like to present your widget.

Finally save your template and enjoy your new Facebook Like box which will be displayed on item pages of your site.

What do you think?

I hope you may find these techniques useful for adding a Facebook Like box to your own Blogger site. Please feel free to share your thoughts in the comments section below.