Dialog Boxes

As a note, this set of tags is still in beta mode, but basically this is a mechanism to provide modal dialog boxes for your application. This is really a fancy pop-up box to interact with your users. If this tag doesn’t fit your needs, you can also use FBJS to create this type of interaction between your users by utilizing the Dialog object.

• <fb:dialog> is the container tag for the dialog box.
• <fb:dialog-title> is an optional title for your dialog box.
• <fb:dialog-content> is the message contained in the dialog box.
• <fb:dialog-button> renders a button for the dialog box.

Consider the following FBML snippet for constructing a dialog box:
<fb:dialog id="fb_test">
<fb:dialog-title>This is a test</fb:dialog-title>
<fb:dialog-content>Content</fb:dialog-content>
<fb:dialog-button type="button" value="Okay" close_dialog="1" />
</fb:dialog>
<a href="" clicktoshowdialog="fb_test">show fb:dialog</a>

The <fb:dialog> snippet will render a modal window as shown in the below Figure. Within the <fb:dialog-content> tag, you are also able to add other information (and other FBML) tags, such as forms to perform more advanced interactions with your users.

Figure: FBML <fb:dialog>

For example, take this snippet that generates a search form to search Facebook (or some other site):

<fb:dialog id="fb_search" cancel_button="true">
<fb:dialog-title>Search Facebook</fb:dialog-title>
<fb:dialog-content>
<form action="http://www.facebook.com/s.php" method="get">
<input type="text" name="q" />
<input type="submit" value="Search" />
</form>
</fb:dialog-content>
</fb:dialog>
<a href="" clicktoshowdialog="fb_search">Show Search</a>

Now, when the user clicks the Show Search link, a modal window will pop up, as shown by the below Figure. When users hit the Search button, they are passed to the new server, which in this case presents users with their search results.

Figure: <fb:dialog> with form.

As mentioned previously, you can make these dialog boxes using FBJS (using the Dialog object). However, not everyone is a JavaScript expert, so the <fb:dialog> tags provide a convenient method to do most of the same things you can do with FBJS without writing any FBJS.