O'Reilly logo

Facebook Cookbook by Jay Goldman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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:

<fb:dashboard />

which will give you Figure 6-23.

Simple dashboard

Figure 6-23. Simple dashboard

Adding in the fb:create-button gives you Figure 6-24.

Dashboard with fb:create-button

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.

Full dashboard

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:

<fb:dashboard>
    No dice!
</fb:dashboard>

and:

<fb:dashboard />

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required