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 ...