Internationalizing Open Graph Apps

November 11, 2013ByMaximilian Machedon

Open Graph objects and actions introduce new capabilities that allow users to be much more deeply engaged with your app. One message we heard very clearly when we took f8 on the road to Asia and Europe is that internationalization (aka I18N) is increasingly important to our developers' success. This is reflected in the fact that more than 75% of Facebook users are outside of the US. Thus, thinking about user experience and internationalization from a global perspective can have a significant impact on how, and how much, your app is used. This post presents an overview of making Open Graph apps I18N ready, describes the process by which strings are translated for use in varying locales, and discusses the impact of I18N on user experience.

Getting Ready for Translation

Making your app I18N enabled is a straightforward process: start with the app in English, and strings will be automatically extracted and submitted for translation, as described in the internationalization docs. All apps must support English, the default language.

Translating Actions

When an app is created, its Open Graph actions are also extracted for translation as part of this process. For example, the following might be strings extracted from actions in an Open Graph enabled app:

The tokens within the braces are substituted appropriately at runtime. You can navigate to this panel in the DevApp by choosing your app, clicking "Edit Settings" and then choosing "Translate Your App" under the Related Links heading in the left-hand navigation column. This panel can also be reached through the following URL: https://www.facebook.com/translations/admin/browse.php?app=<app_id>

Translating Objects

In order to translate Open Graph objects, two things must happen. The developer must specify which locales are supported by the object through Open Graph meta tags, and the app must return the correct strings in the requested locale. For example, if the object can be translated into French and Spanish, the markup that describes this would look like the following:

<html>
    <head>
    <meta property="og:locale:alternate" content="fr_FR" />
    <meta property="og:locale:alternate" content="es_ES" />
    ...
    </head>
    ...
    </html>

When Facebook needs to render an object in one of the specified locales, we will make a request to the object URL with the fb_locale URL parameter set, e.g. &fb_locale=es_ES. The app should then return the object markup in that specified locale. For more details on translating Open Graph objects, please look at the Open Graph I18N doc.

You can debug issues with translating objects by adding a fb_locale parameter, e.g. fb_locale=es_ES, to the Debugger and entering your object URL. If you change or add locales for a particular object, you can make Facebook re-scrape your object to pick up the changes by adding a scrape=true as described in the Objects section in the I18N documentation.

Translation Process

Once strings are extracted and object locales declared, the actual process of translating the strings can happen in the following ways:

Inline by users of the app viewing translatable strings by the app.
Bulk through the Translation App.
Bulk through the Translations Admin Panel. You can get to this by using the following URL: https://www.facebook.com/translations/admin/browse.php?app=<app_id>

For more details see the I18N doc (For users to translate the app, they need to have the Translation App installed).

By default, apps are enabled to be translated for all Facebook-supported locales. This means that it is possible for the community of users to translate strings within an app without the involvement of the developer. Developers wanting more control can go to the Translations Admin Panel and select the specific locales they would like to support:

In this panel, an admin or developer of the app can also approve user submitted translations or provide the direct translations for the specific locales. You can navigate to this panel by going to the Translations Admin Panel as described above and selecting the Dashboard tab.

User Experience

Users viewing Facebook in locales other than English will be able to see the appropriate translations (if the strings have approved translations, or if the community votes that the translations are good enough to be shown). This also means that, for some app stories and content, some strings may be translated while others are not. If there are strings that do not have approved translations for the locale, or the app does not support the locale, the user will see the content in the default language, English. For example, in the following case:

{name1} cocido {recipe1} en {RecipeBox}.

If {recipe1} does not have a translation, the user might see a story similar to the following:

Piyush cocido pancake en RecetaCaja.

Providing content in the user's locale is increasingly a factor to success for apps on Facebook. Taking the steps described above will help ensure a smooth experience for users in all locations, and increase both distribution and engagement. For more information, be sure to check out the resources below.

Resources

To read more about I18N and to use the tools available, please look at the following resources:

Tags:

Business Tools 2013 Graph API

More News