Question

I have to create a fb application, I never did one before but I thought the best thing to do would be to design it as similar to facebook as possible so it would integrate well. I already have this code for messages and notifications:

var dialog = FB.Dialog.create({
content: '<div style="color: rgb(255, 255, 255); background-color: rgb(109, 132, 180); font-size: 15px; font-weight: bold; padding: 5px; text-align: left;">Error</div><p style="margin:10px 15px;">Message</p><div style="color: rgb(0, 0, 0); background-color: rgb(242, 242, 242); padding: 8px; text-align: right; border-top: 1px solid rgb(198, 198, 198);height:23px;"></div>',
closeIcon: true,
onClose: function() {
    FB.Dialog.remove(dialog);
},
visible: true
});

I will have to create things like a friends list, and i was thinking. Should I just copy the style of facebook or is there any library to get that kind of styles? Or if not, what are the files I should be looking at on fb to copy the styles?

Answer 1

Before you go ahead and copy Facebook’s look, be aware of any legal implications

From WPCandy:

An Indonesian blogger, Ainun Nazieb, is in a little bit of hot water.
He created a WordPress theme based off the pre-timeline Facebook
profile design. In fact, it’s almost an exact clone . . . He currently
has 3 charges filed against him, two criminal and one civil. The
maximum penalty for one of the charges is . . . about $222,346 USD.

If you want to go ahead, This website provides a sample stylesheet you can use that uses the same colors as Facebook.

If you want to get more nit-picky, you can check out Facebook’s CSS files. Depending on your browser or developer toolkit, the way you would get ahold of these would vary. Here’s how to do it in Chrome:

On Chrome’s Developer Tools tab (CTRL + SHIFT + I), go to Resources
(you may have to enable Resource tracking on that page), and click on
the sub-tab Stylesheets. That will show all css files loaded by that
page.

(see How to see the .css files loaded in a page in Google Chrome?)