Loading...

Blog

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.

Leave a Comment

247 comments
Eiad
Eiad

Although i haven't tried it yet i wanted to thank u for this amazing tutorial. Thanks

Miron
Miron

I suppose it doesn't work anymore. Maybe because of a new policy of Facebook?

Steve
Steve

I fully agree.. until FB gets it together I will be charging as you said... no more "Of, yeah I'll just add FB for you.."

Joey
Joey

Ah, no wonder... FB again messed up. Now cannot even specify a font, either. Hope this is a temporal bug... Anyways, this is a great tutorial. Help me a lot in the past, thanks!

Kedar
Kedar

Why Facebook Likebox HTML5 doesn't support styling

bimbolera
bimbolera

hi, i noticed facebook already updated their code regarding fb likebox. i was wondering if you have a new tutorial about how to modify the updated likebox? thanks! :D

Taamil
Taamil

Hey, Your tutorial was amazing and it did work perfectly for me for the past couple months but now it has stopped working. May be facebook has made some changes to their like box plugin, please check that and let us now if it can be fixed. Thanks for your good work.

Goob
Goob

Barnacles! I was hoping the CSS not working was just a bug on my end, but it looks like it's down for everyone.

Yisrael Harris
Yisrael Harris

Can *SOMEONE* *PLEASE* post a link to a *WORKING EXAMPLE* of this?!??!??!? I built this months ago, and poof! it just stopped working this week!

alex
alex

This code is not working anymore because Facebook blocked CSS adding. Any alternative ?

db
db

Hi Any updates on this?

rasmus
rasmus

Facebook has change something so now its not work :(

max
max

Does it still works? Today my and also yours custom css for facebook seems to be ignored... ?

Brian
Brian

Facebook changed something ... messed up the box with a header - how to remove that?

will
will

Initially when doing this tutorial it worked however it seems facebook has changed the way the likebox works - are we still able to style the facebook likebox or are we stuck with facebooks branding. Please let me know if - i have tried changing styles in stylesheet according to div's but doesn't seem to work - id appreciate a response. Cheers, Will

Andrew
Andrew

This has stopped working for me too on a couple of sites. I've checked in Chrome and Firefox. I see you are no longer displaying your customised version on here as well so does that mean it doesn't work anymore?

Abhishek
Abhishek

It was great. But suddenly stopped working everywhere from today. Even it is not working in your site. What could be the problem? Is it FB pulling this out?

Hmmm
Hmmm

doesnt work anymore, i cant see it working on your sidebar too. i think facebook has made another change.

Sam
Sam

Facebook just change his plugin... it doesn't work anymore. :(

Axzon
Axzon

Not Working for chrome

Majkl
Majkl

Thx. Nice one.

facebook fan box
facebook fan box

nice look. I've build a website where you can put QR codes into fan box. Search on google for "fan box qr" to find it

Steve
Steve

Thank you so much for this.. I had almost given up and found your page. I have the FB box looking exactly fow I want and my client is very happy. Thanks Again, Steve

reb
reb

hi, where i can get the the code to be insert for FB.init(""); ?? Should I copy the FB.init("e92419eec6bfabc33da3e49b3b85c860"); ?? I tried but the profile pic along with the link doesn't appear.. Please help.

John
John

Dear DaddyDesign, thanx for this tutorial. It works for me but i have one question. I dont want to show faces. When i change connections to 0 then also the line above "x people like..." disappear. How can i change this? Thanks in advance. John

macdet
macdet

Great and thx for the infos. Thats what I am looking for +1

Nino
Nino

Thankyou so much, i've tried this and work perfectly come to my blog and see my own custom fan page that had created with this trick

Gouri
Gouri

Thanks daddydesign !!!! It works for me! Steps wise guidelines really made it easy for me :)

Paul
Paul

Awesome tips really useful thanks.

Stock Pictures
Stock Pictures

Thank you for this tutorial, quite helpful to many people stock-pictures.org/2012/03/how-to-simple-customize-facebook-like.html - Simple Customize Facebook Like Box with Gif Animation

Zey
Zey

Hello, thank you for this. its working well. My only problem is that i cant seem to be able to make it work with an embed font like you find on fontsquirrel, it seems like the css does not alow for the '@import url' or 'src: url'. Do you have any suggestions? Thanks

Igor
Igor

Works fine for now but I read on facebook that they will not support old API from january :(

Worke
Worke

HA! GOT IT! :) Just added on the beginning: html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, abbr, acronym, address, cite, del, dfn, font, img, ins, kbd, q, s, samp, strike, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, .reset { color:#FFFFFF; } .fan_box a{ color:#FFFFFF; } .fan_box a:hover{ text-decoration:none; color:#B1B594; Thanks again for everything! :) Cheers!

Yisrael Harris
Yisrael Harris

Unbelievable. I originally spent 4.5 hours to customize the css box in the first place. I then spent another 2.5 hours a few weeks ago when it stopped working. And now fb has trashed it altogether. That's 7 hours down the toilet. I've worked with Authorize.net, google, salesforce, paypal and many other third party integrations and fb is the worst by a country mile. I've actually begun telling my clients that for any fb integrations they want on their sites, I'm charging them by the hour.

daddydesign
daddydesign

It's not working for anybody right now. But I just heard that FB might be fixing it right now (crossing fingers)

daddydesign
daddydesign

We are in the dark right now, will keep you updated.

daddydesign
daddydesign

We just found out about this as well. we will keep you updated

daddydesign
daddydesign

We are not sure if they will allow this to come back or not..

daddydesign
daddydesign

Hi We have not tried using special fonts. Please let us know if you get it working..

daddydesign
daddydesign

we are looking into a new way on doing it.. keep checking back

Belut
Belut

it works for blogger too, i did it on my blogger site trikmurahan.blogspot.com

Goob
Goob

Yeah, Facebook has reopened the ticket after more people submitted bug reports. So there's at least a little hope!

Belut
Belut

ofc i will put your credit, my post about this tutorial still on draft.