How to Add Facebook Like Box On Blogger's Blog

If you see something like the Facebook box below on blogs or websites, then it is the Facebook Like Box. You might be wondering how to create a Facebook Like Box for your blog or website and this post will be a tutorial for you to follow to create a Facebook Like Box easily. But, before you create a Facebook Like Box, you will have to create Facebook Fan Page 1st "How to Create Facebook Fan Page for Your Blog".

Look at the box above, it is Facebook Like Box for Make Money From Blog With Google Adsense
Before you create a Facebook Like Box, you have to create your Facebook Fan Page 1st.

Create Your Facebook Like Box

You can create Facebook Like Box quite easily using the official link to "Facebook Like Box". After Facebook Like Page creation site is loaded, you will need to fill in:

1. Where is Facebook Page URL
Your Facebook Page URL can be obtained from your Facebook Fan Page. All you need to do is to login to your Facebook Fan Page account and copy the URL of your Facebook Fan Page. The URL of your Facebook Fan Page is the one after your Login to your Facebook Fan Page account. Look at the picture below  to learn how to copy your Facebook Fan Page URL.

2. How to Copy and Paste Facebook Fan Page URL

Copy your Facebook Fan Page URL and paste to the Facebook Like Box Creation page just like the picture below:

The Facebook Fan Page Creation Settings Explanation

1. Facebook Fan Page URL: Your Facebook Fan Page URL
2. Width: Adjust the width of your Facebook Like Box.
3. Color Scheme: Facebook provides "light" and "dark" color scheme, normally I like to use "light" color scheme.
4. Show Faces: This will show the people who like your blog.
5. Border color: change the border color of Facebook Like Box
6. Stream: If this is enabled, Facebook Like Box will show your blog post in the box.
7. Show Header: If this is enabled, your Facebook Like Box will contain a header "Find us on Facebook".

Your Facebook Like Box Is Almost Done
In my Facebook Fan Page above, I have disabled the "Stream" and "Header". I chose "light" color scheme, the "width" is 292px and I chose "Show Faces" to show the faces of people following Earn Money From Blog 2.0.

Click "Get Code" and paste to your blog at the desired location. You will encounter another problem - The Height of the Facebook Like Box Problem. 

A Fix For Facebook Like Box Height Problem

After you click "Get Code", you will see the picture as shown below. I would suggest you to copy the "XFBML" codes because it is easier to edit the Facebook Like Box height.

The Original XFBML Codes will look like the codes below

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="YOUR FACEBOOK FAN PAGE URL" width="292" show_faces="true" border_color="" stream="false" header="false"></fb:like-box>

In order to fix the Facebook Like Box problem, you need to change the original Facebook Like Box codes to the codes as described below:

The codes to edit Facebook Like Box Height

<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="YOUR FACEBOOK FAN PAGE URL" width="292" show_faces="true" border_color="" stream="false" header="false" height="265"></fb:like-box>

I have added height of the Facebook Like Box as 265px in the the new codes above. You can change the height according to your preference.

Note:
Make sure you change the "YOUR FACEBOOK FAN PAGE URL" to your own Facebook Fan Page URL.

How to Add The Facebook Like Box Coding to Blogger's Blog

Since you have perfected the Facebook Like Box codes, then it is time to copy the codes and paste into your Blogger's blog.

1. Login to Blogger's Accont and go to Dashboard > Design > Page elements
2. Click "Add a Gadget" and Select "HTML/Javascript".
3. Paste the Facebook Like Box codes into the "HTML/Javascript" text area.
4. Save.
5. Move the gadgets around until you found the location you like most.
6. Save your blog design by clicking "Save" on the top right corner of the "Design" page.

Done. You have successfully added Facebook Like Box to Your blog.