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

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.

Empty fb:header tag

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.

fb:header with text

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.

fb:header with border

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

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