How to Customize Facebook Fan Box Widget? (Basic and CSS Customization)

I hope you should have created a Facebook fan page or business page if you have not created yet you can find tutorials and how to here, here and here.

If you have created a fan page and still do not have a fan box on your site you can read a post here or you can get it here.

If you have a fan box widget now it is time to customize it.

Basic Customization
Basic customization is simple; you not require any designing or coding skill only you have to know some basic text editing knowledge.

When you get the code or java script for fan widget it looks like this:

<script type=”text/javascript” src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_GB”></script><script type=”text/javascript”>FB.init(“a9d92ba216c544f61a752bf756df9a10″);</script><fb:fan profile_id=”90899378978″ stream=”0″ connections=”8″ logobar=”1″ width=”270″></fb:fan><div style=”font-size:8px; padding-left:10px”><a href=”http://www.facebook.com/pages/TechShali/90899378978″>TechShali</a> on Facebook</div>

Basic Customization
Basic customization is simple; you not require any designing or coding skill only you have to know some basic text editing knowledge.

Basic Customization
Basic customization is simple; you not require any designing or coding skill only you have to know some basic text editing knowledge.

Now it is time to make some changes in this script:

stream=”0″ – You can change this value by “1” or “2”
connections=”8″ – You can change this value by 10, 12 or what you wish
logobar=”1″ – This is also changeable
width=”270″ – Default width is “300”
Height=”350” – Height is not is script but you can add this simply.
font-size:8px – This is also changeable
padding-left:10px – This is also changeable

These are some very basic changes, when you go to get the code for fan box there you get the options for customization also, you can see in below image:

If you want to customize it by adding some CSS, you can get a good tutorial here.