Current Article
Industry Buzz
Social Networking
Featured Articles
Browse Content >
Back to Home

How to Style an Application Like Facebook

Bill Konrad
In this article we will explore how we can style our Facebook application to look and feel like an extension of the Facebook platform. We will examine colors, fonts, dimensions and a few common design patterns utlized by the Facebook platform in our quest to fit in with the crowd.

Introduction

So you have a great idea for an application, and you've developed your idea into a somewhat functional Facebook app. The only problem is, it looks completely out of place in the space Facebook has designated for your layout. Let's look at how we can change that.

Facebook invested a lot of money in creating the fluid graphic design work you see in front of you, but we won't have to. Using a few handy tools right in our browser you can figure out the majority of what's going on. I won't go into detail about this process, but we primarily used the Firefox extension FireBug and Chrome's built in inspection tools to ferret out the pertinent style attributes.

Let's look at the crucial elements of the stylesheet by category and then discuss how to implement them. We'll start with colour.

The Colours of Facebook

Facebook keeps their colour model simple, and it's an effective approach. General text ranges from light to dark grey (never black) and as far as I can tell, every link is in what I call "Facebook Blue". For background and border colours, Facebook uses a pair of light and dark variations on a single colour to create contrast.

Let's take a look at the full reference chart.

Facebook Blue

Facebook Blue #3b5998

Text Colours

Light Text #999999
Medium Text #666666
Dark Text #333333
Link/Anchor Text #3b5998

Grey Box

Background #f7f7f7
Border #cccccc

Blue Box

Background #eceff6
Border #d4dae8

Information Box

Background #fff9d7
Border #e2c822

Error Box

Background #ffebe8
Border #dd3c10


Facebook Typography

A little research revealed that Facebook uses the following set of fonts.

            body
            {
                font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
            }
            

As a quick note for beginners, this CSS states: First check the browser's ability to render text in Lucida Grande, then try Tahoma, etc.

Important Dimensions / Spacing

When developing a Facebook application there are a few dimensions that we must be aware of since Facebook determines where your content can be rendered. As a general note, Facebook uses a 10px padding in most of their elements, so for a consistent look and feel, this is probably a good practice in your application.

Application Canvas Page

Width: 760px
Maximum Height: N/A

Narrow Profile Box

Width: 200px (with 8px padding on each side)
Maximum Height: 400px

About Profile Box

Width: 500px (with 10px padding on each side)
Maximum Height: N/A

Icon Dimensions

Facebook uses 16x16 pixel icons throughout their application. For a similar look and feel with great expansion capabilities, check out FamFam's Silk Icons.
If you look closely in the next section, you'll see one of FamFam's icons used for the comment!

Ready-To-Use Facebook Components

We here at SocialSnippets decided that telling you about the CSS styling in Facebook wasn't quite enough. So we went ahead and created a fully functional set of styles that when dropped in your page allow you to instantly being creating some basic "Facebook Components". Here they are in all their glory.



General Purpose Grey Box

        
Recognize this general purpose grey box?


Recognize this general purpose grey box?


Common Blue Box

        
Recognize this common blue box?


Recognize this common blue box?


Information Box

        
Recognize this information box?


Recognize this information box?


Error Box

        
Recognize this error box?


Recognize this error box?


Facebook Tabs

        Facebook Tab #1
        Facebook Tab #2
        Facebook Tab #3
        Facebook Tab #4
        Facebook Tab #5
        


Facebook Tab #1 Facebook Tab #2 Facebook Tab #3 Facebook Tab #4 Facebook Tab #5



How to Use These Components

It's actually quite easy. The sample code above should get you started. Essentially, you just need to set the class of the div or anchor element to the corresponding class in the stylesheet. If you want to inherit the basic Facebook text styling, wrap your content with a div of class "fbbody".

Included below is the full stylesheet. Copy and paste it into either your external stylesheet, or directly into a style element in your markup.

Complete Facebook Component Stylesheet


            /* Default Facebook CSS */
            .fbbody
            {
                font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
                font-size: 11px;
                color: #333333;
            }
            /* Default Anchor Style */
            .fbbody a
            {
                color: #3b5998;
                outline-style: none;
                text-decoration: none;
                font-size: 11px;
                font-weight: bold;
            }
            .fbbody a:hover
            {
                text-decoration: underline;
            }
            /* Facebook Box Styles */
            .fbgreybox
            {
                background-color: #f7f7f7;
                border: 1px solid #cccccc;
                color: #333333;
                padding: 10px;
                font-size: 13px;
                font-weight: bold;
            }
            .fbbluebox
            {
                background-color: #eceff6;
                border: 1px solid #d4dae8;
                color: #333333;
                padding: 10px;
                font-size: 13px;
                font-weight: bold;
            }
            .fbinfobox
            {
                background-color: #fff9d7;
                border: 1px solid #e2c822;
                color: #333333;
                padding: 10px;
                font-size: 13px;
                font-weight: bold;
            }
            .fberrorbox
            {
                background-color: #ffebe8;
                border: 1px solid #dd3c10;
                color: #333333;
                padding: 10px;
                font-size: 13px;
                font-weight: bold;
            }
            /* Content Divider on White Background */
            .fbcontentdivider
            {
                margin-top: 15px;
                margin-bottom: 15px;
                width: 520px;
                height: 1px;
                background-color: #d8dfea;
            }
            /* Facebook Tab Style */
            .fbtab
            {
                padding: 8px;
                background-color: #d8dfea;
                color: #3b5998;
                font-weight: bold;
                float: left;
                margin-right: 4px;
                text-decoration: none;
            }
            .fbtab:hover
            {
                background-color: #3b5998;
                color: #ffffff;
                cursor: hand;
            }
        

Conclusions

While the research that went into this article was quite extensive, it in no way encompasses every style used in the Facebook platform. If you enjoyed the article, please comment briefly and say what you would like to see more of in the future. Maybe a sequel is in the cards?

And, as always, if you have a second, Digg the article and share the wealth!

Share Article

User Comments

Gravatar
HenryJ
11/10/2008
This is a great article. It is crucial for your application's users to feel like there are still in Facebook.
Gravatar
Tim
11/12/2008
So I have created the css file from the source code above, but how do I get this css file to load into a Facebook canvas page? Obviously I know how to do this in HTML, but in a Facebook app we don't get to specify body tags and link rel's and such.
Gravatar
Bill Konrad
11/13/2008
Tim,

You can just use a <style> element somewhere in your .aspx page. Place the CSS from the article into that element and you will see that the styles are applied to your page.

Let me know if that doesn't clarify it fully for you.
Gravatar
MichaelM
11/20/2008
Thanks, the css was the best part for sure. Thanks again.
Gravatar
periklis
11/22/2008
cool!
Gravatar
Steve Trefethen
11/22/2008
I'd add these as well:

h1, h2, h3, h4, h5{font-size:13px;color:#333;margin:0px;padding:0px;}
h1{font-size:14px;}
h4, h5{font-size:11px;}
Gravatar
sean
12/24/2008
Hey not bad, used this as a reference all night long. Thanks!

Facebook uses a lot of deeply embedded classes and ids that can be called out using your css.

After you've added a facebook feature to your site, download the Firefox addon: Web Developer Toolbar
After installing the addon, click the Information tab on your new toolbar then click > Display Element Information

Instantly your mouse can hover over every div box, table cell or paragraph tag highlighting its area and pulling every single css attribute without having to digg into ANY css documents. I used this to instantly figure out properties that facebook was rendering in order to style them.

Don't remember to put the !important after your styles!

example:

a.FB_Link
{
color:#3b5998 !important;
}
Gravatar
Vishal Gadkari
2/6/2009
Its a gr8 article. Very useful to a new comer and also for professional. Best part was the css. Vishal Gadkari Visit : http://vishalgadkari.com/blog/
Gravatar
David Stembridge
2/14/2009
Bill,
You mentioned "You can just use a <style> element somewhere in your .aspx page. Place the CSS from the article into that element and you will see that the styles are applied to your page."

Are you actually referring to a page within facebook? Where exactly is the .aspx page?

Thanks!
Gravatar
Bill Konrad
2/15/2009
David,

In this article as well as the article, "How to Use the Facebook Developer Toolkit", we are referring to a set of self hosted pages. The Facebook platform shows the content from our pages within it's platform, but the pages are our own. If you are not using .NET, then this applies to any HTML page you are coding. All that I mean is, if you create a <style> ... </style> in your markup and include my CSS, you can easily start styling your content. Just set the class attribute to the correct class and be on your merry way.

Hope that helps.
Gravatar
Ehsan
3/17/2009
hi

Good Example i like it

but

please attached .php files for user convenient.

Thanks

Gravatar
sawar
3/21/2009
yah, man it is great hope i would use it in my page and thanks to u for your great contribution here
Gravatar
Nice
3/23/2009
Hi,
how to use facebook java script that use while composing message to a friend.
i mean auto complete feature and then rectangular border against a name.
Gravatar
lkm
4/5/2009
klmwdlkmc
Gravatar
nilofar
4/9/2009
i love facebook!
Gravatar
Ali
5/1/2009
This a great article, I have book marked it and saved it as a vital tool, indeveloping apps. I am working on an app right now, I was at first considering making my own box design, but instead I decided it would be better to just make it "part of facebook". Great article and much kudos.
Gravatar
Madchatter
5/18/2009
Thanks I own a chat site that is in the adult niche (chatropolis.com) and am going to add some of what I like about Facebook to our site. Most of what facebook does is way to intimate for our operation but some things would work out nicely. The article was of great help but will need to be modified to fit our color scheme.
Gravatar
Rob
5/20/2009
Just wanted to say thank you for the effort! You saved me some time.
Gravatar
Pranto
5/26/2009
This one of the greatest resources for me
Gravatar
asif
5/26/2009
Thank you. Very good thing to store.
Gravatar
Ludvig
6/10/2009
Nice work! I also recommend checking out Facebook's own page of styles that they use:
http://wiki.developers.facebook.com/index.php/Facebook_Styles
Gravatar
Wasif Laeeq
6/14/2009
Cool...
This will also help http://wiki.developers.facebook.com/index.php/FBML

Thanks
Gravatar
Sonam Kumar
6/22/2009
I truly value your hardwork. Awesome!!
Gravatar
Muhammad Usman Arshad
7/8/2009
its very helpful and helped me a lot, thanks to share.
keep it up, all the best.
Gravatar
Shelley
7/9/2009
very helpful
Gravatar
Jeremy
7/24/2009
Thank you for putting in the time to create this article. You just saved this developer tons of time tinkering with stylesheets!
Gravatar
A bit clueless
7/27/2009
I'm just trying to add some cool HTML functionality to my facebook page, but cannot understand how to add the HTML code to the page...I know it's probably a stupid question, but how does one do that? So for instance, how can I add the HTML code above to my facebook page, or if I cannot do that, how can I add some HTML code to my facebook page to create some cool tabs and such on my page?
Gravatar
Franco
8/28/2009
Great!!!

Good job, thanks!!!.
Gravatar
NamTH
8/31/2009
Thanks :)
Gravatar
Shoaib
9/3/2009
Thanks for another great article!!
Gravatar
oplu budakmotor
9/16/2009
Thank you sir!

it's helpfull for me :)

i use this at :
http://apps.facebook.com/royalqueen/
Gravatar
david
9/23/2009
how about button styles?
Gravatar
b3ck
10/22/2009
For more Facebook CSS styles please visit:

http://wiki.developers.facebook.com/index.php/CSS_Tips_and_Tricks
Gravatar
Huzoor Bux
10/24/2009
Good Sharing..........

Keep it up...............
Gravatar
Dima
10/30/2009
thanx! very useful for me!
Gravatar
arief exalt to coituz
11/12/2009
sia teh gebloh
Gravatar
flahkoh
11/20/2009
Anyone find guides to character count limits for headers and such?
Gravatar
Rob
12/3/2009
Just another voice saying "Thanks" - the CSS sheet is going to be really helpful.
Gravatar
zeeant sid hiken
12/15/2009
ju
Gravatar
Ali
12/21/2009
I really like this... its help us alot :D
Gravatar
mary rose galupo
12/23/2009
put to my email ad. an backround
Gravatar
Elliott Giles
1/1/2010
I have a question if anyone can help answer this. I started a live stream comment box at www.yffa.net/3.html but for some reason I can't seem to add comments to the box. If anyone can take a look at this and give any input I'd really appreciate it.
Gravatar
Nuri
1/7/2010
Good works, thanks!
But i really need "action" and "change status" button styles... Someone know?
Gravatar
Kamo
1/10/2010
Hello everyone.

I'm starting using facebook so if anyone can help i'll be gratefull.

Does anybody know how to do facebook poll by using app id 60082431253?

Something like that:

http://www.facebook.com/audi?v=wall&ref=search#/audi?v=app_60082431253&ref=search

Thanks.
Gravatar
simoune
1/26/2010
please attach a attractive background to my profile please.
Gravatar
izlesene
1/29/2010
Good works, thanks!Does anybody know how to do facebook poll by using app
Gravatar
ghprod
2/7/2010
Hi,

thanks for nice css .. i've use your css in my apps

http://apps.facebook.com/smileylover/

regards
Gravatar
Scott Zagarino
2/12/2010
Best resource yet on all things Facebook. Thank you.
Gravatar
John
2/16/2010
Hi everyone.

I'm starting using Facebook so if anyone can help i'll be gratefull.

Does anybody know how to do facebook poll by using app id "60082431253"?

Something like that:

http://www.facebook.com/adidasfootball?ref=ts#!/adidasfootball?v=app_60082431253&ref=ts

Regards.
Gravatar
ashwini nayak
4/2/2010
really this is very helpful.but i think some javascript code should also attach with it.
Gravatar
dave
4/6/2010
I LOL'ed at "extensive research". Anyone could find these styles in 3 seconds by opening Firebug and examining each element.

Just sayin.
Gravatar
Craig Leontowicz
4/6/2010
Thanks - Super easy to follow.
Gravatar
Nick
4/6/2010
Good article. Thank you!!!
Gravatar
aShocka
4/6/2010
thank you very much. i really needed an article like this right now :)

http://www.ashocka.co.cc/
Gravatar
Xander
4/6/2010
Sweet information, thank you for sharing.
Gravatar
c0de
4/7/2010
Big Thx! Really have need this at the moment!
Gravatar
Greg Althoff
4/9/2010
Nice, I needed something like this to refer to, grrreat job.
Gravatar
Abhishek BANERJEE
4/15/2010
You can just use a &lt;style&gt; element somewhere in your .aspx page. Place the CSS from the article into that element and you will see that the styles are applied to your page.

Let me know if that doesn't clarify it fully for you.


REGARDING THIS POST.
i HAVE USER A JSP PAGE WHERE I WANT TO INCLUDE A JSP PAGE.BUT ITS NOT TAKING THE STYLES.CAN U PLS HELP ME OUT.
Gravatar
agiboire
4/15/2010
You have to put the style between the body tags. Head tags are not available in facebook app.

@tchaOo°
Gravatar
Arun
4/24/2010
Hi!

Super!
Thanks. It really helped me.

Gravatar
Surya Adi Sapoetra
4/28/2010
I Really like this article.. ;)
Gravatar
Oren Yomtov
5/7/2010
Thanks a lot! this really helped me.
Gravatar
A. Hariri
5/15/2010
Excellent CSS Reference.

Thank you!
Gravatar
Adam
6/1/2010
Thank you for a great article. May i know what font are they used for the Like button? Thank you.
Gravatar
David Niry
6/9/2010
This is great. Thanks a lot !
Gravatar
????
7/1/2010
i love it....<3
Gravatar
bladezone™
7/10/2010
Nice. :)
Gravatar
David Haywood Smith
7/14/2010
Here's how to style buttons like Facebook:
http://forr.st/~iAo
Gravatar
aaaa
7/15/2010
aaaa
Gravatar
xiu
7/21/2010
thank you & it's useful
Gravatar
Cindy Cane
8/15/2010
Thank you for great article..

PS: If you want more E-books,videos,software,applications and digital products, visit http://yourmarketplaces.net
Gravatar
jimmy
8/23/2010
i like turtles.
Gravatar
Diego
9/21/2010
Cool! This is just what I needed and I'll use it a lot. Thank you.
Gravatar
seyed
9/22/2010
Thanks, this was extremely helpful.
Gravatar
Bojan
9/26/2010
Mislim programeri FACEBOOKA trebaju da naprave aplikacije ili postavke tako da sami korisnici f-racuna mogu po zelji da mijenjaju fontovr,boje,teme i ostalo sto ide uz njih .

Hvala
Gravatar
Anj
9/29/2010
Thanks for this post. :)
Gravatar
IMD
10/8/2010
so usefull article... thanks !!!!!!
Gravatar
seng
10/15/2010
Xcellent. I like it so much.
Gravatar
Asif Siddiqui
10/18/2010
Thanks, this was extremely helpful.
Gravatar
otobong candid
10/19/2010
wow, this is awesome!!
Gravatar
sondev
11/29/2010
thanks a lot
Gravatar
Buy Facebook Apps
12/6/2010
Facebook Connect uses latest and advanced technology for porting which requires expert technical help.

Contact Now:
http://www.socialcubix.com
Gravatar
iPad Developer
12/6/2010
Excellent Example - how to create Application style like Facebook

http://www.mobilecubix.com
Gravatar
Feliks Leybovich
2/27/2011
Excellent Article - i loved
AWESOMMEE!!!!!
Gravatar
kamran
2/28/2011
Thanks , this article was really helpful.
Gravatar
bandi
3/8/2011
nice article...
Gravatar
mustapha
3/10/2011
thanks
Gravatar
bow
3/16/2011
thanks, very appreciate this
Gravatar
Sewa mobil
4/23/2011
Nice artikel. But how to learn about FBML form beginning
Gravatar
Bob
6/2/2011
Anyone has a html file for this css?
Gravatar
tisu
6/13/2011
Great tutor thanks
Gravatar
COBAY
9/2/2011
This is world best tip :)
thank u sir.
Gravatar
mirekburn
9/27/2011
Amazing article. I'm looking for some CSS for my application and special. Really fascinated with facebook's proportions.

mirek from http://www.onesmallthingtodo.com
Gravatar
cherry
10/17/2011
British reporters are known for doing almost anything to get a Mulberry Bags. But reports that a newspaper secretly listened to telephone messages of murdered schoolgirls and other private citizens have produced Mulberry Handbags and anger.
On Friday, British police arrested Andy Coulson, former editor of Mulberry Bag Britain's best-selling newspaper, News of Mulberry Outlet the World. The investigation led him to Mulberry UK Sale resign in January as communications director to Prime Minister David Cameron.
The arrest came in a widening investigation of Mulberry UK telephone hacking. Other accusations include paying police for mulberry shoulder bags information on stories. The Reuters news agency reported that Mr. Coulson was released on Mulberry Bag UK until a date in October.
Prime Minister Cameron promised Men's Mulberry Bags Friday that a judge will lead a full public inquiry into Women's Mulberry Bags the case after police complete their investigation.
DAVID CAMERON: "Murder victims, terrorist victims, families who have lost loved ones, sometimes defending our country, that these people could have had their phones hacked into, in order to generate stories for Mulberry Bags Mulberry Handbags Mulberry Bag Mulberry Outlet Mulberry UK mulberry bayswater bag Mulberry Alexa Bag, is simply disgusting."
Gravatar
kp
11/16/2011
THANK YOU!!!
Gravatar
Loan Myanmar
11/17/2011
Goblok
Gravatar
Rachan
12/13/2011
Very useful for me :D thank you.
Gravatar
Reddy
2/13/2012
What are the diamensions of canvas page
Gravatar
youiswho
2/29/2012
This went above and beyond what I was looking for, you have saved me soo much time. Thank you.
Gravatar
clyde@2degreessocial.com
3/16/2012
awsum
Gravatar
musab
3/21/2012
awesom ,grt idea
Gravatar
Angela
5/7/2012
This is gonna great and i like this thing, happy with this.
http://www.socialcubix.com
Gravatar
Ray
5/10/2012
nice :D


thank you very much God Bless :D





Gravatar
maulana
5/14/2012
like is me
Gravatar
sandhanamurali
11/14/2012
it was nice and clear !....keep update such a good things.
Gravatar
serdar güner
1/12/2013
Very useful for me :D thank you.
Gravatar
sumit
5/17/2013
nice article...:)
Gravatar
abc
5/27/2013
good one !
Gravatar
kit
7/15/2013
nice one! i like it.
Gravatar
Apurba
8/3/2013
Wounder-full, You saved my time..
Gravatar
stan
10/29/2013
Buttons can be find there, I use this css + this one http://nicolasgallagher.com/lab/css3-facebook-buttons/?#button my website looks great.
Gravatar
kasia
11/7/2013
Thanks.
I'll use this. :)
Gravatar
ajkdvmlh
12/22/2013
1
Gravatar
sabirpaints@gmail.com
3/17/2014
Great Dude, You are awesome.
Gravatar
sabirpaints@gmail.com
3/18/2014
Not only facebook apps, I'm going to make a desktop application and I'll use your provided colors in my desktop application.

Thank you, You save my lot of time.
Gravatar
Pasztor Mate
4/21/2014
This is a really good style! Thanks!
Gravatar
SANJAYSINH SOLNAKI
7/14/2014
ITS VERY HELPFUL............
Gravatar
isuru
8/12/2014
very useful article ....thanks
Add a Comment

Name

Email Address

1 + 1 = ?

Comment










iphone application development konrad group
android application development konrad group
windows phone 7 development konrad group