Modify your Facebook Like box by using CSS style

On Facebook Developers page a limited of source available for users, adding stylish Facebook plugins are not available. I studied an article online wherein educated about how to make customization and styles to Facebook fan box. BlogTariff using the same methods in simplification styles after certain tangs in Like box a finest Like box shaped.
BlogTariff always ahead in simplifies the hardest methods into an easiest possible. You can do implement by in two tutorials.
Generating style sheet for like box
Generating a code for like box

Let’s start how to install the stylish sheet of Like box

Just copy this below code and paste it to any of Notepad
Step1

/*---------------BTF's Custom Like Box Start--------------*/
.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: #0080ff;
  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: #289728 !important;
  padding-top: 1px !important;
}

.fan_box .connect_widget{
position: absolute;
bottom: 0;
left: 0px;
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;
}

/*---------------BTF's Custom Like Box End--------------*/

• Make necessary replacements in the above code before you save it or else leave it as default.
• Find font-size: 11px and replace it with your choice font size or else leave it as default.
• Find #0080ff and replace it with your choice color by using our Color generator tool or else leave it as default.
• Find #289728 and replace it with your choice color or else leave it as default.

Step 2
After pasting the above code in the Notepad and successful changes if necessary save the file as with extension .css eg. (LB.css) as shown in the image below.

After successful saving the file, upload file to any of free file hosting provider and collect the file hosting link and save it for further customization.

Make a modified Like Box code

What the developers page generates code in its place we use and customize the code afforded by daddydesigns. The code as given here under:-

<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("");</script>
<fb:fan profile_id="LIKE PAGE ID" stream="0" connections="10" width="300px" height="200px" header="0" logobar="0"   css="STYLE SHEET LINK"></fb:fan>

You’ve notice 4 most vital segments i.e

• Stylesheet link
• Connectiones i.e Number of Profile Faces/pics
• Like Page ID
• Width and Height Dimensions

Changes as below:-
Find 12-15 digit numeric ID and replace it with your Facebook fan page available on your Facebook Like page url. Example as given below

https://www.facebook.com/pages/BlogTariffcom/123456789112345

According your requirement can change the number of profile pics by connections equal to 10.

Find “Style Sheet Link” replace it with your file link uploaded before.
Now it’s ready to use, you’ve done a good job. If you’ve facing any difficulties bring to us, we try to solve your difficulty.

Acknowledgment

We request to readers link back to this page if they wish to contribute to this page tutorial with their visitors.