Add Facebook Like Box to Blogger

Many readers take Facebook Fan Pages as an alternative to RSS readers, so it will be best to add a Like Box to your blog. It is a great way to show your readers that your blog is also available on Facebook and they can join your Page and become an active member by liking your page.

Here is my page on Facebook. You can always join my Page by clicking the “Like” button.

Creating Like Box

First create Facebook Like Page and visit official site on Facebook to get the code. Now all you have to do is to add your Facebook Page ID Name and check the options that you like to have. After all has been done, click “Get code” and copy the “Iframe” code.

I have chosen the Iframe one because it is simple to get and implement. If you are looking to add the HTML5 or the XFBML one then you have to follow a series of steps as mentioned in Like Button for Blogger (steps 1 to 3).

Facebook Like Box for Blogger

To add it to Blogger, go to Layout tab under your blog’s dashboard and add a new “HTML/JavaScript” gadget to your sidebar (or footer or to any place that you want). Paste the code that you got from the official site into the gadget and save it. View your blog and you will find that you have successfully added it.

Fixing Like Box Height

One problem I got while adding it is the height of the box. It seems that there may be some problems while generating the code. It may depend whether you have selected to show your page's members profile photos and stream or if you have selected to not to show any profile photos and/or stream. So you have to fix this manually. For example, the code generated for my box was:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogger.Tutorials&width=292&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=true&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:62px;" allowTransparency="true"></iframe>

The height of the box was 62 pixels as shown above in two places. So you have to manually change this to your desired height, say 180px or 300px or to different pixels that gives the box the correct height. The full code will look like:

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FBlogger.Tutorials&width=292&colorscheme=light&show_faces=true&border_color=%23cccccc&stream=false&header=true&height=300" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:300px;" allowTransparency="true"></iframe>

Finding Facebook Page ID

Generally, it is the digits that you have on your browser’s address bar of your page. It is shown with an example in the picture below.

My Facebook page ID

Some of you may already have got their Page Name as a result no ID will get displayed in your browsers address bar. So right click on the profile logo of your page, copy the link address and paste it on a new window (tab) on your browser.

Logo of my page

Your Facebook page ID will be the last digits.

Your page id

Popular posts from this blog

Add Google Web Fonts to Blogger

How to Add Extra Gadget/Widget Section to Blogger Header

Add Open Graph Protocol Meta Tags to Blogger