| FBML has been deprecated. Starting June 1, 2012 FBML apps will no longer work as all FBML endpoints will be removed. If you are building a new application on Facebook.com, please implement your application using HTML, JavaScript and CSS. You can use our JavaScript SDK and Social Plugins to embedded many of the same social features available in FBML. |
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
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.
| Name | Type | Description |
|---|---|---|
| id | string | The unique identifier for your dialog, which is used to invoke your dialog. |
| cancel_button | bool | Indicates whether to display a Cancel button to close the dialog. |
'''Sample Code with [[DynamicFBML/MockAJAX|Mock AJAX]]'''
An [[fb:dialog-button]] should have the {{c|clickrewriteform}}, {{c|clickrewriteid}} and {{c|clickrewriteurl}} attributes. The {{c|clickrewriteid}} specified is the {{c|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>'''Sample Code with Form Submission'''
To have a [[fb:dialog-button]] submit a form upon click, you must specify a {{c|form_id}} attribute on the [[fb:dialog-button]].
<fb:dialog id="my_dialog" cancel_button=1>
<fb:dialog-title>My Little Dialog</fb:dialog-title>
<fb:dialog-content>Do you like my little dialog?
<form id="my_form">
<p/>
<input type="radio" name="like_dialog" value="yes"/>Yes
<br/>
<input type="radio" name="like_dialog" value="no"/>No
<p/>
</form>
</fb:dialog-content>
<fb:dialog-button type="submit" value="Yes" form_id="my_form" />
</fb:dialog>
Would you like to see a <a href="#" clicktoshowdialog="my_dialog">dialog?</a>'''Sample Code with Two-Button Choice''' <fb:dialog id="my_dialog" cancel_button=1> <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="button" value="Yes" href="http://some_url.com/awesome.php" /> <fb:dialog-button type="button" value="No" href="http://some_url.com/lame.php" /> </fb:dialog> Would you like to see a <a href="#" clicktoshowdialog="my_dialog">dialog?</a>