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

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.

Facebook error with inline message

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.

Facebook error with title and message

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.

Facebook error, explanation, and success messages

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

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