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

How to Resize Blogger Header to Logo Size

Image
One of the drawbacks of Blogger is its header. When you are using text as your blog title, you will find that there is no problem but when you add an image or logo to the header portion instead of title and description or having description placed after the image from Layout tab, you will find that it’s not the logo but the whole header becomes clickable. So in this tutorial we will find out how to resize the Blogger header in new templates.
Read more

Google Penguin update hit me Hard

Image
On April 24, 2012, Google released a new search algorithm , later it was named Penguin. This was mainly meant to stop “webspam”, that is, mainly to bring down the sites which use “black hat” methods to rank well in Search Engine Result Pages (SERPs), like, violating webmasters guidelines , keyword stuffing, participating in link schemes, etc. When I read it I was happy that after the Panda update , Google moved a step forward to stop those spam sites who wishes to rank well within SERPs by shortcut methods. But as days passed, I became very sad and depressed as I found out that my blog also got hit by this update. My traffic dropped below 50%, some of my great posts cannot be found within SERPs and some went very down.
Read more