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).


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 :roll: )…

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!« 

25 commentaires

  1. 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?

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

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

    Reply
  4. Merci, enfin un bon tuto!

    Reply
  5. Excellent Tutos ! Merci pour ce partage.

    Reply
  6. 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! » ?

    ;)

    Reply
  7. 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

    Reply
  8. @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 ;-)

    Reply
  9. 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

    Reply
  10. Très bonne nouvelle, je vais le lire de ce pas ;)

    Reply
  11. 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

    Reply
  12. 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).

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

    Reply
  14. 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…?

    Reply
  15. 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?

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

    Reply
  17. 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…

    Reply
    • 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

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

    Reply
  19. 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 ?

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

      Reply
      • 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!

        Reply
  20. 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

    Reply

Commentez cet article:

Derniers Articles

  • segments avancés
    Les Segments avancés de Google Analytics et 20 exemples

    Il existe plusieurs outils de Web Analytics qui vous permettent de segmenter vos données, moi j’utilise Google Analytics et ses segments avancés que je vais essayer de vous détailler en suivant ce plan : 0) Introduction I) Qu’est-ce que sont les segments avancés et pourquoi les utiliser? I-a) Qu’est ce que sont les segments avancés? ...

  • Netlinking
    Qu’est-ce que le Netlinking et comment faire?

    Le Netlinking consiste à mettre en place une série d’actions afin d’augmenter le nombre de liens (de qualité) vers votre site pour améliorer votre positionnement dans les moteurs de recherche. La qualité est essentielle, personnellement je préfère avoir quelques très bons liens plutôt que des milliers et des milliers générés de façon floue et/ou automatique. ...

  • thumb
    Tout savoir sur le Temps de pose

    Découvrez ce qu’est la vitesse d’obturation et en quoi elle influe sur vos photos et plus particulièrement sur la netteté et l’exposition. Tu aimeras aussi ces articles : Tout savoir sur l’ouverture du diaphragme

  • thumb-i
    Tu savais que …?

    Vous retrouverez sur cet article plein d’anecdotes et de statistiques liées au web, aux réseaux sociaux, à Google, des geekeries… Pour les découvrir en avant-première, suivez moi sur Facebook , sur Google+, sur Pinterest ou sur Twitter! Cette page est mise à jour tous les jours, n’hésitez pas à partager ces images sur cos réseaux ...

  • seo-copywriting
    Comment écrire ses articles et bien utiliser les mots clefs?

    C’est article est la suite de "Comment choisir ses mots clés pour référencer son site?", donc si vous avez la flemme n’avez pas eu le temps de lire ce précédent article, je vous rappelle que : - c’est essentiel de réfléchir sur quels mots clefs associer à chaque page… et donc éviter la cannibalisation SEO ...

  • thumb-ouverture
    Tout savoir sur l’ouverture du diaphragme

    Qu’est-ce que l’ouverture et en quoi elle influence vos photos et plus particulièrement la profondeur de champ et l’exposition? Tu aimeras aussi ces articles : Tout savoir sur le Temps de pose

  • pentax-eau-thumb
    Victoire de LRWEB lors du Concours « l’eau » organisé par Pentax

    Résultats du premier concours photo auquel j’ai participé : le jeu concours Pentax France sur le thème de l’eau. Tu aimeras aussi ces articles : Aucun article similaire.

  • communiques-presse-thumb
    Comment rédiger et publier un communiqué de presse optimisé SEO?

    Si vous souhaitez être bien positionné, le netlinking est obligatoire pour avoir des liens et pour donner de la pertinence à vos pages. Tu aimeras aussi ces articles : Content Spinning: comment faire et quels logiciels utiliser? Comment écrire ses articles et bien utiliser les mots clefs? Liste complète des facteurs en référencement naturel SEO ...

  • tab
    Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page Facebook

    Apprenez à intégrer un onglet iFrame sur votre Page Facebook. Ce tuto est un guide complet qui vous guidera pas à pas. En Bonus, un modèle de Page Fan avec des conditions pour varier le contenu (fan ou non fan) à télécharger! Tu aimeras aussi ces articles : Tutoriel : créer un Onglet sur sa ...

  • multilingue
    Site Multilingue: domaines, répertoires ou sous-domaines?

    Il est possible d’organiser son site multilingue de plusieurs façons mais cela dépendra de son budget, de son historique, de sa réputation en ligne, et de ses ressources Web. Voyons ce qu’il est possible de faire dans le détail… Tu aimeras aussi ces articles : Comment choisir ses mots clés pour référencer son site sur ...

  • imacros-bh
    Tutoriel iMacros et Exemples de macros

    Je n’écris pas cet article pour te copier-coller toutes les macros que j’ai mis des jours/semaines à créer mais plutot pour te sensibiliser sur les potentialités d’iMacros… Tu aimeras aussi ces articles : Comment rédiger et publier un communiqué de presse optimisé SEO? Content Spinning: comment faire et quels logiciels utiliser? SEM=SEO+SEA+SMO… Arrêtons les confusions! ...

  • contentspinning
    Content Spinning: comment faire et quels logiciels utiliser?

    Le content spinning en SEO est une technique qui consiste à créer du contenu mécaniquement en substituant des mots grace aux expressions simples du languages PHP. Tu aimeras aussi ces articles : Comment écrire ses articles et bien utiliser les mots clefs? Comment rédiger et publier un communiqué de presse optimisé SEO? Comment choisir ses ...

  • like-wordpress
    Comment ajouter le bouton Like de Facebook sur WordPress?

    Que vous ayez une page Facebook ou non, le bouton « like » de Facebook peut être un vrai générateur de trafic si vous l’utilisez bien. Tu aimeras aussi ces articles : Comment intégrer Facebook Open Graph dans WordPress? Comment cacher/afficher du contenu réservé à vos fans Facebook? Tutoriel : Intégrer un Onglet iFrame sur votre Fan ...

  • likekei
    Comment intégrer Facebook Open Graph dans WordPress?

    L’Open Data Graph Meta vous permettra d’avoir une correspondance exacte entre le titre de votre article, la vignette et la description. Tu aimeras aussi ces articles : Comment ajouter le bouton Like de Facebook sur WordPress? Comment cacher/afficher du contenu réservé à vos fans Facebook? Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page ...

  • thumbb
    The Passion Project: l’initiative Facebook de Novoceram

    Cette année chez Novoceram les mots d’ordre étaient: internet, facebook et agents secrets… Novoceram a décidé de débarquer sur les réseaux sociaux! Tu aimeras aussi ces articles : Tutoriel : créer un Onglet sur sa Page Facebook? Tutoriel : Intégrer un Onglet iFrame sur votre Fan Page Facebook Comment cacher/afficher du contenu réservé à vos ...

Devenez Fan de Léonard Rodriguez sur Facebook
Retrouvez moi sur Google
Suivez-moi sur Twitter
COntactez-moi