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 (ç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:
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.
- Cliquez sur l’onglet « Website » à gauche
- Insérez dans « Site URL » l’adresse du site sur lequel vous avez chargé la page.
- Cliquez sur l’onglet « Facebook Integration » à gauche.
- Insérez la « Canvas URL« : de nouveau l’URL principale de votre site.
- 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.
- 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« .
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
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".
- 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:
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!«
J. Marquis
16 avril 2011
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
Bon article. Quand publieras-tu ton tutoriel sur comment cacher le contenu pour les fans?
Foge
6 mai 2011
Thanks for shianrg. Always good to find a real expert.
Vincent
16 mai 2011
Merci, enfin un bon tuto!
fengshuissimo
20 mai 2011
Excellent Tutos ! Merci pour ce partage.
vanessaf
20 mai 2011
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
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
@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
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
Léonard
17 juin 2011
@Rnaud @Vanessaf @Samuel:
Je viens de publier l’article comment cacher/afficher du contenu spécial et comment créer des pages réservées seulement aux fans!
Vanessaf
17 juin 2011
Très bonne nouvelle, je vais le lire de ce pas
Gabrielle
23 juin 2011
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
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
merci pour ce tuto bien pratique en tout cas j’attaque direct !
Gaelle
31 juillet 2011
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
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
Tuto! Pas « tirons » !!! Désolé, ecriture intuitive
Nicolas
24 octobre 2011
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
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
Bonjour,
Facebook a du changé son interface développeur, je n’y arrive pas avec votre tuto. Help !
Eliott
7 janvier 2012
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
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
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
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