Fb:dialog
From Facebook Developer Wiki
Contents |
Description
Important: The fb:dialog tag is in beta mode right now, which means there is a possibility it can change. When it is fully stable, Facebook will update the announcements page and remove this note. In the meantime, we would appreciate any feedback/issues you have about fb:dialog.
Bug Reports and Feature Requests: Talk:fb:dialog
The fb:dialog tag displays a lightbox-type dialog box when a user clicks on some element. The dialog box can then show some specified content or form. Clicking on the dialog buttons can post the form or use mock-AJAX to display the results back into the dialog with the use of fb:dialogresponse.
The fb:dialog tag must contain:
- fb:dialog-content - the FBML contents of your dialog. You can now style this section of the dialog.
The fb:dialog tag may contain:
- fb:dialog-title - which displays a title on your dialog
- fb:dialog-button - which adds buttons to the bottom of your dialog
Invoking the Dialog
To invoke the dialog, simply add the attribute clicktoshowdialog="<dialog_id>" to any element.
Note: You can also use FBJS to create dialog boxes with greater flexibility than fb:dialog.
Attributes
| Required | Name | Type | Description | |
| required | id | string | The unique identifier for your dialog, which is used to invoke your dialog. | |
|---|---|---|---|---|
| optional | cancel_button | bool | Indicates whether to display a Cancel button to close the dialog. |
Examples
An fb:dialog-button should have the clickrewriteform, clickrewriteid and clickrewriteurl attributes. The clickrewriteid specified is the id attribute of fb:dialog.
<fb:dialog id="my_dialog"> <fb:dialog-title>My Little Dialog</fb:dialog-title> <fb:dialog-content><form id="my_form">Do you like my little dialog?</form></fb:dialog-content> <fb:dialog-button type="submit" value="Yes" clickrewriteurl="http://www.someurl.com/response.php" clickrewriteid="my_dialog" clickrewriteform="my_form" /> </fb:dialog> I don't know what link to put, how about <a href="#" clicktoshowdialog="my_dialog" style="border-top: solid 1px">this one?</a> The contents of http://www.someurl.com/response.php should print out FBML wrapped in fb:dialogresponse.
<fb:dialogresponse> <fb:dialog-title>My Little Dialog Part II</fb:dialog-title> <fb:dialog-content>I'm glad you like my dialog</fb:dialog-content> <fb:dialog-button type="button" value="Close" close_dialog=1 /> </fb:dialogresponse>
To have a fb:dialog-button submit a form upon click, you must specify a form_id attribute on the fb:dialog-button.
