Facebook Cookbook - Jay Goldman [79]
This would uselessly (but very Daft Punkingly) give you Figure 6-28.
Figure 6-28. Multiple fb:dashboards
NOTE
If you’re just looking for your app’s name and icon, try fb:header instead. See Heads Up! Heading Your App Pages for more information.
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:
which will give you Figure 6-29.
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.
Figure 6-30. fb:tab-items with align left and right
Media Headers
Problem
I want to display a bunch of media that all belong to a user, so I’d like some way of showing that.
Solution
Use the fb:mediaheader tag along with its children, fb:header-title and fb:owner-action:
which will give you Figure 6-31.
Figure 6-31. fb:mediaheader as viewed by the owner
Note that I will see the Facebook and Flickr links in this image (because they’re owner-actions), but other people will see a standard set of links relating to me (Send a Message, Poke, etc.), depending on privacy settings.
Discussion
Unlike tags such as fb:help (in fb:dashboard), the href in the fb:owner-action tag doesn’t have to be a Canvas page URL.
Errors, Explanation, and Success: Displaying Messages (Oh My!)
Problem
I’d like the different types of messages displayed in my app to match Facebook’s look and feel.
Solution
Facebook provides a family of tags that display text using their familiar user interface standards: fb:error, fb:explanation, and fb:success. They all follow the same pattern, in that they have two modes of use. For example, the following:
will give you the message in Figure 6-32.
Figure 6-32. Facebook error with inline message
The following is a slightly more complex mode:
Bad stuff happened!
which will give you Figure 6-33.
Figure 6-33. Facebook error with title and message
Discussion
Using the Facebook-native appearance is valuable because users are familiar with the look of errors and messages and will extend their understanding of them into your application. Figure 6-34 shows the three types of message displays.
Figure 6-34. Facebook error, explanation, and success messages
The only optional parameter is decoration, which can be either no_padding (removes the 20 pixels of padding that normally surround the message) or shorten (removes the 20 pixels of padding from the bottom of the message). Facebook’s CSS for these messages is pretty flexible, so they’ll adapt if you put them inside a div with a specified width, as shown in Figure 6-35.
Figure 6-35. Facebook error inside a 300-px-wide div
Discussion Boards Made Simple
Problem
I’d love to have a discussion board in my app, but it’s so much work to build one from scratch, and I’m not sure how easy it would be to convert an existing board to run inside of Facebook. What to do?
Solution
Facebook released the fb:board tag into