Setting Up Your Widget
Step 1 – Get Your Facebook Fan Box Code
First things first you need to get the code for your facebook fan box from facebook, your code should look something similar to the code below.
<script type="text/javascript"src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script><fb:fan profile_id="34572893685"stream="0"connections="10"logobar="0"width="300"></fb:fan><div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/pages/North-Miami-FL/Daddy-Design/34572893685">Daddy Design</a> on Facebook</div>
Step 2 – Linking Your CSS
The second step is to set up the linking to your css code and adjusting your facebook fan box code to allow for the customization you’re about to start. The div associated at the end of the original fan box code is only a link back to your facebook page, we decided to remove it, however you may choose to leave it. Items that we have changed in our code are the width from 300 to 240 and connections from 10 to 8, your width and number of connections may change depending on the space available for your fan box. Items we have added are height at 200 (also subject to change) and the line of code to link to our css stylesheet. Please view the updated coded below.
<script type="text/javascript"src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script><script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script><fb:fan profile_id="34572893685"stream="0"connections="8"logobar="0"width="240"height="200"css="http://www.yoursite.com/stylesheet.css?1"></fb:fan>One important item to take notice of is ‘?1’ which appears at the end of the css link, this item is the cache level for the facebook fan box, every time you make changes to the css inside your stylesheet and upload to your server you must change the number after the question mark to correspond with the number of edits you have made.
Here’s another handy tip, if you are using wordpress you can insert your code to look like the code below, this will link straight to your wordpress stylesheet. (Make sure you edit the ‘?1′ accordingly.)
css="<?php bloginfo('stylesheet_url'); ?>?1"
Styling Your Widget with CSS
Step 1 – Styling the Main Widget
The first step in customizing the css is to fix link hover issues and to remove any unneeded styling from the main widget. Check the first set of css modifications below.
.fan_box a:hover{
text-decoration:none;
}
.fan_box .full_widget{
height:200px;
border:0!important;
background:none!important;
position:relative;
}In lines 1 through 3 of the code we have removed the underline hover effect for all links inside the fan box to avoid any type of conflicts. In lines 4 through 9 of the code we have removed the border from around the full fan box widget, set the height to match our widget height, removed the background, and positioned it to allow for the moving of the “Like” button. One thing to keep notice of is the usage of ‘!important’, this is a css trick that will override the already used css code inside of the widget, anything that we change that currently has any values associated with it must use this code or else the original code will still take priority.
http://www.daddydesign.com/wordpress/how-to-customize-your-facebook-fan-box/