Facebook Cookbook - Jay Goldman [78]
will give you Figure 6-21.
Figure 6-21. fb:header with border
Alternatively, this code:
will give you Figure 6-22.
Figure 6-22. fb:header with no padding
NOTE
If you’re looking for a full dashboard at the top of your page, including actions, help, and a Create button, try the fb:dashboard tag. See Dashing Dashboards: Heading Your App Pages for more information.
Dashing Dashboards: Heading Your App Pages
Problem
I’ve noticed that some Facebook apps have their app icon and name at the top, along with a really nice Create button relevant to what the app does. That looks swanky! How I do get that?
Solution
Use the fb:dashboard tag, along with its children, fb:action, fb:create-button, and fb:help. The simplest form is the fb:dashboard alone:
which will give you Figure 6-23.
Figure 6-23. Simple dashboard
Adding in the fb:create-button gives you Figure 6-24.
Figure 6-24. Dashboard with fb:create-button
Finally, adding some fb:actions and an fb:help gives you the full Events header, as shown in Figure 6-25.
Figure 6-25. Full dashboard
Discussion
Using fb:dashboard is a great way to give your app a Platform-native look and feel very quickly. The tag will automatically render your icon next to your app’s name (if your app has an icon, which it should). The tag will ignore anything you put in it that isn’t one of its children, so:
No dice!
and:
both give exactly the same result (a dashboard with the app name and icon, but nothing else).
You might want to display a different dashboard depending on whether users have installed your app. You can’t use any of the fb:if tags inside of an fb:dashboard, but you can wrap the dashboard in the if tags:
this app
You can have as many fb:action links inside an fb:dashboard as you’d like, but keep in mind that they’ll start to wrap onto a new line if you exceed the width of the Canvas, as shown in Figure 6-26.
Figure 6-26. Lots of fb:actions
You can have only one fb:create-button and one fb:help per fb:dashboard (you can put more into your code, but only the first one will appear). Both tags require an href parameter that points to a Canvas page on Facebook. For example, the following:
will give you something like Figure 6-27.
Figure 6-27. Dashboard with fb:help and fb:create-button
You can have as many fb:dashboards as you’d like per page, and you can put them inside of divs (and the like) if you want to position them: