Tabs Ahoy!

Problem

I want tabs in my app just like I see all over Facebook. Tabs are the greatest! Tabs! Tabs! Tabs!

Solution

Woah! Easy there. Tabs are pretty great, especially when they’re as simple as this:

<fb:tabs>
    <fb:tab-item href="http://apps.facebook.com/myapp/some.php"
 title="First Tab!" selected="true"/>
    <fb:tab-item href="http://apps.facebook.com/myapp/page.php" title="Second Tab!" />
</fb:tabs>

which will give you Figure 6-29.

Easy tabs with fb:tabs

Figure 6-29. Easy tabs with fb:tabs

Discussion

You can have as many tabs as you’d like, but note that they’ll either get cut off on the right edge of the Canvas or wrap around onto additional lines with somewhat unpredictable results. Each fb:tab-item must have an absolute href and title, and can optionally have align (either left or right; see Figure 6-30) and selected (true or false) parameters. Setting more than one tab to be selected will highlight only the first tab.

fb:tab-items with align left and right

Figure 6-30. fb:tab-items with align left and right

Get Facebook Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.