How to Create Facebook Application Tabs

One of Facebook’s user interface components is the tab. Tabs are typically used to provide a list of links for pages that can be accessed within a single application. Because they are commonly used throughout Facebook, most users immediately grasp how to use tabs for application navigation. The following is an introduction explaining how to create tabs within your own Facebook application.

Facebook tabs are simple in that they can be created with a combination of just two unique FBML tags: fb:tabs and fb:tab-item. The former is considered a “parent” tag, within which the latter can be used to create individual tag items.

Basic Tabs Example

While your application may provide more or different links, most applications tend to include a link to the home canvas page, a friends canvas page used for promoting the social aspect of an application, and an invite page that can be used to invite friends to install the application.

Assuming the three filenames used to represent these three pages are “index.php”, “friends.php”, and “invite.php”, the following example demonstrates the simplicity with which tabs can be implemented.

Tab Alignment

Because the first two options — Home and Friends — are directly associated with application usage, having them appear on the left of the tab region seems relatively “natural” for most languages, which read left to right. However, the invite page might be considered more of an add-on to the application, as it is not necessarily required to be used in order for the user to make use of the application. As such, you may want to separate this tab item from the other tab items. Fortunately, the fb:tab-item tag includes an “align” attribute that allows developers to align tabs along the left- or right-hand side, as can be seen below.

Considering this, the previous example can be refined into something like the following.

Highlighting the Active Tab

What would be especially helpful to the user is a way to help them to remember what page they are on as they navigate through your application. While headings are certainly recommended, it would also be great if the tab for the current page could be highlighted. Fortunately, FBML comes to the rescue once again with a boolean “selected” attribute that can be defined within the fb:tab-item tag. By default, the selected value is set to “false”. However, by setting it to false, a tab is highlighted blue.

In order to accomplish this, the previous code example can be modified once again. The following example assumes that the user is on the application’s index page.

Dynamic Tab Highlighting

In order to reduce redundancy within application code, many developers produce headers and footers that can be added to any page within an application. Unfortunately, including FBML tabs in a header creates an immediate concern since the “selected” attribute can’t be changed within the current page’s code. As such, it is necessary to detect which page the user is viewing such that the appropriate tab can be highlighted.

While there are many ways of accomplishing this feat, the following is one example of how to implement this.

Written by Matt Huggins · Filed Under Tutorials