Facebook Cookbook - Jay Goldman [44]
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