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.

  • Kriisiis

    Merci pour la mention Vincent,

    C’est très apprécié :)

    Christophe

  • Fred

    Slt,

    Merci pour l’information.
    Cela tombe bien, car j’étais en pleine réalisation d’une app FB en iframe.
    Seul pb, au moment de l’intégration dans un onglet, j’ai une erreur FBML (FBML Error (line 10): illegal tag « body » under « fb:tab-position ») alors que j’ai bien spécifié dans les paramètres de l’app que c’était une app iframe.
    Vous avez une idée ?
    Merci

  • Vincent Abry

    @Fred: bizarre en effet. Cependant je pense que Facebook éprouve quelques problèmes vu que c’est nouveau et que tout le monde s’est précipité dessus ;_) (voir l’exemple de la page blanche). D’ici 1 mois tout devrait être fonctionnel (ce qui n’empêche pas de commencer à tester le iframe pour se faire la main).

  • Eric Paré

    Salut Vincent. Intéressant cette nouvelle ouverture de FB pour qu’on puisse développer des trucs sans utiliser forcément leurs outils.

    ça marche #1 en standalone : http://apps.facebook.com/qr-code-maker/

    (ce que tu vois là est l’équivalent de la page http://orangium.com/generateur-de-codes-qr, mais chargé à partir de http://orangium.com/iframe/generateur-de-codes-qr.

    mais petite contrainte d’espace sur une fanpage :
    http://www.facebook.com/Orangium?sk=app_191867670833480

    au final, c’est un peu comme de développer une version du site pour appareil mobile.

  • Hubert

    Bonjour et merci pour le tuto.

    Quelques questions:
    1/ si j’ai bien compris dans son iframe on fait ce qu’on veut, ex: interactivité javascript, génération dynamique du contenu (via php), intégration de widget? choses qui n’étaient pas permise auparavant dans un onglet fbml
    2/ les widgets fmbl anciennement fournis par facebook, avec leur balises spéciales (bouton de partage, boite de commentaires, integration de swf flash, voir même la balise google analytics – qui chez moi n’a jamais marché), tout ça on oubli? on remplace par leur équivalent html normal qui s’intègre dans n’importe quelle page web?
    3/ comme le faisait facebook avec un onglet fmbl et en particulier les images, avec un iframe tout est parsé et mis en cache sur les serveurs facebook, c’est bien ça? (je ne vois aucune iframe dans le code source)
    4/ si à la question 3/ je ne me trompe pas, dans le cas d’une iframe au contenu dynamique, combien de temps la page restera en cache avant d’y être régénérée ou cas où mon contenu sur mon serveur serait actualisé? vous avez une idée?
    5? enfin, est-ce que ces app ansi crées sont instalables sur n’importe quel profile?

    en tout cas ça ouvre de sacrés perpectives! même si c’était sans doute faisable auparavant, mais par flème je n’avais pas pris le temps d’étudier la création d’app facebook ;)

    Merci

  • Vincent Abry

    Hubert:
    1. normalement oui puisque c’est le principe du iframe (un cadre) mais je n’ai pas testé.
    2. oui tu peux oublier complètement le fbml. Maintenant une fois installé c’est plus facile car une simple page avec du code html suffit pour mettre dans l’iframe.
    3. en cache hmm je suis pas sûr car le html qui est lancé dans le iframe n’est pas sur facebook. A moins qu’il recupere tout a la volée. à vérifier.
    4. generalement en cache ca peut rester plusieurs minutes voire plusieurs heures. Il faudrait connaitre le taux de rafraichissement de facebook.
    5. pas certain donc je préfère rien dire
    Clair que ca fait du changement avec le fbml. Une transition à faire mais une fois faite, après on est bon pour faire plusieurs pages d’un coup!

  • MademoiZelleK

    Premier problème : j’ai créé une page fan sans créer de compte Facebook. Si je comprends bien, je suis obligée de créer un profil pour pouvoir créer une application…

    Y a-t-il un moyen de contourner cela ? Ou doit-on obligatoirement accéder à l’application facebook.com/developers pour créer une application ?

    Deuxième problème : j’ai créé une page fan à partir de mon profil Facebook et lorsque je créer une nouvelle application, on me demande de vérifier mon profil. Or, j’ai déjà fait vérifier mon profil auparavant… Comment résoudre ce problème ?

  • Lionel

    Bonjour,

    Merci pour l’info !
    J’ai créé mon appli tout fonctionne, mais j’aimerais rendre le « like » obligatoire pour l’utiliser. Je cherche depuis 1h30 sans trouver le début d’une solution. Avez-vous une idée ?

    L.

  • Arakiel

    Salut,
    Voici un exemple d’iframe Facebook avec du Flash

    http://www.facebook.com/pages/Dexter-Morgan/208809659136055

  • Bruno Bros

    Bonjour,

    Le passage en https fait que les applications iframe non configurées https ne s’affichent pas sur les pages entreprises.
    iframe.apps permet de créer une iframe sans être développeur facebook et évite d’acheter et de configurer le certificat SSL.

    L’application iframe.apps (http://www.facebook.com/iframe.apps) propose :
    – d’ajouter dans un onglet iframe une page internet existante simplement en insérant son URL
    – ou de créer un nouvel onglet iframe grâce à l’éditeur HTML intégré
    (de la même manière qu’était géré Static FBML)

    N’hésitez pas à demander plus d’informations.
    Bruno B.

  • Aurélie

    Bonjour,

    Je viens d’utiliser Iframe apps pour ma page Facebook.
    Après quelques ratés au démarrage, à présent ma page « devenez fan » personnalisée s’affiche presque correctement.

    Le hic, c’est qu’apparait une bordure grise en haut et à gauche. Si quelqu’un pouvait m’aider à comprendre pourquoi, ça m’aiderait beaucoup. Merci d’avance !

  • Lucie

    Bonjour,

    Je n’arrive pas à créer une application étant donné qu’on me demande de vérifier mon compte en inscrivant mon numéro de téléphone ou ma carte de crédit… ce que je me refuse à faire, question de sécurité… Qu’en pensez-vous ?

    Merci d’avance pour votre réponse,

    Lucie

  • Gwen

    Salut, il m’ arrive la même chose que Lucie,on me demande de vérifier mon compte en inscrivant mon numéro de téléphone, sauf que je n’est jamais recut de code. Je suis chez Orange, mais j’ ai vu quelque part que ca marchais qu’ avec SFR. Ca fait 3 jours que je suis dessus. A croire qu’ il faut bac +12 pour faire quelque chose de sympa avec Facebook! Pourriez vous m’ aider s’il vous plais?

    Gwen

  • Anne-So

    Même problème que Gwen et Lucie… Si qq1 peut nous dépanner !

  • Nicolas

    Salut à tous,
    J’en bave un peu avec ces onglets sur facebook, et je sollicite votre aide :
    J’ai créé deux applis pour avoir deux onglets supplémentaires sur la page 3DCoiffure.
    Sur la première appli j’utilise les paramètres suivants :
    url du canevas : http://www.3d-extensions-cheveux.com/facebook-jeux-canvas/
    url de l’onglet : http://www.3d-extensions-cheveux.com/facebook-jeux/

    Sur la deuxième appli j’utilise les paramètres suivants :
    url du canevas : http://www.3d-extensions-cheveux.com/facebook-bienvenue-canvas/
    url de l’onglet : http://www.3d-extensions-cheveux.com/facebook-bienvenue/

    Individuellement ces pages fonctionnent parfaitement, mais, car il y a un mais, mes deux onglets on un comportement trop bizarre. Mes deux onglets affichent le même contenu! Et au bout de quelques minutes ils changent et affichent tous les deux l’autre contenu!!! Comme si les deux applis utilisaient la même copie en cache de mes onglets… j’y comprends rien…

    Quelqu’un aurait une idée?

  • WebDesign

    Merci pour l’info!

  • Ludo

    Hello,

    Merci beaucoup pour ce tutorial, j’ai essayé de créer une application jusqu’ici rien à dire même si depuis quelques jours l’interface à changer. Justement alors que mon compte developper est associé à un compte qui a 2 pages à son actif, je recherche désespérément le lien “Ajouter à ma page” (add to my page) en haut à gauche. » Impossible de le trouver sur cette nouvelle interface. Y a t il quelqu’un qui aurait réussi à la trouver?

    Merci !

  • mad

    Il s’agit d’un bug de facebook, il faut ajouter le lien « add to page » grâce à cette page :https://developers.facebook.com/docs/reference/dialogs/add_to_page/