Tải bản đầy đủ - 0 (trang)
Chapter 2. HTML Design in a Facebook Environment

Chapter 2. HTML Design in a Facebook Environment

Tải bản đầy đủ - 0trang

FBML-Specific Attributes

requirelogin=[true|false] default: true



If true, the user will be prompted to log in (if they have not already done so),

and then they will be asked if they want to submit data to your app. The login

redirects the user to the posted form, with the fb_sig_user and fb_sig_ses

sion values attached to that form.

The following optional attributes can be applied to any form element within

the form:

clicktoenable=[element id]



When added to any element within a form, this enables the element specified by element id when the current element is clicked. Multiple element

IDs can be submitted if they are separated by commas.

clicktodisable=[element id]



When added to any element within a form, this disables the element

specified by element id when the current element is clicked. Multiple

element IDs can be submitted if they are separated by commas.

clickthrough=[true|false] default: false



When added to any element within a form in which Dynamic FBML (such

as the previous attributes, or Mock AJAX or Visibility attributes) is being

used, and if it is set to true, this attribute allows the original form element

functionality to occur. One example use is for checkboxes. When

clicktoenable, clicktodisable, or any of the Visibility attributes are used

on a checkbox element, by default the checkbox will not get checked.

Setting clickthrough=true fixes this issue.



Example FBML

The following example demonstrates the form tag, where clicktodisable and

clickthrough are used together (refer to http://wiki.developers.facebook.com/

index.php/DynamicFBML/Forms):






clicktodisable="firstname" clicktohide="sendbutton"

clickthrough="true" />





Rendered HTML for Single Instance of Tag

The following is the rendered HTML for the example just shown (refer to

http://wiki.developers.facebook.com/index.php/UsageNotes/Forms):



14 | Chapter 2: HTML Design in a Facebook Environment










value="b12d7f73fc47536b32e89e-1160"/>




value="773af1263c2b7bade7958e6b58d3152f"/>

...





Additional information

• Any element added by the user cannot have a name that starts

with fb. Names that start with fb are reserved by Facebook.

• If you are uploading a file through a form, the form must not be posted to

an apps.facebook.com domain. Instead, your form should be submitted to

your own servers’ domain, and your servers should redirect the user back

to the apps.facebook.com domain after saving the file.

• See the section on Mock AJAX in Chapter 3 to learn how you can dynamically load submitted form results into an additional
tag on the page

using AJAX.

• Any form element that is disabled does not get submitted to the form.

• When used together, the clickthrough and clicktodisable tags don’t

allow a form to submit in Apple’s Safari 3 browser. This bug has been

submitted to Safari.



Images in FBML

All images in FBML get cached by Facebook’s servers. Facebook makes a request to your application, and as your application serves up tags, Facebook parses those images, ensures that they aren’t too big and that they meet

various requirements, and then stores a copy of each image on the Facebook

servers. From that point on, the cached version of your image on Facebook’s

servers gets rendered by your browser, which saves your own servers from

unneeded bandwidth costs.

Your images must be smaller than 50 MB, cannot be animated, and cannot be

served as a script (a common method to track a cookie or even serve malicious

code). This ensures quality among applications and keeps Facebook users

feeling safe and secure when using your app. Images must be given as an

absolute link to the callback URL that you specified in your application installation settings (described in Chapter 1).



Images in FBML | 15



If the cache of your image does not work for some reason, Facebook renders

a blank image in your application. If you need to refresh your image from the

Facebook cache, it is recommended you get your hands dirty with some actual

Facebook API code. Look up the facebook.fbml.refreshImgSrc() API tag on

the Facebook Developer Wiki for more information about how to do this (see

http://developers.facebook.com/documentation.php?v=1.0&method=fbml.refre

shImgSrc).

Facebook also recommends that application developers do not append cache

breaking strings (random strings to break the image cache) to the end of their

URLs. This ensures that if your image ever actually does change, there is only

one version of your image on Facebook’s servers to update. It will also keep

the load off your servers.



CSS and DOM in FBML

CSS in FBML can be tricky if you don’t recognize the quirks associated with

it. FBML supports tags for importing external files into your rendered

HTML, as well as style attributes and