Internationalization/Markup/FBML

From Facebook Developer Wiki

Jump to: navigation, search

Contents

FBML Markup for Internationalization

In order for you to submit structured text for use with Facebook Translations, there are a number of FBML tags that have been added to accomplish this.

  • fb:intl -- The principal tag for making a string of text translatable.
  • fb:intl-token -- Replaces a token contained within fb:intl with its content.
  • fb:tag -- Renders an HTML tag. Only useful in conjunction with fb:tag-attribute.
  • fb:tag-attribute -- Contains the value of an HTML attribute specified by fb:tag that needs to be translatable.
  • fb:tag-body -- Contains the contents of an HTML tag specified by fb:tag. Only useful when fb:tag-attribute is needed.
  • fb:date -- Renders a date, adjusting the format correctly depending on the locale settings of the viewing user.
  • fb:fbml-attribute -- Similar to fb:tag-attribute, this contains the value of an attribute of an FBML tag, allowing the value to be translated.

Exploring an Example

Let's say you have the following FBML in your application:

Give <fb:name uid="4800348" useyou="false" firstnameonly=true/> a copy of "Catcher In the Rye"?

When Facebook renders the FBML, this would yield the proper English sentence 'Give James a copy of "Catcher In the Rye"?'. However, in order to render it in a way that is translatable, this line must be converted to the following:

<fb:intl desc="Asking whether user wants to give a book to someone"> Give <fb:name uid="4800348" useyou="false"/> a copy of "{book-title}"? <fb:intl-token name="book-title"> Catcher In the Rye </fb:intl-token> </fb:intl>

Note a few things. First, the line itself is now wrapped at the outermost level by an fb:intl tag. This has one optional attribute called desc, which is the description of the text that will be provided to the Translations application. It's important that the description is informative enough and specific enough to allow for translations in each of the published languages. We have a number of best practices to avoid common pitfalls when formatting this information.

Second, we have extracted out the variable text (the book title) as a token set off in curly brackets, since we don't want the actual book title to be part of the translatable text. This string, including the token, is what translators will need to be able to translate, using only the description as context.

Third, since we need to decide the variable text to place into the string at render time, we have one final new FBML tag, fb:intl-token. This tag has one required attribute name, which must be the string in the token(s) it is meant to replace. Note that while in general these components can be ordered in any way, we suggest something similar to the above, for the sake of readability and to prevent forgetting tokens.

Finally, the translatable message still contains the fb:name tag. This tag will show up as another token when the string is presented to translators, but the token is inserted by Facebook's translation system; you do not need to put it inside curly braces manually. The translator will be presented with the string, "Give {name} a copy of "{book-title}"?" in this case.

Once your FBML text uses these tags, it will be uploaded to the Translations application on the first canvas page load containing this FBML. After that initial page load, it will be translatable both in the Translations application as well as inline by Facebook users. Once the text is translated in, say, Spanish, it will appear to users browsing in the Spanish locale.

Best Practices

Much of this may become clearer after reading the best practices for advice on how to best prepare your applications. We strongly encourage you to do so.

Other Examples

We've created two examples for you to start with to get an idea of how to make your own application or site translatable.

  • A Simple Hello World
    This is a simple FBML file that demonstrates how FBML markup can be used to make a simple string translatable.
  • Smiley, International Edition
    Smiley is our most up-to-date example application to get started, so it's only appropriate that it goes international as well. This is a more complicated example which touches on a few of the more complex aspects of preparing an FBML application for internationalization.
reference