Make A Customized Facebook Like Box



Facebook Like Box (previously known for fanpage) is among the top trend now for bloggers and website owners; installing the like box with an option for readers to like, see the faces of people who following and a link back to the fanpage. However, since facebook widget like this come with a single standard, this customization maybe the first been discovered. Originally created by DaddyDesign, this is my retouched code:

How to dd Facebook like box?:


#1 Widget Code:
<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="YOUR FANPAGE ID NUMBER" stream="0" connections="8" logobar="0" width="240" height="230" css="http://www.fileden.com/files/2011/3/23/3101531//MFDSFBfan_box.css?2"></fb:fan>

Copy the above script code into your widget field you must put on your own unique fanpage ID number and change stream (0 or 1) connections (number of people you want to show) logobar (0 or 1) and width and height as desired..and please reupload the css below into your own hosting (I am using fileden now and that ?2 at the end of the file directory address is a must, to inform facebook cache to do a new re-read everytime you made css changes).

#2 CSS Code:
.fan_box a:hover{text-decoration: none;}
.fan_box .full_widget{height: 200px;border: 0 !important;background: none !important;
  position: relative;}
.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_box .connections{padding: 0 !important;border: 0 !important;font-family: Arial, Helvetica, sans-serif;font-size: 11px;font-weight: bold;color: #3B5998;}
span.total{color: #3B5998;font-weight: bold;}
.fan_box .connections .connections_grid {padding-top: 10px !important;}
.fan_box .connections_grid .grid_item{padding: 0 7px 7px 0 !important;}
.fan_box .connections_grid .grid_item .name{font-family: "lucida grande",tahoma,verdana,arial,sans-serif;font-weight: normal;color: #3B5998 !important;
  padding-top: 1px !important;}
.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;}

1 comment: