UsageNotes/Forms
From Facebook Developers Wiki
The form tag now has several overrides with special behavior. These include fb:request-form, MultiFeedStory_form, and FeedStory_form.
Using a form tag in FBML results in a number of hidden input tags being inserted into the generated HTML. The hidden tags provide information about the user submitting the form and the context in which the form was submitted. A signature allowing applications to verify that the form is being submitted from a Facebook page is also provided.
The FBML code:
| <form></form> |
Would expand to HTML something similar to:
| <form> <input type="hidden" name="fb_sig_profile" value="1160"/> <input type="hidden" name="fb_sig_user" value="1160"/> <input type="hidden" name="fb_sig_session_key" value="b12d7f73fc47536b32e89e-1160"/> <input type="hidden" name="fb_sig_time" value="1176705186"/> <input type="hidden" name="fb_sig" value="773af1263c2b7bade7958e6b58d3152f"/> </form> |
The fb_sig value is generated using all of the other fb_sig_* parameters (but without the fb_sig_ prefix included in their names) identically to how it is generated in the API authentication scheme. The fb_sig_user and fb_sig_session_key parameters will only be included if the user has a valid session with the application.
The form tag has an optional attribute requirelogin, which defaults to false. When it is true and a user without who hasn't authorized your application tries to submit the form, the user is prompted with a dialog to authorize your application. If the user authorizes it, Facebook then passes the fb_sig_user value to your application.
[edit] Notes
- You cannot use any custom input elements with names that start with
fb, as Facebook reserves that identifier. - If you pass
requireloginon a form, then the form cannot contain any input element named submit, as the form won't get submitted correctly. - File uploads (that is, forms with
enctype="multipart/form-data"and<input type="file">fields) will not work when the form is submitted to a canvas URL. Instead, you need to submit file uploads directly to your application and redirect back to a canvas page after the form is processed.
[edit] Prompting a User for an Extended Permission
You can include the optional promptpermission attribute to prompt a user to approve an extended permission for your application. You specify the permission as a string (one of email, offline_access, status_update, photo_upload, create_listing, create_event, rsvp_event, sms).
When the user submits the form, and has not already granted this permission, the user is prompted to grant it. The form is always submitted, regardless of the user's response. The form also passes a hidden fb_perms parameter with the same value as specified in the promptpermission attribute. If the user grants the permission, another hidden parameter, fb_perms_approved, will be included with a value of 1. This attribute behaves similar to the requirelogin attribute in URLs.
The following sample code is from the Smiley sample application.
| <form promptpermission="email" onsubmit="return wait_for_load(this, event, function() { var form = this; FBML.promptPermission(10061957983, 64, function() { var newInput = document.createElement("input"); newInput.name="fb_perms_approved"; newInput.value=1; newInput.type="hidden"; form.appendChild(newInput); }, function() { FBML.addHiddenInputs(form); form.submit(); }); return false; });"> <input type="hidden" name="fb_sig_locale" value="en_US" /> <input type="hidden" name="fb_sig_in_new_facebook" value="1" /> <input type="hidden" name="fb_sig_time" value="1215903184.0716" /> <input type="hidden" name="fb_sig_added" value="1" /> <input type="hidden" name="fb_sig_profile_update_time" value="1215714824" /> <input type="hidden" name="fb_sig_user" value="<user ID>" /> <input type="hidden" name="fb_sig_session_key" value="<session key value>" /> <input type="hidden" name="fb_sig_expires" value="1215989583" /> <input type="hidden" name="fb_sig_api_key" value="<Your API key>" /> <input type="hidden" name="fb_sig" value="<sig>" /> <input type="hidden" name="fb_perms" value="email" /> <br />How often would you like to be notified of new smilies? <br /><input type="text" name="frequency" /> <input type="submit" value="Notify Me" /> </form> |
Note: If you're using FBML, you can also prompt a user for an extended permission using the fb:prompt-permission tag.
[edit] Creating a Text Area Inside a Form Using PHP
Using PHP script the code must echo every line inside of the form tag. It starts as a regular form tag and the textarea tag is placed within the form. Remember that automatic text will appear in a textarea tag if written between the opening and closing textarea tags (<textarea>WRITTEN AUTO-TEXT</textarea>).
In the example below, cols are the number of columns and rows are the number of rows in the text area.
| <?php echo '<form action="" method="get">'; echo '<textarea name="profiletext" cols="40" rows="5">'; echo 'WRITTEN AUTO-TEXT.'; echo '</textarea><br>'; echo '</form>'; ?> |
