Online Book Reader

Home Category

Facebook Cookbook - Jay Goldman [78]

By Root 639 0
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:

This is a Page in my App

will give you Figure 6-21.

Figure 6-21. fb:header with border

Alternatively, this code:

This is a Page in my App

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:

Add

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:

Help Me!

New Widget

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:

Work It!

Make It!

Do It!

Makes us...

Harder

Better

Faster

Stronger!

®Online Book Reader