Facebook Cookbook

Errors, Explanation, and Success: Displaying Messages (Oh My!)

Problem

I’d like the different types of messages displayed in my app to match Facebook’s look and feel.

Solution

Facebook provides a family of tags that display text using their familiar user interface standards: fb:error, fb:explanation, and fb:success. They all follow the same pattern, in that they have two modes of use. For example, the following:

<fb:error message="Ka-Blam! Bad stuff happened!" />

will give you the message in Figure 6-32.

Figure 6-32. Facebook error with inline message

The following is a slightly more complex mode:

<fb:error>
    <fb:message>Ka-Blam!</fb:message>
    <p>Bad stuff happened!</p>
</fb:error>

which will give you Figure 6-33.

Figure 6-33. Facebook error with title and message

Discussion

Using the Facebook-native appearance is valuable because users are familiar with the look of errors and messages and will extend their understanding of them into your application. Figure 6-34 shows the three types of message displays.

Figure 6-34. Facebook error, explanation, and success messages

The only optional parameter is decoration, which can be either no_padding (removes the 20 pixels of padding that normally surround the ...