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.
XFBML
If you are using the XFBML version you can insert a direct link (http://example.com/facestylesheet.css) to your css anywhere before
">
Here is an example:
css="http://example.com/facestylesheet.css?1">
If you use wordpress and save the css file to your themefolder you can write:
css="/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.
iframe
The iframe looks a bit more complicated but is easy enough. At the end of the long line
src="https://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&[...]height=427 YOUR CODE HERE "
you add the link to your css file before the “.
src="https://www.facebook.com/plugins/likebox.php?href=[...]Miklas-Njor-Fotografi%2F1 92308877480168&[...]height=427&css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1"
Remember to substitute the ASCII characters:
…css=http://miklas… => …css=http%3A%2F%2Fmiklas…
…njor.com/?sfc-fanbox-… => …njor.com%2F%3Fsfc-fanbox-…
…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="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww. facebook.com%2Fpages%2FMiklas-Njor-Fotografi%2F192308877480168&width=292& colorscheme=light&show_faces=true&stream=true&header=true&height= 427&css=http%3A%2F%2Fmiklasnjor.com%2F%3Fsfc-fanbox-css%3D1" 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.
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(https://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}
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.
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 span.name a:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block:link {color: #F50;}
.fan_box .full_widget .connect_top .name_block span.name:link {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(https://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(https://website/themfolder/img/facebook_thumbsup.gif) -1px -33px no-repeat}
NOTE: Same as above I downloaded the image and changed it.
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;}
4B – User link – Miklas Njor Fotografi
.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:”�022″; }
.fan_box .full_widget .page_stream .UIStory_Message:after {content:”�022″;}
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;}
4F – Websitelink – miklasnjor.com
.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.