How To Play With Your Facebook Fan Box

Posted by : ADMIN Sunday, 29 January 2012

Adding Facebook fan box to blog is a good strategy to drive traffic on the blog. It engage your blog readers to receives updates directly on their wall whenever you publish a new post. Facebook fan box can be worked on different type of blogging platform like Blogger, Wordpress, Typepad, Joomla etc. The official Fan box released by Facebook came with different type of languages which works on API interface so that user can easily add up this box on different part of blog ( learn here to create Facebook fan page). Many web designer gives best in modifying this fan page and write different tutorials but they fail to some extent with this fan page. Now we are here to modify fan page. So lets see how to do it ?

How To Customize Facebook Fan Box With CSS

We find difficulty in modifying the actual fan page code given by Facebook. So first of all we will make our own fan box code which will be further modified.

Your new fan page code should code should be in following format.

<!--http://PCTRICKS8.BLOGSPOT.COM -->
<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="3357833494854111" stream="0" connections="10" logobar="0" width="300"></fb:fan>

<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/HACKINGTRICKS.TK"></a></div>

Replace profile_id="33457349790451" to your profile_id. This id will appear on your address bar in condition to editing the page.

Replace http://www.facebook.com/HACKINGTRICKS.TK with your page url

Coding of your page is ready, now we will add different type of CSS property in it. Here we will use external style sheet rather than internal style sheet because the JavaScript code provided in coding will overwrite internal style sheet. After adding external CSSstyle sheet your code will look like this

<!--http://PCTRICKS8.BLOGSPOT.COM -->
<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="FACEBOOK ID" css="http://shahbazproject.googlecode.com/files/myfacebook.css?1" stream="0" connections="10" logobar="0" width="300"></fb:fan>

<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/HACKINGTRICKS.TK"></a></div>

You can use Google Code to upload CSS code.
In Blogger Dashboard, Go to Design / Page Element.
Choose Add a Gadget
Hit HTML / JavaScript and paste the above fan box code in it.

Working Of Modified Facebook Like Box:-

The CSS list given below will explain the effect on Like box. You can add different property in it to modified it further.

/* code on http://PCTRICKS8.BLOGSPOT.COM */
.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: #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;
  }

.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;
 }

Explanation

.fan_box a:hover define the effect produced on fan page under hover condition.
.fan_box .full_widget define the complete fan page size you can increase or decrease the size of fan page from here.
.fan_box .connect_top define the header of like box. We set background property to none, you can also change it to any color by adding suitable CSS color code.
.fan_box .profileimage, .fan_box .name_block it define the profile image container and name of fan page container.
.fan_box .connect_action it contain like button.
.fan_box .connections specifies the box that contain FB fan connections and text that shows X people like profile name.
span.total define a block that contain the total number of like.

The CSS code given above changes the basic appearance of Facebook fan page, You can insert another code in above CSS coding to make it look according to your choice. And upload that CSS file to Google Code. Don't forget to replace the URL of uploaded CSS file, given above with blue color.

The complete CSS property used by Facebook fan page can be seen from here.

More Amazing Stuff With Same Author