How to Pimp your Facebook Fanbox Facepile and Pagestream | Miklas Njor

How to Pimp your Facebook Fanbox Facepile and Pagestream


Here is a tutorial on how to use CSS to style your Facebook fanbox (facepile/likebox) and pagestream.

Below the large image further down you will find a detailed description of how I rolled my own css blend to integrate Facebook with my site without loosing my overall graphical identity. Tested in Safari and Firefox.

Facebook ships its social plugins with their own css. This gives a uniform look to all of Facebooks widgets and tells a users that they are interacting with Facebook.

Keep that in mind when you dress up you box so your readers feel “safe”.

I will be covering how to “install” your own css to override the facebook-style and how to style most of the elements inside the box.

Customizing facebooks custom css

If you use the wordpress plugin Simple Facebook Connect you enter your CSS code via SFC’s admin page. There is a big box called “Fanbox Custom CSS”.

On the other hand if you use a stand alone social plugin picked up from the Facebook site here is an explanation of the code. You could of course just link to your site’s css file but since facebook uses it’s own style names a better choice is to create your own and save it on your site. Perhaps in your themefolder for easier maintenance.


If you are using the XFBML version you can insert a direct link ( to your css anywhere before


Here is an example:

If you use wordpress and save the css file to your themefolder you can write:

css="<?php get_bloginfo('stylesheet_directory'):?>/facestylesheet.css?1"

notice the ?1. That refers to the cached version of your stylesheet. It is important to change the number in the XFBML code every time you make changes (and not include ?1 in the css filename, mmmmkay) so facebook knows which version of the css you are referring to.


The iframe looks a bit more complicated but is easy enough. At the end of the long line

src="[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427 YOUR CODE HERE "

you add the link to your css file before the .

src="[...]Miklas-Njor-Fotografi%2F1 92308877480168&amp;[...]height=427&amp;"

Remember to substitute the ASCII characters:

…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…… => ……
…css=1 => …css%3D1

The iframe version doesn’t use ?1 but =1, so remember to change = with %3D (%3D1)

The end result will look something like this:

iframe src=";width=292&amp; colorscheme=light&amp;show_faces=true&amp;stream=true&amp;header=true&amp;height= 427&amp;" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:427px;" allowTransparency="true"

Okay. Now that the installation is out of the way. Lets get creative and style the box.

Detailed descriptions

Below the image I’ve written how I style my facebook fanbox.
how to css style facebook facebox facepile and pagestream

1 – The entire box

NOTE: This is the box itself. I’ve chosen to give it an orange border.
As a precaution I’ve included the a:link etc to make sure all links get styled as I want. Later we can change the styling of the links since the css for those items is loader later and therefore take precedence.

.fan_box .full_widget {border: 1px solid #F50;}
.fan_box .full_widget a:link {color: #F50;}
.fan_box .full_widget a:hover {color: #000;}
.fan_box .full_widget a:visited {color: #F50;}
.fan_box .full_widget a:active {color: #F50;}

2 – Connect header

.fan_box .full_widget .connect_widget_facebook_logo_menubar {background: #F50; border: 0;}

2A – Connect header facebook image

.fan_box .full_widget .connect_widget_facebook_logo span {background:transparent url(http://website/themfolder/img/facebook_link.gif) no-repeat ; display:block; height:17px; width:90px}
.fan_box .full_widget .connect_widget_facebook_logo:hover span {background-position:left -17px}

See also:  [:da]Javascript åbne/lukke funktion til dit Wordpress kommentar felt[:en]How to add collapsible comment form to your wordpress blog[:]

NOTE: I didn’t like the way how the blue edge around the facebook looked, so I downloaded it and gave it a new colour. The link might change but I got the image from here.

3 – Connect top

.fan_box .full_widget .connect_top {background: #fdd5c1; border-bottom: 1px solid #F50;}

3A – Connect top image

.fan_box .full_widget .connect_top img {padding: 0; margin: 0 1em 0 0; border: 1px solid #F50;}

3B – Connect top – Name (Miklas Njor Fotografi)

.fan_box .full_widget .connect_top .name_block {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block {color: #F50;}

3C – Connect top The Like Button

.fan_box .full_widget .connect_widget_like_button {border: 1px solid #F50; background: #f0f0f0;}
.fan_box .full_widget .connect_widget_like_button span {color: #f50;}
.fan_box .full_widget .connect_widget_like_button:hover {border: 1px solid #F50; background: #F50; color:#FFF;}
.fan_box .full_widget .connect_widget_like_button:hover span { color:#FFF;}
.fan_box .full_widget .connect_widget_facebook_favicon {background: url(http://website/themfolder/img/facebook_thumbsup.gif) no-repeat -1px -47px transparent;display:block;height:14px;padding:0 0 0 0;width:14px;position:absolute;left:-1px}
.fan_box .full_widget .connect_widget_like_button .liketext {background:url(http://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}

NOTE: Same as above I downloaded the image and changed it. I got it from here

4 – Pagestream – all stories

.fan_box .full_widget .page_stream {background-color: #f0f0f0; color: #222;}
.fan_box .full_widget .page_stream a:link {color: #F50;}
.fan_box .full_widget .page_stream a:hover {color: #000;}
.fan_box .full_widget .page_stream a:visited {color: #F50;}
.fan_box .full_widget .page_stream a:active {color: #F50;}

4A – Pagestream – single story

.fan_box .full_widget .page_stream .UIStory {background: #fff; padding: 6px; margin: 5px 0;}

.fan_box .full_widget .page_stream span.UIIntentionalStory_Names {margin: 0 0.5em 0 0;}
.fan_box .full_widget .page_stream span.UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:link {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:hover {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:visited {color:#222;}
.fan_box .full_widget .page_stream .UIIntentionalStory_Names a:active {color:#222;}

4C – ‘Det er bare så fedt at han svæver’

.fan_box .full_widget .page_stream span.UIStory_Message {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message a:link {color:#222;}
.fan_box .full_widget .page_stream .UIStory_Message:before {content:”\0022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”\0022″;}

NOTE: I am using the pseudo css styles :before and :after to insert the character before and after the text. You can use any character from this list of HTML entities. You can also use images. The pseudo classes don’t work in IE6 and IE7.

4D – Post Images

.fan_box .full_widget .page_stream .UIStory img {border: 1px solid #F50;}

4E – Post title – Kim Rahbek Svæver – Direktør Sticks n Sushi

.fan_box .full_widget .page_stream .UIStoryAttachment_Title {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:link {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:hover {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:visited {color: #F50;}
.fan_box .full_widget .page_stream .UIStoryAttachment_Title a:active {color: #F50;}

.fan_box .full_widget .page_stream .UIStoryAttachment_Caption {color:#666;}

4G – Bodycopy – Direktør for Sticks ‘n’ Sushi, Kim Rahbek Hansen, drikker…

.fan_box .full_widget .page_stream .UIStoryAttachment_Copy {color: #222;}

4H – Pagestream – borderbottom

.fan_box .full_widget .page_stream {border-bottom: 1px solid #F50; }

5 – Facepile

.fan_box .full_widget .connections {background-color: #f0f0f0;}

5A – Facepile text – x people like Miklas Njor Fotografi

.fan_box .full_widget .connections .connections_grid {margin-top: 0.8em;}

5B – Facepile – Facesgrid

.fan_box .full_widget .connections .connections_grid .grid_item {margin-right: 0.65em; color:#F50;}
.fan_box .full_widget .connections .connections_grid .grid_item a {color:#F50;}

That’s it – stop editing :)

There are plenty more items to style, but these I believe to be the most important. If you want to find more details about each element I recommend installing Firebug for Firefox.


    Ask Hybel

    Tak :)

    Miklas Njor

    Selv tak, Ask.

    Det er fedt at dele ud af sin viden, men endnu bedre at andre kan bruge det.

    crls gms

    I coudnt find where to change the 5A font color item, it inheriteded from my blog site. firebug tells me its from body.auto_resize_iframe.

    but im preety shure im too newbie to fix this, besides that your article is awesome, cover most of the parts needed to edit.

    keep it up



    Thanks for this, I’m struggling with the html elements of this:

    Yours uses a query string so its not quite the same.

    Also Firebug is pretty useless for finding iframe styles?


    I think it no more work.

    Miklas Njor

    Hej Doctortommorow.

    Which part is it that doesn’t work?


    The additional CSS doesn’t function. I wanted to get rid of the fan-box’s border. And the customizations mentioned here didn’t seem to work anymore.

    Miklas Njor

    Facebook keep changing settings alot. If you have firefox, install a plugin called firebug, that way you can see which names each element/tag has and write your CSS code accordingly.

Leave a Reply

Your email address will not be published. Required fields are marked *