How to Create Application Tabs
November 19, 2007
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.
<fb:tabs> <fb:tab-item href="http://apps.facebook.com/yourapp/index.php" title="Home"/> <fb:tab-item href="http://apps.facebook.com/yourapp/friends.php" title="Friends"/> <fb:tab-item href="http://apps.facebook.com/yourapp/invite.php" title="Invite Friends"/> </fb:tabs>
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.
<fb:tabs> <fb:tab-item href="http://apps.facebook.com/yourapp/index.php" title="Home"/> <fb:tab-item href="http://apps.facebook.com/yourapp/friends.php" title="Friends"/> <fb:tab-item href="http://apps.facebook.com/yourapp/invite.php" title="Invite Friends" align="right"/> </fb:tabs>
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.
<fb:tabs> <fb:tab-item href="http://apps.facebook.com/yourapp/index.php" title="Home" selected="true"/> <fb:tab-item href="http://apps.facebook.com/yourapp/friends.php" title="Friends"/> <fb:tab-item href="http://apps.facebook.com/yourapp/invite.php" title="Invite Friends" align="right"/> </fb:tabs>
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.
<?php $page = basename($_SERVER['PHP_SELF']);?> <fb:tabs> <fb:tab-item href="http://apps.facebook.com/yourapp/index.php" title="Home" <?php if ($page == 'index.php'):?>selected="true"<?php endif;?>/> <fb:tab-item href="http://apps.facebook.com/yourapp/friends.php" title="Friends" <?php if ($page == 'friends.php'):?>selected="true"<?php endif;?>/> <fb:tab-item href="http://apps.facebook.com/yourapp/invite.php" title="Invite Friends" align="right" <?php if ($page == 'invite.php'):?>selected="true"<?php endif;?>/> </fb:tabs>
Comments
24 Responses to “How to Create Application Tabs”
Got something to say?
As usual, another great and simple tutorial by Matt to help developers get situated and on their feet with Facebook.
Note that tabs work well with fb:header and fb:action tags (and is popular combination amongst devs)
Thanks for stopping by, Roj. I was actually planning to have my next tutorial cover fb:header for those who are interested. :)
Hi Matt - thanks for your help on the facebook forums today - this tutorial is brilliant and I intend to spend more time looking through your others!
Cheers
Simon
Hi Matt, thanks for the great tutorial. It’s very easy to understand and implement.
I’m looking forward to the fb:header tutorial.
Hey Matt,
Thanks for lovely tutorial dude. I just had info on this link from one of my colleague. I wasn’t familiar with FB tags. But your tutorial really helped me know that its easy task. By the way, does the browser directly reads or do we need any external files?
Keep rocking dude and thanks again.
Thanks Abhi, I’m glad this tutorial was of use to you. The browser never sees the fb:tabs or fb:tab-item FBML. Instead, the Facebook Platform parses these elements, rendering them as browser-readable HTML. The HTML output ends up being something like this:
<div class="left_tabs"> <ul id="toggle_tabs_unused" class="toggle_tabs clearfix"> <li class="first"> <a class="selected" href="http://apps.facebook.com/yourapp/">Home</a> </li> <li> <a href="http://apps.facebook.com/yourapp/friends.php">Friends</a> </li> </ul> </div>Matt, thanks so much for this simple and useful tutorial. After a long night creating my first app, it was nice to find something so simple to add to it.
[…] FBML and FBJS Facebook has its own markup language called FBML. This is an extension of standard HTML, and is easy to learn. Using F BML makes it quick and easy to add page elements, such as tabs, to your facebook appliation which conform to the standard look and feel: http://facebook-developer.net/2007/11/19/how-to-create-application-tabs/. […]
[…] HTML, and is easy to learn. Using FBML makes it quick and easy to add page elements, such as tabs, to your facebook application which conform to the standard look and […]
Hi Matt, how about a way to have a grey-ed out tab? For an option not applicable to a given page? This nav method is used within FB’s own Group application.
Awfully nice to have…
?
Rich
Hi Rich — I agree that this would be a nice addition to the fb:tab-item tag. Unfortunately, there is not an attribute that allows this. However, Facebook’s Bugzilla does include an enhancement requests section where you can submit your idea. Hope this helps!
Hi nice tutorial….can also post a tutorial on how to make a drop down option menu or even a tutorial on adding select one option menu.
pls reply !!i m waiting for ur reply !
if you are using CakePhp
use
$page = $this->params[’controller’].’/’.$this->params[’action’];
instead of
$page = basename($_SERVER[’PHP_SELF’]);
Matt … Thanks a lot dude … your tutorial is really very helpfull :)
Seriously helpful , thank you !!!
Hey Matt,
Very nice example. I’ve implemented this in a JSP and works great.
Thanks!
A great tutorial !! But, how to have a tab which opens in new window?
Is it possible to create a sample page in facebook using FBML , if it is possible how to create. any one help me plz.
Thanks, helped me a LOT!, thanks.
Great tutorial, Matt — but can I ask: how do I create a button on the canvas page so my Facebook users can easily put my application into a tab?
Thanks Matt…but could you give us the code of a full simple page (with all the header needed, with all the include & initialization needed like include_once ‘facebook.php’;
& $facebook = new Facebook($api_key, $secret);.
Then I would just have to change my api_key and secret variables, to upload the php page on my server to finally see these tabs displayed.
Regards,
V
i can not add tab in my application … please … i am useing wamp server…
This is great, but I must be doing something wrong. When I select a tab, it does not stay inside facebook. It jumps out to my website page and leaves the application (just displays the page).
Great little tutorial and a nice workaround for using dynamic tab selection with php global variables. I will using something similar for my app!