Browse > Home / Tutorials / How to Create Application Tabs

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.

Advertisement

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.

fb:tabs Basic Example

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.

fb:tabs Align Right Example

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>

Advertisement

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.

fb:tabs Selected Example

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>
Related Articles

Share on Facebook      Share This

Written by Matt Huggins · Filed Under Tutorials 

Comments

39 Responses to “How to Create Application Tabs”

  1. Roj on November 19th, 2007 10:01 am

    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)

  2. Matt Huggins on November 19th, 2007 10:06 am

    Thanks for stopping by, Roj. I was actually planning to have my next tutorial cover fb:header for those who are interested. :)

  3. Simon Pearce on November 22nd, 2007 8:07 am

    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

  4. Stanley on November 25th, 2007 3:16 am

    Hi Matt, thanks for the great tutorial. It’s very easy to understand and implement.
    I’m looking forward to the fb:header tutorial.

  5. Abhi on November 27th, 2007 3:07 pm

    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.

  6. Matt Huggins on November 27th, 2007 3:56 pm

    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>
  7. Jim on December 9th, 2007 10:51 am

    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.

  8. Facebook App Development « Kiyop’s Weblog on December 12th, 2007 5:46 pm

    […] 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/. […]

  9. Web 2.0 and Facebook App Development (Final Project) on December 15th, 2007 12:21 am

    […] 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 […]

  10. Rich Altmaier on December 18th, 2007 12:39 am

    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

  11. Matt Huggins on December 18th, 2007 12:48 am

    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!

  12. Amulya on February 18th, 2008 12:00 pm

    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 !

  13. Arnold Almeida on March 4th, 2008 8:20 am

    if you are using CakePhp

    use

    $page = $this->params[’controller’].’/’.$this->params[’action’];

    instead of
    $page = basename($_SERVER[’PHP_SELF’]);

  14. A J on May 9th, 2008 12:22 pm

    Matt … Thanks a lot dude … your tutorial is really very helpfull :)

  15. Michael Kerr on June 10th, 2008 2:55 am

    Seriously helpful , thank you !!!

  16. Andy on July 20th, 2008 9:29 pm

    Hey Matt,
    Very nice example. I’ve implemented this in a JSP and works great.
    Thanks!

  17. Raj Phogat on August 29th, 2008 10:10 pm

    A great tutorial !! But, how to have a tab which opens in new window?

  18. sathish on September 4th, 2008 5:20 am

    Is it possible to create a sample page in facebook using FBML , if it is possible how to create. any one help me plz.

  19. Frederick on December 1st, 2008 2:40 pm

    Thanks, helped me a LOT!, thanks.

  20. TimJ on December 17th, 2008 2:05 pm

    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?

  21. Vincent on January 24th, 2009 10:00 am

    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

  22. jignesh on April 10th, 2009 2:01 am

    i can not add tab in my application … please … i am useing wamp server…

  23. Mike Wilson on June 19th, 2009 11:27 am

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

  24. Ben on June 28th, 2009 9:12 am

    Great little tutorial and a nice workaround for using dynamic tab selection with php global variables. I will using something similar for my app!

  25. Mehedi Hasan on October 22nd, 2009 12:35 pm

    Thanks a lot Matt :)

  26. Mathieu BLANCHARD on December 11th, 2009 3:52 pm

    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

  27. kat on March 3rd, 2010 3:47 pm

    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.

  28. wildan on March 4th, 2010 10:15 am

    plese sample of fb drobdown tab in fmbl

  29. Mike on May 11th, 2010 10:31 pm

    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.

  30. A.Hariri on May 13th, 2010 9:31 am

    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!

  31. Ron on June 24th, 2010 12:45 pm

    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!

  32. Confluence: Web Team on August 22nd, 2010 7:47 pm

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

  33. Janet Bargewell on September 3rd, 2010 8:33 pm

    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

  34. julie ann on October 15th, 2010 2:17 am

    plz naman oh .. wag ninyo e delete ung application tabs xa my stuff co plzz…

  35. don on October 26th, 2010 1:51 am

    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.

  36. Saurabh on October 29th, 2010 11:02 pm

    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

  37. alex on December 29th, 2010 7:17 am

    Here is way to get the page from fbml - http://apps.facebook.com/fbmktup/get_pages_from_fb_apps

  38. the ScreamS on April 12th, 2011 12:49 pm

    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.

  39. Karimunjawa on July 18th, 2011 2:53 pm

    I still confuse, where should I write this codes? is it for static fbml? or create those tabs on apps???

Got something to say?





Close
E-mail It