« PREV: Social Mavens...
Putts Perfect... :NEXT »

custom facebook fan box

How to Customize your Facebook Fan Box

With the addition of a facebook fan box to your website you’re not only benefiting your end users but also yourself. The fb fan box allows users to directly view how many friends you have on your facebook page and also allows them to become a fan with just one click. The only potential downsides to adding a fan box to your page is that it is not easy to customize or the original styling just doesn’t match up with the unique style of your site. Well not anymore, in this tutorial we are going to teach you how to customize your very own facebook fan box.

This tutorial will teach you step by step how to customize your facebook fan box to look like ours. After completing this tutorial you should be able to play around with the code and make modifications that you see fit to change the styling to your own needs.

5/16/13 – It seems that this time Facebook has officially stopped this code from working any longer :( we will update this post if we figure out any new ways.

4/29/10 – This tutorial has been updated to allow full customization of the Facebook Fan Box and positioning of the new “Like” button.

Setting Up Your Widget

Step 1 – Get Your Facebook Fan Box Code

First things first you need to get the code for your facebook fan box from facebook, your code should look something similar to the code below.

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:fan profile_id="34572893685" stream="0" connections="10" logobar="0" width="300"></fb:fan>
<div style="font-size:8px; padding-left:10px"><a href="https://www.facebook.com/wordpressdesign">Daddy Design</a> on Facebook</div>

facebook fan box default styling

Step 2 – Linking Your CSS

The second step is to set up the linking to your css code and adjusting your facebook fan box code to allow for the customization you’re about to start. The div associated at the end of the original fan box code is only a link back to your facebook page, we decided to remove it, however you may choose to leave it. Items that we have changed in our code are the width from 300 to 240 and connections from 10 to 8, your width and number of connections may change depending on the space available for your fan box. Items we have added are height at 200 (also subject to change) and the line of code to link to our css stylesheet. Please view the updated coded below.

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<fb:fan profile_id="34572893685" stream="0" connections="8" logobar="0" width="240" height="200" css="http://www.yoursite.com/stylesheet.css?1"></fb:fan>

One important item to take notice of is ‘?1’ which appears at the end of the css link, this item is the cache level for the facebook fan box, every time you make changes to the css inside your stylesheet and upload to your server you must change the number after the question mark to correspond with the number of edits you have made.

Here’s another handy tip, if you are using wordpress you can insert your code to look like the code below, this will link straight to your wordpress stylesheet. (Make sure you edit the ‘?1′ accordingly.)

css="<?php bloginfo('stylesheet_url'); ?>?1"

Styling Your Widget with CSS

Step 1 – Styling the Main Widget

The first step in customizing the css is to fix link hover issues and to remove any unneeded styling from the main widget. Check the first set of css modifications below.

.fan_box a:hover{
  text-decoration: none;
}
.fan_box .full_widget{
  height: 200px;
  border: 0 !important;
  background: none !important;
  position: relative;
}

In lines 1 through 3 of the code we have removed the underline hover effect for all links inside the fan box to avoid any type of conflicts. In lines 4 through 9 of the code we have removed the border from around the full fan box widget, set the height to match our widget height, removed the background, and positioned it to allow for the moving of the “Like” button. One thing to keep notice of is the usage of ‘!important’, this is a css trick that will override the already used css code inside of the widget, anything that we change that currently has any values associated with it must use this code or else the original code will still take priority.

facebook fan box - step 1

Step 2 – Styling the Widget Header

The second step in customizing the css is to adjust the fan box header. Check the second set of css modifications below.

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

We are basically going to be getting rid of everything in the widget header except for the “Like” button, which we will position to the bottom of our widget later. In lines 1 through 4 we have gotten rid of the light blue background color for the header and removed all of the headers padding. In lines 5 through 7 we have completely removed both the main profile name and image. In lines 8 through 10 we have removed padding associated with the “Like” button that was not needed.

facebook fan box - step 2

Step 3 – Styling Fan Connections

The third step in customizing the css is to adjust the actual fb fan connections. Check the third set of css modifications below.

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

In lines 1 through 8 of the code we adjusted the padding surrounding the fan box connections, removed the border at the top, and adjusted the font for the line of text that displays “X people like Profile Name”. In lines 9 through 12 of the code we have adjusted the color and font weight of the number of fans displayed. In lines 13 through 15 of the code we have adjusted the padding between the line of text and the actual fan connections. In lines 16 through 18 of the code we have adjusted the padding between the actual fan connections. In lines 19 through 24 of the code we have adjusted the actual fan name, make sure that you DO NOT change the font family, if changed it may cause alignment issues with the connections.

facebook fan box - step 3

Step 4 – Positioning the “Like” Button

The fourth and final step in customizing the css is to position the “Like” button. Check the fourth and final set of css modifications below.

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

With the addition of this block of code the “Like” button will now appear at the bottom right of our fan box widget. How does this work? It works because earlier we used relative positioning on the main widget div in Step 3, whenever relative positioning is used on an element you can then use absolute positioning to position another element anywhere inside of the main element. The way to position the element is by using the attributes top, bottom, left, and right depending on where you want to move the element. In our situation we wanted it to be at the bottom right of our widget so we used the attribute bottom with a position of 0 and right with a position of 10px. The reason we used 10px for right instead of 0 is because we had added 10 pixels of right padding to each of our fan connections, this way the button and fan image will line up correctly. Lines 1 through 6 of the code are used to position the actual div to the bottom right of the widget. In lines 7 through 12 of the code we have removed padding and margin associated with the “Like” button and its surrounding table data so that it will align properly.

facebook fan box - step 4

Complete CSS Code

Below is all of the css code from the previous 4 steps combined together.

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

Troubleshooting

If you are trying to edit the css and no changes are showing up, make sure you are adjusting the cache level at the end of the css link in the widget code.

If you are having problems getting this tutorial to work please reread the tutorial and try again, if you still can not get it to work please leave us a comment below and we will respond as soon as possible.

Notes and Fixes

11/20/2012 – If you Fanbox has stopped displaying, this is becuase Facebook has made another change, so you must fix change this line of Javascript from

<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>

to

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

4/20/10 – Facebook has currently just changed the “Become a Fan” button to the new “Like” button. We are awaiting any further changes to the Fan Box and once things appear to calm down we will update this tutorial. Keep checking back…

4/29/10 – This tutorial has been updated to allow full customization of the Facebook Fan Box and positioning of the new “Like” button.

Posted In

Tutorials

262 Comments

  1. Stephanie March 28, 2010

    THANK YOU! I’ve been trying to do exactly this and the facebook wiki instructions are so vague.

  2. zabava April 2, 2010

    I need it THANK YOU!!!

  3. Justin April 2, 2010

    Thanks! I’m with Stephanie the facebook instructions are so vague. One thing I figured out: I had the site password protected using htaccess it took me about 20 minutes of trying to finally think of removing the password protection. Now it works great! Thanks again!

  4. Ali Hassan April 2, 2010

    I would love to do this but really am having trouble implementing this suggestion.

    Need a little help.

  5. Nathan April 7, 2010

    This is awesome!! I’ve been looking for something like this. Thanks!

  6. Jay April 7, 2010

    Great! Many thanks

  7. VINCENT April 8, 2010

    Really useful to start, I changed some things and it now works on my blog!

  8. Phonobase Music Services April 8, 2010

    What’s the code for “You’re fan” (when you logged in to fb)? It’s different from the button?
    Thanks!!!

  9. daddydesign April 8, 2010

    Hello Ali, what sort of trouble are you having in implementing your facebook fan box? Please let us know some more details about what you are trying to do and what type of problems you are having.

  10. daddydesign April 8, 2010

    Hello Phonobase,thanks for pointing that out we just noticed that the other day and we are going to be adding it to the tutorial shortly, please check back soon.

    We are also going to be doing a seperate tutorial on how to customize just the “Become a Fan” button, so keep a lookout for that one as well.

  11. Phonobase Music Services April 9, 2010

    Thanks!! I have anothe question: as you may know IE need a custom CSS and i’m wondering how to link a specific stylesheet for it. Can i use ?

    Thanks again for this great tutorial!!

    • daddydesign April 11, 2010

      Phonobase, the supplied CSS styling will work perfectly fine in both IE7 and IE8, it should work in IE6 but we have not tested it as we have dropped IE6 support due to recent security issues released about the browser. There is no way to insert two CSS links into the Facebook Fan Box but if you are having issues with IE you can use certain CSS hacks inside your stylesheet that only target IE browsers, however it is always best practice to avoid hacks whenever possible. Hope this helps and thanks again for your interest in our tutorial.

  12. Phonobase Music Services April 9, 2010

    Can i use “if IE”?

  13. Kursad April 11, 2010

    I think it use to all browsers..

  14. Diane April 12, 2010

    I have placed a small Fan Page widget on a contact page in a website I am designing but I cannot change its postion on the page. I only want to move it 100 or so pixels to the right but can’t seem to do this despite trying many ways of achieving this. Any suggestions?

  15. daddydesign April 13, 2010

    Hello Diane, easiest way to achieve what you are trying to do would be to wrap the fanbox code inside a div and position it accordingly using css.

    Basic idea is shown below:

    <div style="padding-left:100px;">
      Insert FanBox Code Here
    </div>
    
  16. daddydesign April 13, 2010

    Phonobase Music Services, the tutorial has been updated to allow for the styling and positioning of the “You are a Fan” text. Repeat and replace Step 4.

    Let us know if you have any further questions.

  17. Anita Skinner April 13, 2010

    Thanks so much for this tutorial!

    I have a problem implementing it though, which I was hoping you could help me with.

    This is the code I have inserted into a ‘Text Widget’ following your instructions the best I can lol!, and it’s obviously not correct.

    The fan page is showing on my sidebar, but not in the style I would like.

    I inserted the complete css code you have provided into my Atahualpa themes ‘HTML/CSS Inserts’ area, but it makes no changes to the Box.

    So I guess my question is: where and how do I create and link the CSS. Do I have to create the CSS, upload to my site and then it will work? I understood by inserting this code ‘css=”?1″‘ into WordPress it would do it automatically as I am using WordPress.

    Hope this makes sense, and would greatly appreciate your assistance with this.

    You have my url, so you can visit and view what I am talking about.

    Thanks so much
    Kind regards
    Anita Skinner

    I notice

  18. Anita Skinner April 13, 2010

    This is the code referred to in previous comment:

    FB.init(“db19177ad2dfd92319c1a137af5e6d26″);<fb:fan profile_id="104147266285901" stream="0" connections="6" logobar="0" width="190" height="215" css="?1″>

    Thank you
    Anita

  19. daddydesign April 13, 2010

    Anita, if you are going to be using the wordpress trick mentioned in Step 2 of setting up your widget then you will need to insert your fanbox’s css code into your wordpress theme’s main style sheet which should be named style.css. The other thing is that you’re forgetting to insert the actual php code needed to link to your wordpress stylesheet.

    The full code looks like this:

    css="<?php bloginfo('stylesheet_url'); ?>?1"

    Put that code into your widget just like that but make sure you update the ?1 to match the number of times you have updated your fanbox css or else the changes won’t show up correctly.

    I also noticed from looking at your website that your sidebar is very skinny, inserting a fanbox there is going to require a lot of tweeking of the css code to make it all fit properly.

  20. Nolan April 14, 2010

    I am currently trying to follow this post but I am scratching my head. I am using wordpress and have the following code:

    FB.init("e92419eec6bfabc33da3e49b3b85c860");
    <fb:fan profile_id="108947199145062" stream="0" connections="6" logobar="0" width="196" css="?1"
    >

    Any idea what I am doing wrong?

    http://convoyofhope.eu/wp/

  21. Nolan April 14, 2010

    FB.init(“e92419eec6bfabc33da3e49b3b85c860″);
    <fb:fan profile_id="108947199145062" stream="0" connections="6" logobar="0" width="196" css="?1″
    >

  22. Anthony April 14, 2010

    I’ve been trying to implement everything you said, but it hasn’t changed the box. http://www.ematrack.com/network/testcss.html

    Do you have any ideas on why?

  23. Anthony April 14, 2010

    Nevermind it seems to be working now!! Thanks!!!

  24. daithi April 14, 2010

    So I have a problem, my fanbox has been working nicely for a few months and just suddenly yesterday all instances of the fanbox have lost the styling, whatever I do i can not get it back, nothing has changed, the css is the same, the ?4 is the same, its just very weird that they are all no longer holding the styles, its like Fb have blocked it in some way, anyone else experiencing this?

    http://www.glutenfreevitamins.com/test

  25. daddydesign April 14, 2010

    Hey Daithi, it seems that since this tutorial Facebook has done a slight overhaul on the fanbox, the only issue we are currently having right now is with the “Become a Fan” button and the “You are a Fan” text, they have removed the wrapping div to these two items so they are going back up to the top, we are waiting a few days to see if any other major changes are taking place and then we will update the tutorial as needed.

  26. daddydesign April 14, 2010

    Nolan, if you check my comment back to Anita right above yours that will help you fix your issues. You are forgetting the php code to link back to the wordpress stylesheet.

  27. Nolan April 15, 2010

    Thanks for the reply. I was working on the code after I had commented. I have tried this and 3 other plugins and options. I can´t get it to get to any external css.

    I can set you up as a user so you can see. I have the php code in there now, I even copied the code of css and put it in my style.css file, but to no avail.

    Thanks for the help though!

  28. daddydesign April 15, 2010

    Nolan, the FB fan box seems to be a bit buggy lately, one potential problem might be that your fan box cache has been affected, try going onto Facebook and creating a completely new fan box and go from there, it might help just to completely wipe the slate clean. Also just to make sure but you are updating the cache number after the css line to how many times you’ve updated your css right? For instance if you have made 3 sets of changes to the fan box css in your stylesheet and uploaded it to your server 3 separate times then you would need to change the cache number to ?4, try adjusting that number and see if your changes show up then, if that doesn’t work then try getting the new fan box code from Facebook.

    Good luck and let us know if you get it working.

  29. Mike April 15, 2010

    I also have the same problem as Daithi. I’ll be checking back soon. Thanks for the tutorial.

  30. nayan April 16, 2010

    I have tried this but my css is not working here..
    it show “invalid parameter : unknown error”.
    I have tried a lot.. but still same problem
    even i used iframe also but still here is same problem.
    help me.
    thanks

« Previous Comments   /   More Comments »