Styling Your Facebook Fan box
Posted by Nile | Posted in Tutorials | Posted on 21-06-2010 | 18
Sometimes when you get an outside service and apply it to your site, you are unsatisfied on how it looks and perhaps want to alter it – like the Facebook fan box. It really is not too much of a big deal, but for those who like to put a little more effort and get rid of outside branding on their site, this tutorial should help.
Really, all it is is copying the code, replacing areas of the code for your fan page, and then copying the css to your layout’s style sheet.
This is a short tutorial on how to make your Facebook fan box go from this:
To This:
However, the code here is a bit different from my stylesheet, so if you have a site with similar colors like mine, you are welcome to take a look at my site’s stylesheet for reference.
1. you need the Facebook fan box code. It does matter which code as well… whether it is the older code without the iframe, or the new one that includes the iframe
<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("b9786c0131cf453efe57a93566925d73");</script>
<fb:fan profile_id="95262735892" stream="0" connections="10" logobar="1" width="300" height="200":></fb:fan>
<div style="font-size:8px; padding-left:10px">
<a href="http://www.facebook.com/pages/Nile-Flores/95262735892">Nile Flores</a> on Facebook</div>
2. Replace the fan profile_id=”95262735892″ with your own page’s number. In the case you have a username for your page, you can get that id from your page’s settings. When you click “Edit Page” the URL will have your site’s ID at the end in your browser.
Example:
3. In your code, you will see logobar=”1″. Change the number to 0.
4. In your Facebook code on the same line as the height and width, add css=”YOURSTYLESHEETURLHERE?1″ .
In the YOURSTYLESHEETURLHERE, put the URL to either your stylesheet of your theme or layout.
5. Apply the following CSS to your stylesheet, no matter if you are using WordPress, another CMS, or straight HTML. You can alter the code to fit your site’s colors.
/* Start Facebook Fan Box CSS */
/* Main Part of Widget */
.fan_box a:hover{
text-decoration: none;
}
/* Fan box header */
fan_box .full_widget{
height: 200px;
border: 0 !important;
background: none !important;
position: relative;
}
/* Header */
.fan_box .connect_top{
background: none !important;
padding: 0 !important;
}
.fan_box .profileimage, .fan_box .name_block{
display: none;
}
.fan_box .connect_action{
padding: 0 !important;
}
/* Fan Connections */
.fan_box .connections{
padding: 0 !important;
border: 0 !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #666;
}
span.total{
color: #FF6600;
font-weight: bold;
}
.fan_box .connections .connections_grid {
padding-top: 10px !important;
}
.fan_box .connections_grid .grid_item{
padding: 0 10px 10px 0 !important;
}
.fan_box .connections_grid .grid_item .name{
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
font-weight: normal;
color: #666 !important;
padding-top: 1px !important;
}
/* Like Button */
.fan_box .connect_widget{
position: absolute;
bottom: 0;
right: 10px;
margin: 0 !important;
}
.fan_box .connect_widget .connect_widget_interactive_area {
margin: 0 !important;
}
.fan_box .connect_widget td.connect_widget_vertical_center {
padding: 0 !important;
}
It really not much of a customization, but with some alterations to the CSS, you could probably do quite a lot.
