Look at the box above, it is Facebook Like Box for Earn Money From Blog 2.0. Before you create a Facebook Like Box, you have to create your Facebook Fan Page 1st.
Create Your Facebook Like BoxYou 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 Explanation1. 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 ProblemAfter 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.
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 BlogSince 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
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.
About the Author: This Post is written by William Lee (Nickname: Greenleaf). Make money blogging and work from home is the best job I ever experienced.