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
41 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!
Thanks a lot Matt :)
Thanks for you tutorial.
But I have a problem, When I use tab in a FMBL page.
Exemple here: http://www.facebook.com/pages/Canyoning-Via-Ferrata-Escalade-Ski-hors-piste-wwwVertical-Aventurecom/213728598764?v=app_4949752878
I have build the FBML code with tabs and a facebookapi per each tab.
But when I click on a tab the applicationapi appers in a new window…But I would like the facebookapi can open under the tabs.
Can you help me for that? thanks a lot.
Thanks
Mathieu
I need even more direction. Where do we paste this code? Does it somehow go into are facebook page? I use the zoo game application and want to separate the publishing from the game from my other facebook news. I used the privacy settings, and set it for custom, only zoo players, but I also allow the application to publish and everyone sees it.
plese sample of fb drobdown tab in fmbl
Thank you for the tutorial. Can you assist me? When a user clicks a tab can it be opened in a new window? If so, how would that be coded? Thanks in advance.
This turorial is just great!
I spent hours yesterday as I am trying to put together my first Facebook fan page app, and I had no cluse as to how I would create the tab.
I just found this website and hopefully there are other tutorials clearly written like this one. This would make my life a lot easier!
Thanks!
I’m looking at this for the very first time, starting with the assignment to look into how tabs are created. I see that you have to set up a facebook (PHP) app before anything else; but what I don’t see is the connection between the app and the FBML tags. Are the tags an xml-file reference within the FB code on the main application page? (What file or in what code do you put these tags?)
Thanks!
Facebook Developer…
Facebook Marketing Strategy There are 2 ways to create marketing/advertising on Facebook: Facebook Pages using FBML \ this is a static HTML where components consists of HTML tags and limited number of FBML tags…….
Matt, I have the same question as Mathieu on 12/11/09, “… when I click on a tab the application appers in a new window…but I would like the facebookapi to open under the tabs. Can that be done?
Thanks
Janet
plz naman oh .. wag ninyo e delete ung application tabs xa my stuff co plzz…
its easier if you use 3rd party custom tab applications. Here’s one and its free. i use it coz you can change backgrounds and stuff. pretty neat.
Hi,
I am not able to link the profile tabs with their respective target hrefs i.e when I click on the tabs, I get blank page. Please let me know, how to get rid of this problem
Here is way to get the page from fbml - http://apps.facebook.com/fbmktup/get_pages_from_fb_apps
What a load of bollox.I pointed out that there is no tab to show BandPage,Reverbnation for Music/Bands.The worst thing I ever did was to change to your “new” format.Time I started a Band/Music/Social Network methinks.Yourselves & MySpace have fucked up.
I still confuse, where should I write this codes? is it for static fbml? or create those tabs on apps???
Excellent post. I was checking continuously this blog and I’m impressed! Extremely helpful info specially the last section :) I maintain such information a lot. I used to be looking for this particular information for a long time. Thanks and good luck.
My partner and I stumbled over here by a different website and thought I
may as well check things out. I like what I see so i am just following you.
Look forward to going over your web page again.