Tutorial: Translating Your Applications Using Facebook’s Crowd-sourced Translation Service

One of the big announcements from Facebook’s F8 developer conference last week was the launch of access to Facebook’s translation tool for third party developers. The tool itself was developed by Facebook to translate the main site and uses a crowd-sourcing model: users suggest translations in context of using the site, and the translations approved by the most votes actually go live. It’s proved highly successful as Facebook has been translated into over 60 languages, some of which within days of Facebook launching the translation in that language

Being able to offer applications in local languages has obvious appeal to application developers given the international growth of Facebook, so we decided to try it out and see how it works in practice. The good news is that adding support for the Translation tool to an application is relatively easy (depending on how large the application is, obviously). The less-good news is that there is only so much the tool can do.

Enabling Translations in Your Application

You can access the Translations tool by simply selecting the “Translations” option for the application you want to add support for within your developer settings page. Once you’re into the Translations application, it’s a simple matter of checking boxes to select the languages you want to open up for translation.

Enabling languages for your application will allow users to translate what Facebook calls your “static text”. This is what appears on the “About” page and other locations.

Unfortunately, this won’t by itself be enough for your application to suddenly display your own content in Spanish. Translated text only appears when another user, who has also added the Translation tool, goes into your application and decides to do some translating. This is likely to work better with higher traffic applications, or any that have a significant user base from one region. How high “higher traffic” is remains to be seen.

Integrating Translations with Your Application

Enabling in-application translation involves a little more work, and there are a set of new FBML tags to support this (your pages need to be built in FBML). At it’s simplest, you wrap pieces of text with a new tag. Facebook registers this text (once someone tries to view it through the application) and highlights it to users of the translation tool. Translatable text appears underlined in red.

(You can see what this looks like for your self by installing the Translations application. Once you’ve logged into it, you’ll have a small globe icon next to the chat and notifications area. This allows you to turn inline-translation on, as well as switch languages easily.)

Right-clicking on a piece of underlined text brings up a dialogue box (see below) where the use can enter the translation without ever having to leave the page. (You won’t see this if you’re browsing in English – you can easily change to a different language within the translation tool and then go to your application to check that the underlined areas have been chosen correctly.) The translation popup is shown here:

It’s possible to create translation options for HTML elements like form buttons using the new tags but it’s more complicated. For instance, a relatively simple form submit button becomes something like this:

<fb:tag name="input">
<fb:tag-attribute name="type">submit</fb:tag-attribute>
<fb:tag-attribute name="name">search</fb:tag-attribute>
<fb:tag-attribute name="class">inputbutton</fb:tag-attribute>
<fb:tag-attribute name="value"><fb:intl desc="Label for a text search field">Search</fb:intl></fb:tag-attribute>

One line of HTML becomes six, plus the inline translation tool also doesn’t seem to be able to render these very well at all, as you can see in the image on the right.

Managing Your Translated Application Text

All translated text is visible in the admin section of the translation tool. Here, you have a dashboard with overall translation progress. One of the best ways to check your progress is to change language and see a real-time count of translated and untranslated phrases for each application. Unfortunately, keeping track of a long list of languages is slightly cumbersome.

Recommended articles