Facebook Cookbook - Jay Goldman [74]
Discussion
You can add a col parameter to control the number of columns you want in your table. For example, the following:
will give you a two-column table, as shown in Figure 6-11.
Figure 6-11. A two-column-wide user table
Page and Box Titles
Problem
Page titles are a really important element of Search Engine Optimization, and they also provide users with better bookmarks and history list entries. How can I set titles for the different pages in my app?
Solution
Use the fb:title tag to set the title of your page. When used on a Canvas page, this will append the included text to the title of the window. The simplest form is:
If your app is called “Super Disco Napping,” and you set the fb:title to “Invite Friends to Nap,” and you’re running Firefox 3 on Mac OS X (which you should be!), the window title bar will look something like Figure 6-12.
Figure 6-12. Window title
You can also use the fb:title tag to set the title of the various boxes you can place the tag in, including Profile Boxes and the like. When used inside of a wide Profile Box, you’ll get something like Figure 6-13.
Figure 6-13. Profile Box text
Discussion
The fb:title tag is often used with the fb:subtitle tag to create a header like the one you’ll see in Profile Boxes on users’ Profiles. For example, the following:
Displaying 10 of 2587 naps Take a Nap!
will give you something like Figure 6-14.
Figure 6-14. Title and subtitle
See Profile Box Subtitles for more information on the fb:subtitle tag.
Profile Box Subtitles
Problem
I want to add one of those cool bars I see at the top of other Profile Boxes to mine so that I can give people more information about what’s in the box and some useful links to draw them into the app.
Solution
Luckily for you, subtitles aren’t just for foreign films anymore. Use the fb:subtitle tag to add a bar to the top of your Profile Boxes that contain more info. Note that this tag is usually used with the fb:title tag, which is included in the following examples. The simplest form is:
Displaying 10 of 2587 naps
which will give you Figure 6-15.
Figure 6-15. Super Disco Naps subtitle
Discussion
You can add a seeallurl parameter to the fb:subtitle tag, which will add a “See All” link to the right edge of your bar. For example, the following:
Displaying 10 of 2587 naps
will give you Figure 6-16.
Figure 6-16. Super Disco Naps subtitle with “See All”
You can also add an fb:action tag within the fb:subtitle, which will add an action link next to the “See All” link (or in place of it if you don’t include a seeallurl parameter):
Displaying 10 of 2587 naps Take a Nap!
That code will give you Figure 6-17.
Figure 6-17. Super Disco Naps subtitle with an action and “See All”
Forms the Facebook Way
Problem
I need to display a form in my app and would really like to use the same layout and fields that Facebook uses for its forms so that my app matches the rest of Platform.
Solution
The fb:editor family of tags gives you the ability to quickly create a Facebook-style form. The layout gets wrapped in fb:editor tags, with the rest of the family inserted between your opener