Facebook Cookbook

Dialogs That Pop

Problem

I need to show my users some information in a way that really grabs their attention. I’ve seen some pop-up dialogs around Facebook that are like overlays (rather than JavaScript alerts) and I really dig ’em. Especially the semi-transparent smoky edges!

Solution

Another great example of FBML making something complicated really simple. Use the fb:dialog tag to show a simple pop up with some content:

<fb:dialog id="ice_cream">
    <fb:dialog-title>I Scream! You Scream! We All Scream!</fb:dialog-title>
    <fb:dialog-content>For Ice Cream!</fb:dialog-content>
    <fb:dialog-button type="button" value="Yay!" />
</fb:dialog>

<input type="button" value="Click me!" clicktoshowdialog="ice_cream" />

which will give you Figure 6-52.

Figure 6-52. Simple fb:dialog

Notice the very important clicktoshowdialog attribute on the button, which tells Facebook to trigger the dialog when the button gets clicked.

Discussion

The clicktoshowdialog attribute can be applied to things that typically aren’t clickable, such as divs:

<div id="my_dialog_trigger" clicktoshowdialog="my_dialog">Click Me!</div>

The fb:dialog-content tag can contain entire forms if you want to do something more than just display info to your users. For example, the following:

<fb:dialog id="ice_cream" cancel_button="true"> <fb:dialog-title>I Scream! You Scream! We All Scream!</fb:dialog-title> <fb:dialog-content> <form id="ice_cream_flavors" ...