Facebook Cookbook

The Facebook User Interface Widgets

Problem

I really want my app to fit in on Facebook Platform, so I’d like to use as many of Facebook’s native widgets in my interface as I can. Is there a style guide or widget library somewhere?

Solution

Unfortunately, Facebook hasn’t published any official Human Interface Guidelines, so you’re somewhat on your own. Luckily, they have provided a handful of FBML tags that will render standard controls, which means you don’t have to worry about styling them now or changing them later when Facebook updates their look and feel. For more about why you should use their user interface (UI) widgets, see Facebook’s Global User Interface.

Discussion

First off: what’s a widget? From Wikipedia (http://en.wikipedia.org/wiki/GUI_widget):

In computer programming, a widget (or control) is an element of a graphical user interface (GUI) that displays an information arrangement changeable by the user, such as a window or a text box. The defining characteristic of a widget is to provide a single interaction point for the direct manipulation of a given kind of data. Widgets are basic visual building blocks which, combined in an application, hold all the data processed by the application and the available interactions on this data.

There are a whole bunch of UI widgets that you can easily implement with simple FBML tags, as well as a bunch of UI conventions that you should follow but that you’ll have to code on your own. This is by no means an exhaustive list, so if you don’t find what you’re looking for here, take a browse through the FBML Wiki page (http://wiki.developers.facebook.com/index.php/FBML), or just go through the Facebook site and then take a look at its HTML/CSS.

Simple UI widgets

Thanks to the magic of FBML, implementing the following on your own is often as simple as inserting a few tags:

Page headers

Page headers (see Figure 4-9) can include links (or actions) across the top, a Help link, your app’s name, and a Create button. These are all nested inside an fb:dashboard tag, which is explained in Dashing Dashboards: Heading Your App Pages.

Figure 4-9. Facebook Photos header

Tabbed navigation

You can include as many tabs as you’d like, and full support is included for highlighting the current tab (see Figure 4-10). More information is in Tabs Ahoy!.

Facebook has adopted an informal UI convention related to the use of left- and right-aligned tabs in some of its apps. Generally speaking, left-aligned tabs are used to sort types of information, while right-aligned tabs are used for actions, as in Figure 4-11.

Figure 4-10. Facebook Photos tabs

Figure 4-11. Facebook Inbox with left- and right-aligned tabs

Errors and messages

It’s particularly important to be consistent when delivering information to users, since they’ll be used to seeing this kind of thing reported by Facebook. In order, from top to bottom, are fb:error, fb:explanation, and fb:message (see Figure 4-12), which are all documented in Errors, Explanation, and Success: Displaying Messages (Oh My!).

Figure 4-12. Facebook errors, explanations, and messages

UI conventions

Facebook has adopted some UI conventions that aren’t available as simple FBML tags, but are worth following anyway:

Paging

The convention here is to list on the left the number of objects on this page and the total number of objects, accompanied by a link back to an index (if applicable), with paging controls on the right and the current page indicated by an underline (see Figure 4-13). You can replicate this in your app by taking advantage of the fact that Facebook hasn’t set a namespace on its own CSS classes, allowing you to use them, too:

<div class="bar clearfix summary_bar">
    <ul id="pag_nav_links" class="pagerpro">
        <li class="current">
            <a>1</a>
        </li>
        <li>
            <a href="/thingy.php?page=2" title="Page 2">2</a>
        </li>
        <li>
            <a href="/thingy.php?page=2" title="Page 2">next</a>
        </li>
    </ul>
    <div class="summary">
        <h4>
            Blobs 1 - 20 out of 24
            <span class="pipe">|</span>
            <a href="/stuffs.php?id=12345">Back to Jay's Stuff</a>
        </h4>
    </div>
</div>

I’ve made one small change from Facebook’s code: it’s generally a bad idea to have a page link to itself because it’s not the expected behavior for links, so I’ve removed the href from inside the <a> around the current page.

Figure 4-13. Paging in Facebook Photos

Sidebars

Your home page on Facebook includes a sidebar with very subtle but effective divisions into sections (Figure 4-14). The sidebar is a 186-pixel-wide div floated right. The background on the sidebar is achieved by setting the entire Canvas’s background to http://facebook.com/images/newsfeed_line.gif, which is a 646-pixel-wide and 1-pixel-tall image set to repeat vertically. Apply a sidebar_item_header class to your headers:

sidebar_item_header
    background:#E9E9E9 none repeat scroll 0% 0%;
    margin:0pt 5px;
    padding:3px 5px 4px;
    text-align:right;
}

Figure 4-14. Facebook Home sidebar

Canvas Footers

The Footer Bar runs across the bottom of Canvas pages and provides actions (usually contextualized to the current user: the earlier example is from the bottom of your Profile page; see Figure 4-15). You can replicate these easily with some simple HTML:

<div id="footerBar">
    <ul>
        <li><a href="/thingy.php">Thingy!</a></li>
        <li><span class="pipe">|</span></li>
        <li><a href="/stuffs.php">Stuffs!</a></li>
        <li><span class="pipe">|</span></li>
        <li><a href="/dudes.php">Dudes!</a></li>
    </ul>
</div>

and some equally simple CSS:

div#footerBar {
    background: #F7F7F7 none repeat scroll 0% 0%;
    border-top: 1px solid #DDDDDD;
    margin: 0px;
    overflow: hidden;
}
div#footerBar ul {
    list-style-image: none;
    list-style-position: outside;
    list-style-type: none;
    margin: 0px;
    padding: 10px 20px 25px;
}
div#footerBar li {
    float: left;
    line-height: 18px;
    padding: 0px 2px;
}

Figure 4-15. Facebook Profile footer