The Fan Box is a social widget that allows Facebook Page owners to attract and gain Facebook fans from their own website.
The Fan Box lets users:
- See how many users are already fans, and see some of their friends who are
- Read recent posts from the Page
- Become a fan with 1-click without needing to visit the Page
This is the default Facebook Fan Box.

But how to modify it to meet your web color.This is simple steps to modify your Fan Box
- Create a css file, we cache your stylesheet. If you update your stylesheet, you should use a cachebreaker in the URL to the stylesheet, typically by appending a version number to the .CSS file extension, as in http://www.bursakarir.web.id/templates/gk_icki_sports/css/facebook.css?2
@charset "UTF-8";
/* CSS Document */
.fan_box
.full_widget
.connect_top {
border-bottom: solid 1px #E7E7E7;
background-color: #E7E7E7;
}
.fan_box
.full_widget {
border: solid 1px #E7E7E7;
border-top-width: 6px;
}
.connect_top a {
color: #3399CC;
}
.connect_top a:hover {
color: #3399CC;
}
.fan_box
.connections {
background-color: #FFFFFF;
border-top: solid 1px #E7E7E7;
color: #3399CC;
}
.fan_box
.connections_grid
.grid_item
.name {
color: #2D2F31;
} - The Fan Box gets rendered by the fb:fan XFBML tag. Now, you should change the defaults and add css attributes in the fb:fan tag
<script src=”http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US” type=”text/javascript”></script><script type=”text/javascript”>// <![CDATA[
FB.init("a38dee173da1de7f1db71490d2fe6f2e");
// ]]></script> - Now, look at the final result :
You should try it, Visit my sites for final results http://www.bursakarir.web.id/






