Comment créer une application iFrame Facebook ?

Facebook iframe tab

Comme on vient de l’apprendre il y a trois jours, les nouvelles pages Facebook arrivent par défaut pour tout le monde le 10 mars 2011.


Parmi les changements annoncés, il y a l’abandon du FBML au profit du iFrame. Ce qui veut dire que si vous utilisiez le Fbml pour vos onglets et notamment pour vous créer une page d’accueil personnalisée pour demander à vos visiteurs d’aimer votre fanpage, il va falloir travailler un peu avec le iframe pour obtenir la même chose (c’est la partie déplaisante de Facebook… il faut tout le temps suivre les modifications si on ne veut pas être largué).

Ce n’est pas si simple ni très compliqué non plus, mais disons que vous aurez besoin d’avoir un minimum de connaissances (html, ftp). Et heureusement pour nous Christophe Ramel de Krisiis a fait une grosse partie du travail pour nous avec un article tutoriel complet sur la question.

Pour résumer :

1. Le Fbml sera abandonné le 10 mars, donc vous avez tout intérêt à le remplacer sur votre page facebook par une application en iframe (tabs)

2. Commencez en allant sur cette page : facebook.com/developers (notez bien cette URL pour revenir faire des modifs à votre application rapidement) et cliquez sur « set new app » ou « create one » en haut à droite

3. Onglet en haut à gauche « A Propos » : Donnez un nom à votre application, langue francais, courriel (laissez tel quel avec votre email). En bas vous pouvez ajouter plusieurs administrateurs si le cas se présente pour vous, sinon par défaut vous voyez votre nom.

4. Onglet suivant « Site internet »: vous pouvez ajouter l’URL de votre site web ou blog

5. Onglet suivant « Intégration à Facebook » : Dans « Canvas Pages » entrez un nom exemple « iframemonsite » (ce sera l’URL de votre application facebook donc mettez quelque chose d’unique). Dans « Canvas URLs » mettez l’adresse où vous allez mettre votre fichier .html qui sera lu par votre app iFrame. Par exemple si je le mets à la racine je mets l’adresse de mon site, et il faut le terminer par un slash (exemple: http://www.monsite.com/). Ensuite sélectionnez iFrame (auto-resize ou show scrollbars) et pensez que la largeur du iframe ne doit pas faire plus de 560 pixels en largeur.
Tout en bas, mettez un nom à votre page (exemple: Bonjour ou Bienvenue) puis iframe, et enfin très important mettez le nom de votre fichier html que vous devez créer de toutes pièces : exemple: iframemonsite.html (celui qui sera à la racine de votre site http://www.monsite.com/iframemonsite.html). Un petit code html basique suffit.

6. Les autres onglets et renseignements sont facultatifs, cliquez sur enregistrer. Puis sur « Application Profile Page » puis « Ajouter à ma page » (add to my page) en haut à gauche. Choisissez sur quelle page vous voulez ajouter votre nouvelle application iFrame. L’idéal étant de créer plusieurs apps personnalisées pour chacune de vos pages (même si c’est un peu long). Et voilà : votre application iframe est visible sur votre page. Pour faire en sorte qu’elle soit la page d’arrivée par défaut quand les internautes débarquent, allez sur votre page facebook, cliquez sur « Modifier la page » en haut à droite, puis « Gérer les permissions » et enfin sélectionnez le nom de votre app dans « onglet affiché par défaut« .

Maintenant il faut tester. Il se peut que vous réussissiez du premier coup… ou pas. Chez moi tout est créé correctement cependant le code html n’apparait pas quand on est déconnecté de Facebook (voyez http://www.facebook.com/pages/vincentabry/107561142605257). Bizarre mais de toutes façons il faut garder en tête que les modifications et création d’app prennent un peu de temps à se propager sur les serveurs du réseau social.

Mise à jour : selon Christophe de Krisiis, la page blanche n’est pas celle du cancre mais bel et bien un bug temporaire de Facebook.

18 Comments

  1. Kriisiis 15 février 2011
  2. Fred 16 février 2011
  3. Vincent Abry 16 février 2011
  4. Eric Paré 17 février 2011
  5. Hubert 18 février 2011
  6. Vincent Abry 18 février 2011
  7. MademoiZelleK 21 février 2011
  8. Lionel 9 mars 2011
  9. Arakiel 15 mars 2011
  10. Bruno Bros 5 avril 2011
  11. Aurélie 7 avril 2011
  12. Lucie 13 avril 2011
  13. Gwen 27 mai 2011
  14. Anne-So 29 juin 2011
  15. Nicolas 1 juillet 2011
  16. WebDesign 6 décembre 2011
  17. Ludo 5 mars 2012
  18. mad 7 mars 2012