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

Create your own Contact Form with Kontactr for Blogger

Image
Kontactr is one of the simplest, fast, light weight and effective contact forms that I ever came across. It is not only easy to create but is also like a breeze to add it to Blogger. I have already told the main features but it does not end here. It has got CAPTCHA protection to stop all those spam massages and the best of all is it’s free. You need to follow some easy steps and you are ready to receive all those important emails. Step 1: Visit Kontactr and signup. Step 2: After confirmation, login and copy the codes given in “AJAX Widget”. Step 3: Login to Blogger and create a page form Pages tab (also known as “ static page ”) from your blog's dashboard . Give the page a title, like, “Contact me” or anything that you like. Step 4: Paste the copied code (as told in step 2) and Publish the page. That is it. However, you can also customize it so that it matches the background color of your blog. There are some other options too, for example, instead of a form, you can hav
Read more

Add Google Website Translator to Blogger

Image
Why use any other translate widgets with or without images of country flags when Google translator widget can translate texts of any webpage and is capable of translating to 64 different languages (and increasing) automatically and instantly to readers speaking language. Google translator for websites can be added to any website or CMS, like WordPress, Blogger, Tumblr, etc. with ease. While the steps of adding this widget is all same but here I will mainly write about how it can be added to Blogger blogs. Blogger has this widget, you just need to go to your blog’s Layout tab and click “Add a Gadget” link. A popup page will open, scroll down below and you will find the Google Translate gadget. But there aren’t much options to select from to customize it, that’s why let’s add it in a different way.
Read more