Un onglet personnalisé sur une fan page Facebook : comment on installe ce bordel ?

En ce moment je développe pas mal d'applications sur Facebook. Non pas que ça me plaise particulièrement mais c'est en vogue : un site qui a réussi à faire plus de pages vues que google sur une semaine forcément ça attire de l'annonceur. Et ce qui marche bien en ce moment c'est de personnaliser les onglets des fans pages et d'y afficher un contenu divers et varié pour représenter la marque : image/son/vidéo/RSS de Blog/formulaire/toutskonveutmaislégal.

Je ne me pencherai pas ici sur l'aspect marketing ou même sur la pertinence des stratégies des opérations menées sur ce medium, d'autres le font largement mieux que moi - on mettra des liens en commentaire, promis.
Non, là je vais expliquer pas-à-pas comment mettre en place techniquement cette saloperie d'onglet (non, il n'est pas possible de mettre une bavette à la place).

Souvent, je travaille en sous-traitance pour des agences qui ne veulent pas me voir apparaitre parmi les développeurs de l'application ou même encore pour des clients qui veulent garder tout contrôle sur ce que je leur livre. Grand bien leur fasse, moi ça ne me pose pas trop de soucis.
Sauf qu'il arrive très régulièrement un moment où un non-technicien, parfois même qui connait à peine facebook (si si ça existe encore) me demande comment il faut faire pour installer ce que je lui ai livré. Et ce ne serait pas très commerçant de lui répondre "débrouille-toi !" ;)

Alors voilà, pour me faciliter la vie, peut-être j'espère faciliter la votre si vous êtes dans la même situation que moi, ou même pour vous, voici une petite explication détaillée de la procédure à suivre...

Note préalable : Je décris ici la manière d'installer une application avec les fichiers sur un serveur et tout le tintouin. Généralement c'est la méthode qui est utilisée pour récupérer des infos d'une base de données ou utiliser les API Facebook dans du contenu interactif.
Si vous n'avez que du contenu statique à mettre en place, vous pouvez simplement éviter toute la partie concernant la mise en place de l'application et ajouter à votre page celle-ci : Static FBML.

Si tout va bien vous avez à votre disposition un espace où stocker vos fichiers - un hébergement ou un serveur avec une adresse accessible - et tout un tas de fichiers[*].

L'application est au moins composée de fichier qui comportent ou génèrent du FBML, le langage de facebook, ce sont donc des fichiers html, php, asp(x), jsp, etc[**]. L'un d'entre eux est celui qui correspond au contenu de base de l'onglet, il est bon que vous le repériez de suite. Dans mon exemple mon fichier s'appellera "tab.php".

Première tannée : Créer et installer l'application.

Pour créer une application il faut être "développeur" sur Facebook. Pour cela pas besoin de dossier médical, ni questionnaire de santé et encore moins de lécher la casserole. Non, il suffit de se rendre sur http://www.facebook.com/developers/ et d'autoriser l'application. Et voilà ! Vous êtes développeur(-euse), mais pas d'inquiétude ça n'est pas forcément contagieux.

Vous voyez le petit bouton en haut à droite qui vous indique que vous pouvez mettre en place une nouvelle application ? bin cliquez-dessus prestement.

Indiquez le nom de votre application. Je vous conseille d'utiliser un nom reconnaissable car il pourra apparaitre aux utilisateurs. Acceptez les conditions d'utilisation de facebook - j'ai essayé de ne pas le faire et l'opération de création est refusée. Damned ils sont trop malins les bougres.

Votre application existe donc à partir de maintenant et vous pouvez admirer une superbe page de résumé de celle-ci.
Vous y trouverez deux données importantes : l'API Key et l'Application Secret. Selon les fonctionnalités de votre onglet, vous en aurez peut-être besoin[***].

Nous allons maintenant éditer les paramètres de l'application. Allons sur Edit Settings et découvrons le premier écran. Il permet de paramétrer les informations principales de l'application. Elles ne sont pas toutes nécessaires pour la mise en place de l'onglet d'une fan page mais je vous conseille au moins d'envoyer les logos qui peuvent apparaitre sur certaines popups, partages ou sur la page publique de l'application.

Dans la partie Authentification il faudra indiquer que l'application est installable sur les pages. Il est relativement inutile de la rendre installable pour les utilisateurs vu qu'en général le but d'une fan page est d'augmenter le nombre de fans pour pouvoir par la suite communiquer avec eux. De même, ne vous embêtez pas avec les URL de retour.

C'est sur la partie Profiles qu'on va enfin faire des choses concrètes : Donner un nom à l'onglet de l'application et mettre le chemin vers le fichier qui contient le contenu FBML de l'onglet. Comme je vous l'ai dit plus haut, chez moi ce fichier s'appelle "tab.php".

Notez aussi que si vous êtes limités par facebook pour le nombre de caractères du nom de l'onglet, vous êtes aussi limités par la place disponible sur la barre d'onglets de votre fan page. À vous, ou à votre CR, de tester et de trouver le meilleur nom possible pour optimiser le succès sans précédent de votre fan page.

Canvas est la partie qui va vous permettre de mettre l'adresse du serveur où sont hébergés vos fichiers. Il faut mettre ici le chemin complet vers le répertoire de l'application et pas juste l'adresse du serveur. Trouvez un nom pour l'url de facebook - moins important mais il peut être utile d'en avoir un assez explicite pour ne pas passer pour un vil spammeur. Le reste a moins d'importance.

J'ai ajouté la partie Advanced car elle peut-être intéressante en phase de développement : Elle va permettre de mettre l'application en mode 'privé' pour que seuls certains ordinateurs ou seuls les administrateurs de l'application puissent y avoir accès. Pour être en mode public désactivez le Sandbox (bac à sable en français si je ne m'abuse). Pour le reste, je vous laisse chercher, il y a de grandes chance pour que vous n'en ayez jamais besoin.

Et voilà ! Votre application est en place. Content ? Bin calmez-vous c'est loin d'être fini !

Si j'existe... c'est d'être fan page !

Bah oui, c'est sur une fan page qu'on veut voir notre onglet s'afficher alors la première chose à faire c'est quand même de créer une fan page... non sérieux vous avez compris ça quand même ?

Bon alors rendez-vous sur la page http://www.facebook.com/pages/ qui va vous permettre par un simple bouton, de type "clique dessus et ça fait une action", de commencer à créer votre fan page.

L'écran suivant va vous permettre de choisir le type de page que vous désirez créer. Notez bien que depuis très peu de temps si vous souhaitez faire de votre onglet la page d'accueil de votre fan page il vous faudra soit avoir plus de 10000 fans, soit vous payer des pub chez facebook. Je vous conseille donc fortement de créer une Official Page.

Voilà votre page est créée. Simple isn't it ?

Par un habile subterfuge vous allez devoir aller sur le profil public de l'application que nous avons créée plus haut. Pour cela retournez sur la page développeur, cliquez sur votre application dans la liste à droite, puis choisissez le profil public de l'application. Il vous sera alors proposé très gentiment (enfin c'est assez neutre mais j'ai décidé de le prendre gentiment) d'ajouter l'application à une de vos page. Faites-le donc.

Voilà, votre fan page est créée, l'application y a été ajoutée. Et ptet même que vous en avez plusieurs des fan pages. Sur la page http://www.facebook.com/pages/manage/ vous en verrez la liste pour éditer les paramètres de celle que vous voulez.

Dans la liste des applications qui ont été ajoutées à votre page, vous allez facilement retrouver la votre et éditer ses paramètres. C'est là que vous allez pouvoir rajouter l'onglet (tab).

Note : Depuis le 20 mai 2010, il parait qu'il faut 10000 fans et/ou acheter de la pub à facebook pour cette dernière partie. Mais je l'ajoute quand même pour l'instant l'option apparait encore sur mes fan pages.

Remontez en haut de la page d'édition. Éditez les paramètres du Mur (Wall) et choisissez votre nouvel onglet en tant que Landing Page. Et hop, les nouveaux arrivants, ceux qui ne sont pas encore fans, devraient arriver directement sur votre onglet.

Et bin vous savez quoi ? Vous avez réussi !!!

Ça me fait quand même sacrément l'effet d'une aventure où les énigmes sont du niveau des meilleurs point'n'clicks de la grande époque Lucas Arts : c'est super relou de trouver ce qu'il faut faire - comme tout ce qui a trait au développement facebook - mais une fois que c'est fait on est quand même bien content. Voyez donc tout cet article comme une sorte de soluce pour un jeu pas très fun.

Alors je sais aussi que le ton que j'emploie ici ne sera pas forcément pour plaire à tous les clients. Ce n'est pas très grave, je vous laisse reprendre sans soucis mes copies d'écran, et ré-écrire les textes à votre sauce corporate. C'est bien normal. Et bien sur n'hésitez pas si d'aventure vous voyez une coquille dans le texte ou dans la méthode à laisser des commentaires.

[*] Si vous n'avez aucune idée de ce qu'il faut mettre dans ces fichiers mais que vous voulez quand même mettre en place une applicationfan page avec plein de trucs hyper coules dedans, vous pouvez aussi vous adresser à des spécialistes hypra-sympathiques afin de les créer pour vous.

[**] euh non attention, il n'y a aucun fichier qui peut s'appellera "index.etc" ;)

[***] Ce sont des éléments qui vont vous permettre d'identifier votre application auprès de  Facebook pour aller chercher des informations sur les utilisateurs. ex. lister les amis, afficher le nom/prénom, etc.