Bonjour à toutes et à tous. Les plus attentifs d’entre-vous l’auront probablement remarqué, Facebook a accompagné l’annonce de l’arrivée de ses nouvelles Fan-Pages par celle de la disparition future du FBML. En d’autres termes, à partir du 11 Mars prochain, il vous sera impossible de faire appel à des applications telles que Static FBML afin de créer vos onglets personnalisés sur Facebook (les onglets déjà créés étant néanmoins maintenus pour une durée indéterminée).

Facebook fait désormais confiance aux Iframes, c’est à dire à la retranscription d’une page web « A » sur une page web « B ». A l’heure actuelle, la situation est un petit peu particulière : vous avez encore quelques jours pour profiter du FBML et il n’existe pas encore d’application fiable prenant le relai de Static FBML afin de personnaliser facilement un onglet Iframe. Que diriez-vous alors de prendre le taureau par les cornes et de créer votre propre Iframe App sur Facebook ?

Je me permets donc de vous présenter ce nouvel article nommé « 10 étapes pour intégrer une Iframe App plutôt qu’un onglet FBML sur sa Page Facebook », qui je l’espère saura vous aider à personnaliser votre Fan-Page via le processus nouvellement suggéré par Facebook. Si vous avez la moindre question ou la moindre suggestion à apporter à ce sujet, n’hésitez pas à me retrouver sur la Fan-Page de Kriisiis.fr sur Facebook ou directement sur Twitter (@Kriisiis).

Des FBML Tabs aux Iframe Apps

Iframe Apps ? Ne parle-t-on plus d’onglets désormais ? Jusqu’à maintenant, nous parlions de FBML Tabs pour la simple et bonne raison que passant par Static FBML, nous n’accordions de l’importance qu’à des onglets. Aujourd’hui, en attendant une solution similaire pour les Iframes, nous parlons d’application Iframe ; il faut en effet créer sa propre application Facebook pour exploiter cette nouvelle solution. C’est un réflexe à prendre, même si Facebook parle encore… d’onglets.

Finalement, vous devriez vous en rendre compte rapidement, le processus est pourtant très similaire à l’ancien. On ajoute une application à une Fan-Page (comme on le faisait avec l’ajout de Static FBML), seulement, le contenu qui s’affichera dans notre application (et non plus notre onglet, vous suivez ?) sera défini lors de sa création (via le renseignement d’une page que l’on héberge) et plus à travers un champs FBML accessible depuis l’administration de sa Fan-Page.

Voici donc désormais une série d’étapes assez simples (et surtout, illustrées), allant de la création de l’application à l’intégration sur sa Fan-Page, en passant par la personnalisation du favicon (le logo de l’application) ou encore la définition du chemin de l’Iframe, sans oublier la gestion des administrateurs. Sachez également que ce tutoriel s’adresse aux parfaits néophytes : j’ai créé et personnalisé mon application en 5 minutes montre en main. Bonne nouvelle, non ?

Avant de passer à ces 10 étapes, je vous rappelle néanmoins qu’il vous faudra également préparer le document (généralement en .html) qui sera retranscrit via l’Iframe. N’oubliez pas que la largeur d’un onglet est de 520 pixels ! Ce document devra être hébergé sur votre propre serveur, ce qui complique légèrement les choses pour les néophytes. N’hésitez pas à faire appel à un proche si vous n’êtes pas en mesure d’uploader votre document vous-même.

1. Créez votre application Facebook

La première étape est plutôt simple, puisqu’il s’agit de la création de votre application. Pour cela, il vous suffit de vous rendre sur facebook.com/developers et de cliquer sur Set up new app (ou également Create one si vous n’en avez encore jamais créé). C’est également sur cette page que vous pouvez soumettre votre application lorsque celle-ci est terminée : cependant, puisqu’il s’agit d’une application personnelle, vous n’aurez pas à effectuer, disons, ce point n°11.

2. Choisissez le nom de votre application

Facebook vous demande alors de nommer votre application. Sachez que ce nom n’a aucune incidence, il ne sera pas marqué sur votre Fan-Page et ne servira qu’à l’administrateur (c’est à dire vous, dans le cas présent), afin qu’il puisse se rappeler de sa fonction lors d’une future visite de facebook.com/developers. Sachez seulement que ce nom ne peut pas comprendre le terme Facebook on ne serait-ce que ressembler à un nom d’application proposée par Facebook.

3. Choisissez le logo de votre application

Si vous souhaitez paraître professionnel, ne négligez surtout pas cette étape. Après la sélection d’une description (que vous pouvez laisser vide) et celle de la langue de l’application, Facebook vous propose de définir le logo de votre App (et donc de votre onglet, sous votre avatar de Fan-Page). Attention, le logo (en 16×16 pixels) est ici nommé « icône », alors que le bloc « logo » est en fait le logo de l’application, absolument inutile dans notre cas. Ne confondez pas !

4. Définissez un ou plusieurs administrateurs

En bas de cette même page, il vous est possible de définir un ou plusieurs administrateurs pour votre application. Sachez que cela n’a pas de rapport avec le paramétrage sur la Fan-Page, il s’agit ici des membres de Facebook qui pourront modifier l’application (et non son contenu, qui je vous le rappelle, sera retranscrit via une Iframe) et qui auront accès à ses chiffres (nombre total d’utilisateurs, nombre d’utilisateurs récents, personnes ayant liké l’application).

5. Définissez l’URL de l’application (Canvas Page)

Cette cinquième étape se passe directement dans le troisième onglet de création (le second ne nous concernant pas), nommé « Facebook Integration ». L’idée est désormais de définir l’URL (l’adresse) de l’application sur Facebook, ce qui dans le cas présent est nommé « Canvas Page ». Sachez que cela n’a aucune incidence sur les étapes suivantes, il reste cependant conseillé d’opter pour le même nom que celui de l’application (mais sans majuscules, dans tous les cas).

6. Définissez le chemin de l’Iframe (Canvas URL)

Juste en dessous de cette Canvas Page, Facebook vous demande de définir la « Canvas URL ». Concrètement, il s’agit du chemin menant vers le document que vous hébergez. J’ai passé un certain temps à chercher ce qui était vraiment demandé, alors je vais faire simple : en supposant que l’Iframe souhaitée soit une retranscription d’un document nommé « landing.html » dont l’adresse est http://kriisiis.fr/wait/landing.html, alors la Canvas URL est http://kriisiis.fr/wait/ (avec le / !).

7. Nommez l’onglet de votre application

N’accordez pas d’intérêt au « Secure Canvas URL » ainsi qu’aux réglages suivants (pensez tout de même à indiquer « Iframe » pour ce qui est du « Canvas Type ») et passez directement au « Tab Name » en bas de page. Il s’agit du nom qui sera marqué sur l’onglet situé en dessous de l’avatar de votre Fan-Page, à côté du logo que vous avez sélectionné lors de l’étape 3. Je vous suggère un nom en un seul mot (« Bienvenue », par exemple), mais vous n’êtes pas limité en nombre de caractères.

8. Définissez le fichier de l’Iframe (Tab URL)

Après la Canvas Page et la Canvas URL, voici la Tab URL. Je vous expliquais dans le point n°6 que si l’adresse du document exploité via l’Iframe était http://kriisiis.fr/wait/landing.html, alors la Canvas URL était http://kriisiis.fr/wait/. Tout logiquement, cette dernière donnée à renseigner est donc la suite de l’adresse, à savoir landing.html (sans / en préfixe ou en suffixe). Facebook effectue en effet un rapprochement automatique entre la Canvas URL et le Tab URL.

9. Ajouter l’application à votre Fan-Page

Cliquez sur « Save Changes » et… savourez, car vous venez de créer votre première Iframe App (la première d’une longue série, je vous le souhaite). Cliquez alors sur « Application Profile Page » dans le menu de gauche puis sur « Add to my Page » dans le menu de droite. Sélectionnez la Fan-Page sur laquelle vous souhaitez voir apparaître l’Iframe App, et le tour est joué ! Votre application apparaît sous votre avatar. Pensez également à vérifier que l’Iframe fonctionne correctement.

10. Faites en éventuellement votre Landing App

Cette application pourrait avoir vocation à devenir votre Landing App, c’est à dire la page sur laquelle les non-fans (de votre Fan-Page) atterriront lors de leur visite. Pour ce faire, cliquez sur « Edit Page », rendez-vous dans l’onglet « Manage Permissions » et définissez la « Default Landing Tab », c’est à dire la page d’atterrissage. Pour terminer, utilisez un autre compte (non-membre de la Fan-Page) ou déconnectez-vous afin de vérifier que tout fonctionne correctement.

Je n’aurais certainement pas pu créer mon application et ce tutoriel sans ce super article de Paul Kortman avec qui j’ai discuté sur Twitter, découvert grâce à la gentille @DoroT sur Twitter. Je me permets donc de les remercier tous les deux chaleureusement. Si vous avez la moindre question ou la moindre suggestion au sujet de cet article, n’hésitez pas à prendre la parole à travers les commentaires, sur la Fan-Page de Kriisiis.fr sur Facebook ou à me contacter directement sur Twitter (@Kriisiis).

Source Image n°3 : Blog Madarco
Source Image n°4 : Facebook Developers