22 June 2012

How To Play With Your Facebook Fan Box

Facebook Fan Box change with css
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://www.allbloggingtricks.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="335783349790411" stream="0" connections="10" logobar="0" width="300"></fb:fan>

<div style="font-size:8px; padding-left:10px"><a href="http://www.facebook.com/bloggingtrick"></a></div>
  • Replace profile_id="335783349790411" to your profile_id. This id will appear on your address bar in condition to editing the page.
  •  Replace http://www.facebook.com/bloggingtrick 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 CSS style sheet your code will look like this
<!--http://www.allbloggingtricks.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="335783349790411" 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/bloggingtrick"></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://www.allbloggingtricks.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

2 comments:

  1. Great explaination! When you are customizing the place of putting the facebook box of the Joomla facebook plugin then make sure you put it on the bottom of the website. This makes it easier to the reader to put a like or someting

    ReplyDelete
  2. Louis Vuitton Damier Canvas Duomo N60008 Today, I wish to acquaint the Louis Vuitton Damier
    Canvas Duomo N60008,it is a all-encompassing Italian appellation for a basilica church, acceptation house. This season, Louis Vuitton handbags launched a city-limits bag called from this celebrated arcade commune in Florence, Italy. It is replica watches N60008. If you accede acutely what the accord amid the Duomo of Florence and Louis Vuitton Duomo, I anticipate it is adorableness and fame. The Duomo of Florence is accustomed as the Gates of Paradise. You will be addled by its blush and louis vuitton replica affluent apery of the exterior, and its amplitude and the abnegation of the autogenous furnishings. The Duomo of Florence was congenital with accessible funds as a accompaniment church, and important works of art in the ancillary aisles aggregate a borough affairs anniversary illustrious men. That is just what gucci replica wants to accord us. The awe-inspiring Damier canvas, the superior craftsmanship, and the agleam golden assumption pieces, aggregate is so absorbing and superlative. The comfortable contour firstly gives humans actual comforts. Then the red bolt lining , autogenous louis vuitton handbags replica flat abridged and cellphone abridged accompany barter majestic activity and anatomic using. To imitate the best style, replica shoes matches a aureate padlock with keys captivated on amber leather. Each detail architecture alluringly and considerately.





    ReplyDelete

Related Post