Simple Blogger Tutorials

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

11 comments :

  1. Your own example of the like box is not working on chrome and IE6, but it is working on Firefox. I am reporting this problem on Dec 16, 2010.

    I wish I could attach the screen shot but this comment box does not allow it.

    ReplyDelete
  2. It's working fine in Chrome, Firefox, however, Thank you very much for reporting me.

    ReplyDelete
  3. Please visit My blog http://addbloggertricks.blogspot.com
    and tell me is it Facebook Like Box correctly added on my blog?

    Thanks

    ReplyDelete
  4. I cant add because it asks for a url not a code

    ReplyDelete
  5. Okay, if you are adding "HTML/JavaScript" gadget from "Add a Gadget" link within Page Elements tab, then it should not ask for any URL, rather there should be a big blank space within the gadget to add the codes and snippets. Are you sure that you are adding the correct one? Alternatively you can also try by adding the Like Box into a "Text" gadget, but remember to click the "edit HTML" link found in top right corner.

    ReplyDelete
  6. Thanks so much for this blog, it was extremely helpful! I've got it on to my blog using the 'iframe' code and unfortunately the like box doesn't show the profile pics of my new likes. I read your advice re: manually changing it to 265px.... thing is it's actually already set at 427px. Any ideas of how I can remedy this?

    Thanks :-)

    Jazzy

    ReplyDelete
  7. 1. You have to have some Likes for your page.
    2. While generating your code for Facebook Like box, check whether "Show Faces" option is checked/set to true.
    3. Sometimes it can be browser related problem. Clear your browsers cache and see what happens.

    If all the above methods don't work, then report this bug to Facebook.

    ReplyDelete
  8. Thanks for getting back to me. I figure out how to do it by editing html code from Edit layout on my blog. Unfortunately I've somehow managed to share the wrong facbook page on my blog!! A problem I'm sure I can fix! Thanks again ;-)

    ReplyDelete

Don't SPAM! Read comment policy.

Like