Examples

Just so you know what we are trying to do there, here is a list of Facebook pages using this functionnality:

• Coca-Cola
• Accor Hotels

Actually Coca-Cola seems to use another method than the one described here because changing the browser language or the Facebook language does not affect the fan page. I think they use IP geolocalisation.

Step 1 – Create your application

step 1 - create your application

Create a new application on the Facebook developper app.

I will assume that you already have the Facebook developper application installed on your Facebook account, if I assume wrong try to go on the Facebook developper application and enable it. You will also have to confirm your account with your phone or by adding a credit card to your Facebook account.

step 1 bis - create your application

Step 2 – Configure settings of you Facebook application

Since march 2011 Facebook does not allow anymore application to be hosted on his platform. You must now have a server to host you application.

step 2 - configure settings

Fill the form under the tab « Facebook integration » with the informations Facebook needs (leave the others empty):

• Canvas Page: it’s like a unique string for your application which will compose the URL to access to the canvas,
• Canvas URL: canvas is actually the « back-office » of your app and since we don’t really need it, just fill this field with a path to an almost empty index.html,
• Tab Name: the name of the tab which will be added to your fanpage,
• Tab URL: the path to the real content of the tab.

As you can see, you just need to have hosted 2 folders. Mine are here:

• the no canvas page: http://fwed.fr/devquotes/my-translated-app/,
• the tab page: http://fwed.fr/devquotes/my-translated-app/tab/ (the language detection is based on the Facebook language set by the visitor, so if you go directly to this URL you will see the default case which is in english).

Step 3 – Code the app

Now the app exists on Facebook, we have to make it real on your server (like the 2 URLs of mine).

The Facebook PHP SDK is needed to ensure our application to be translated in the language the visitor set on his Facebook (and not on his browser). You can get it on github: Facebook PHP SDK. All you need then is to include this SDK in your code (the code of the tab page, not the canvas) and initialize it this way:

$app_id = "your_app_id_here";
$app_secret = "you_app_secret_here";

require_once 'facebook.php';

$facebook = new Facebook(array(
        'appId' => $app_id,
        'secret' => $app_secret,
        'cookie' => true
));

Your app ID and app secret can be found at the top of the screenshot from the step 2. Once this step is done, we want now to find the language aimed. Facebook, through its API, allow us to access few informations about the visitor:

$signed_request = $facebook->getSignedRequest();
//var_dump($signed_request);

$locale = $signed_request['user']['locale'];
$country = $signed_request['user']['country'];
//var_dump($locale);

You can uncomment the var_dump to see what Facebook offers but so far we have in $locale what we need. Just a few more scripting and the automatic translation will be ready to work:

if(stristr($locale, 'fr')) {
// french content
}
else {
// english content
}

Step 4 – Add the application to your page

step 4 - add the application to your page

Now everything is set you have to go on the home of the developper application and click on « Application profile page ».

step 4 bis - add the application to your page

Go on your page and see the application working.

Hope this tut was useful. If informations are missing just ask for it in the comments, we are really reactive during the week :)