Facebook Cookbook

Heads Up! Heading Your App Pages

Problem

I want to display my app’s icon and a title at the top of my pages.

Solution

Use the fb:header tag:

<fb:header />

which will give you your app’s icon and name, as shown in Figure 6-19.

Figure 6-19. Empty fb:header tag

You can also put text in the tag:

<fb:header>This is a Page in my App</fb:header>

which will keep the icon but substitute your text for your app’s name, as shown in Figure 6-20.

Figure 6-20. fb:header with text

Discussion

You can pass in a false value for icon to switch off the icon display:

<fb:header icon="false">This is a Page in my App</fb:header>

You can also pass in a decoration string set to either add_border or no_padding (but not both), which gives you control over whether you want a one-pixel gray border (#cccccc) along the bottom edge of your header or the default 20 pixels of padding. For example, the following:

<fb:header decoration="add_border">This is a Page in my App</fb:header>

will give you Figure 6-21.

Figure 6-21. fb:header with border

Alternatively, this code:

<fb:header decoration="no_padding">This is a Page in my App</fb:header>

will give you Figure 6-22.

Figure 6-22. fb:header with no padding

Note

If you’re looking for a full dashboard ...