Tutoriel : créer un Onglet sur sa Page Facebook?

UPDATE: Attention cet article date de 2011. Facebook a beaucoup changé depuis la publication de cet article, veuillez lire le nouveau post Tutoriel 2012: Intégrer un Onglet iFrame sur votre Fan Page Facebook qui est une mise à jour de celui-ci. Vous y retrouverez notamment un fichier BONUS à télécharger, il comporte un modèle d’onglet en PHP avec des conditions pour faire varier le contenu selon le statut de la personne qui la regarde (fan ou non fan).


onglet custom

Début Avril j’ai changé de boulot, je travaille aujourd’hui chez Novoceram en tant que « responsable développement web ». Bien évidemment ma première mission est liée à un monde qui ne m’est pas « encore » très familier: facebook Facebook (ça serait trop facile et démotivant de bosser sur ce que je connais déjà bien pour montrer ce que je vaux 🙄 )…

Sachant que le language FBML et les « box » sont morts depuis mi mars, il est difficile de trouver de bons tutos utiles en ligne… C’est pourquoi j’aimerais partager avec vous mes débuts sur Facebook au sujet de la création d’onglets (de Tabs), d’applications Facebook etc.

Comment créer un Onglet (ou Tab) via IFRAME et l’ajouter à sa Page Fan?

1) Créer votre page HTML

Les nouveaux Onglets sont de simples pages HTML (ou n’importe quel autre langage qui vous génère du code HTML) que vous hébergerez sur vos servers.

Au niveau du layout, je préfère rester dans la simplicité et créer des pages comme des emails, avec des « tables» mais n’hésitez pas à utiliser du javascript, des vidéos, du jquery, des Google Maps, du Flash, les boutons « I Like » de Facebook et tout autre Social Plugins… N’hésitez pas à ajoutez un code de tracking (Google Analytics ou autre) à votre page! Allez c’est parti, ouvrez votre éditeur HTML préféré et au boulot:

page html

Comme nous le verrons par la suite, nous indiquerons à Facebook l’URL de la page que nous avons créé et que nous voulons insérer dans un Onglet grâce à un simple IFRAME.

2) Créez l’application

Nous allons créer une application ad hoc qui nous permettra d’y insérer l’Onglet (ou Tab) sur la Page Fan…

  • Aller sur la page developers de Facebook
  • Cliquez sur « Set Up New App » en haut à droite
  • Insérez le nom de l’application, acceptez et continuez
  • Le premier onglet « Basic information » est très important car il déterminera le nom du Tab et l’icone dans votre menu.
    Application name and icon

  • Cliquez sur l’onglet « Website » à gauche
  • Insérez dans « Site URL » l’adresse du site sur lequel vous avez chargé la page.
    adresse du site
  • Cliquez sur l’onglet « Facebook Integration » à gauche.
  • Insérez la « Canvas URL« : de nouveau l’URL principale de votre site.
    url canva
  • Toujours sur l’onglet « Canvas URL », insérez le nom du Tab dans « Tab Name ». C’est le nom qui sera visualisé dans le menu de votre Page Fan.
  • Insérez l’URL de la page que vous avez réalisée et qui sera visualisée sur l’IFRAME.
    tab name, tab url
  • Sauvegardez vos modifications!

3) Ajoutez l’onglet à la Page Fan

Après avoir sauvegardé, vous serez redirigé vers la page récapitulative. Cliquez sur « Application Profile Page« .

application profile page

Sur la page de l’application, cliquez sur « Add to my Page » en bas à gauche. Choisissez la Page sur laquelle vous voulez intégrer l’onglet et cliquez sur « Add to Page

Ajoutez le Tab à la Page Fan

4) Configurer l’Onglet comme Landing Tab

Vous souhaitez faire arriver les « non fans » sur votre Onglet personnalisé? RIen de plus simple:

  • Allez sur la Page Fan.
  • Cliquez sur « Edit Page » en haut à droite.
  • Cliquez sur l’onglet à gauche « Manage permissions« , puis sélectionner le « Landing Tab » au niveau de la ligne "Default Landing Tab".
    Landing Tab
  • Puis sauvegardez!

Tous les utilisateurs Facebook « non fans » atterriront sur votre Tab personnalisé!

Pour visualiser le Tab que nous avons créé ensemble, veuillez vous rendre sur la Page Fan de Football-Session.com ou voir le screenshot ci-dessous pour les anti-footeux flemmards:

Landing Tab FOotball Session

Bravo et à bientôt pour de nouveaux tutos!

Ne loupez pas l’article «  comment cacher/afficher du contenu spécial et comment créer des pages réservées seulement aux fans!« 

Rating: 5.0/5. From 1 vote.
Please wait...
Voting is currently disabled, data maintenance in progress.
25 Comments
  • J. Marquis

    16 avril 2011 at 11 h 02 min Répondre

    Merci Léonard pour ce nouvel article très complet et d’actualité! Pourrais-tu m’indiquer quelques astuces pour le montage de ma page HTML?

  • Arnaud

    19 avril 2011 at 10 h 29 min Répondre

    Bon article. Quand publieras-tu ton tutoriel sur comment cacher le contenu pour les fans?

  • Foge

    6 mai 2011 at 4 h 18 min Répondre

    Thanks for shianrg. Always good to find a real expert.

  • Vincent

    16 mai 2011 at 18 h 04 min Répondre

    Merci, enfin un bon tuto!

  • fengshuissimo

    20 mai 2011 at 12 h 46 min Répondre

    Excellent Tutos ! Merci pour ce partage.

  • vanessaf

    20 mai 2011 at 22 h 20 min Répondre

    Très sympa ce tuto !!

    Même question qu’Arnaud :
    à quand le « comment cacher/afficher du contenu spécial ou des pages réservées seulement aux fans! » ?

    😉

  • pascal37530

    23 mai 2011 at 9 h 30 min Répondre

    Il semblerait que la page en HTML doit porter l’extension PHP sinon on obtient l’erreur suivante en permanence : « The requested method POST is not allowed for the URL ».

    D’autres personnes ont eu le m^me soucis ?

    pascal

  • Léonard

    23 mai 2011 at 10 h 50 min Répondre

    @Rnaud et vanessaf: le tuto sur les conditions de visibilité sera mon prochain article (j’espère avoir le temps de l’écrire avant 15 jours…)

    @pascal: non pas nécessairement, tu peux utiliser l’ectension .html
    Si tu souhaites un peu d’aide n’hésite pas à m’envoyer des screenshots de ton intégration Facebook et ta page HTML 😉

  • Samuel

    10 juin 2011 at 16 h 16 min Répondre

    Bonjour Léonard,

    Merci pour cet article est très intéréssant ! Je suis impatient de voir ton prochain article sur comment cacher/afficher du contenu spécial ou des pages réservées seulement aux fans.

    samuel

  • […] promis à la fin de mon article qui vous expliquait « comment créer un nouvel onglet Facebook sur votre Page Fan » que je vous invite à lire si vous l’avez raté . Je vais passer à […]

  • Léonard

    17 juin 2011 at 3 h 25 min Répondre
  • Vanessaf

    17 juin 2011 at 9 h 44 min Répondre

    Très bonne nouvelle, je vais le lire de ce pas 😉

  • Gabrielle

    23 juin 2011 at 10 h 45 min Répondre

    Bonjour Léonard,

    Ma question va te sembler stupide surement, mais je suis une grande débutante dans le mleur des « page fan », pourtant ma page doit être parfaite.. Grosse pression donc :/
    J’ai bien compris après avoir l’image avec tous les liens dessus, et l’insérer à sa page, mais comment crée-tu cette image? Via quel logiciel? Est-il payant?.. La réponse la plus rapide possible serait la bienvenue, je n’ai pas beaucoup de temps.. :$
    Un grand merci d’avance, tu me sauverais la vie ^^’

    Gabrielle

  • Léonard

    23 juin 2011 at 14 h 39 min Répondre

    Bonjour Gabrielle,
    ta question est loin d’être stupide mais j’ai du mal à évoluer ton niveau et tes compétences « techniques », donc je vais essayer de faire simple 😉
    En gros la page que tu visualises est une simple page écrite en html, php et intégrée à ton onglet à travers un iframe…

    Si tu as des connaissances en html/css, cela ne sera pas compliqué pour toi de créer cette page. Si au contraire tu ne connais pas l’HTML, tu peux toujours intégrer une image unique dans un page html et créer une « map » pour les liens (si tu as besoin d’aide, n’hésite pas à demander mais je ne pourrai pas te répondre avant ce soir)…

    Pour la création en HTML je te conseille Notepad++, Netbeans ou encore Dreamweaver (payant). Pour la création/édition d’images, j’utilise Adobe Photoshop ou/et Fireworks (payants).

  • webagency Suresnes

    12 juillet 2011 at 11 h 58 min Répondre

    merci pour ce tuto bien pratique en tout cas j’attaque direct !

  • Gaelle

    31 juillet 2011 at 15 h 29 min Répondre

    Merci pour cet article! 5mn chrono pour l’intégration. C’est clair, net, précis!
    PS: un petit edit pour les https obligatoire en octobre…?

  • davidator

    19 août 2011 at 14 h 47 min Répondre

    Bonjour et merci pour ce tirons qui m à permis de réaliser de Belles landing page.Malheursement, sur ma derniere page créée, je n ai plus le menu déroulant « onglet par défaut ».
    Quelqu’un à déjà eu ce problème?

  • davidator

    19 août 2011 at 14 h 49 min Répondre

    Tuto! Pas « tirons » !!! Désolé, ecriture intuitive

  • Nicolas

    24 octobre 2011 at 15 h 20 min Répondre

    Merci beaucoup pour ce tuto.

    Une question cependant : y-a-t-il un moyen simple de créer les tabs en https:// … car ne pas avoir cette option devient réellement gênant pour les utilisateurs…

    • Leonard

      24 octobre 2011 at 18 h 16 min Répondre

      Bonjour Nicolas, pour créer un tab en https:// il faut:
      – soit avoir un certificat SSL pour ton domaine (environ 70/100€ par an + configuration)
      – soit utiliser une appli externe utilisant déjà un certificat SSL comme l’application Iframe apps par exemple

  • Quentin

    21 décembre 2011 at 20 h 39 min Répondre

    Bonjour,
    Facebook a du changé son interface développeur, je n’y arrive pas avec votre tuto. Help !

  • Eliott

    7 janvier 2012 at 17 h 04 min Répondre

    Bonjour moi au lieu d’avoir
    -about web -site facebook – integration -mobile and devices – credits – advanced
    moi j’ai
    – Parametres -Open Graph -Roles -Credits -Insights

    Pourquoi ?

    • Leonard

      11 janvier 2012 at 7 h 40 min Répondre

      L’interface a changé depuis la date de publication de mon tuto mais les champs existant toujours, vous devriez les retrouver facilement.

      • Eleonore G.

        11 octobre 2012 at 17 h 57 min Répondre

        Bonjour, Je souhaite créer des onglets sur une page d’entreprise mais depuis que l’interface a changé je n’y arrive pas! Lorsque je clique dans applications, impossible d’en créer une!

  • BabyUbuntu

    11 décembre 2012 at 7 h 12 min Répondre

    Merci,
    Ton tuto est très bien expliqué avec un peu de patience on arrive à retrouver ces petits et le résultat temporaire et top !

    Merci encore !

    thanks :p

Post a Comment