{"partition": "head_middle", "source_domain": "www.kriisiis.fr", "digest": "sha1:GO5NQCPSZIUCQQ7ULEOIVHVHSMTU7JGX", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2016-26/000_00048.parquet"}
Fév
Créez votre propre onglet personnalisé pour votre Fan-Page Facebook en 5 étapes
81SHARESFacebookTwitterGoogleLinkedin Bonjour à toutes et à tous. Après quelques semaines de repos (je comptais faire une pause entre Noël et le Jour de l’An, mais j’ai un peu exagéré la chose, j’espère d’ailleurs que ça n’a embêté personne), je reprends la plume pour vous parler d’applications Facebook, et plus précisément, d’applications à ajouter en tant qu’onglets sur les Fan-Pages, autrement dit les « Iframe Apps ». Je vous avais déjà proposé un article à ce sujet il y a 1 an, que vous pouvez retrouver via ce lien.
Ce billet vous expliquait étape par étape la marche à suivre afin de créer puis d’ajouter son application à sa page sur Facebook ; cependant, beaucoup d’eau a coulé sous les ponts depuis Février 2011 et le processus n’est désormais plus vraiment le même, d’autant plus que Facebook impose désormais la possession d’un certificat SSL sur son domaine. J’ai donc décidé, en vue des questions posées dernièrement dans les commentaires, de créer un nouveau tutoriel pour tous ceux qui pourraient en avoir besoin.
Sachez tout d’abord que cette mise en place nécessite trois conditions :
1) Posséder un compte Facebook Developer : cela ne changera strictement rien à votre utilisation habituelle de Facebook, mais vous permettra par contre de pouvoir créer ou gérer des applications depuis Facebook Developer. Pour cela, vérifiez votre compte en ajoutant un numéro de téléphone ou votre carte de crédit (je vous suggère la première solution, sait-on jamais).
2) Pouvoir héberger son contenu soi-même (en passant par un hébergeur de type OVH, 1And1 ou encore EuroWH) : si votre entité (entreprise, association, etc.) possède un site internet mais que vous n’avez pas accordé d’intérêt à cet aspect, ou que vous n’avez pas les accès au FTP, prenez contact avec la personne en charge de l’hébergement, tel que votre webmaster par exemple.
3) Disposer d’un certificat SSL signé par une autorité : la plupart des hébergeurs proposent ce genre de certificats « pour pas cher, aux alentours de 15/20€ par an » dixit Korben lors de notre dernier échange à ce sujet. Facebook impose en effet la navigation sécurisée pour ses applications (avec du contenu affiché en HTTPS) afin de réduire les risques de manipulation frauduleuse.
Si vous ne remplissez pas l’une de ces conditions, et surtout, que vous n’êtes pas en mesure de pouvoir les remplir (zéro budget ?), je vous conseille d’opter pour un service automatique et gratuit de type Static HTML, Wildfire Iframe Apps ou encore PageModo. La mise à disposition de contenu est souvent moins flexible (impossible de personnaliser l’icône de l’onglet, etc.), parfois associée à un peu de publicité en haut ou bas de page, mais c’est toujours mieux que rien !
1.	Créer un document comprenant le contenu à afficher
La première chose à faire est de créer le contenu qui sera retranscrit à travers l’application, à l’aide d’une iframe. Si vous ne percevez pas bien comme cela fonctionne, imaginez la chose suivante : les onglets de pages Facebook sont la plupart du temps des fenêtres qui affichent du contenu hébergé sur votre propre serveur. Ce contenu doit être de 510 pixels maximum en largeur (520px avec une petite marge par défaut), et je vous suggère d’opter pour 700 à 800 pixels en hauteur.
Vous pouvez donc créer un document qui n’affiche qu’une image en 510×700 pixels, ou alors une découpe plus complète d’images, de texte, de liens, etc., ou encore du contenu flash. Vous avez bien plus de libertés à ce niveau qu’il y a quelques années, lorsque nous étions limités au FBML ! Hébergez ce document (par exemple nommé « index.html ») sur votre serveur, et ce à deux endroits : sur votre domaine en HTTP, et sur votre sous-domaine en HTTPS.
2.	Créer l’application et débuter sa personnalisation
Lorsque votre contenu est prêt à être affiché à travers une iframe, passez à la création de l’application Facebook. Rendez-vous sur Facebook Developer, et cliquez sur « Applications » dans le header puis sur le bouton « + Créer une application ». Désignez-lui un nom (« Display Name ») afin de l’identifier facilement à l’avenir (exemple : « Bienvenue NomDeVotreMarque ») puis un « Namespace », cette fois-ci sans espace (exemple : « BienvenueNomDeVotreMarque »).
Cliquez sur « Continuer », et votre application est créée ! Vous pouvez ajouter un « avatar » à l’application, mais il n’est pas spécialement utile : rarement visible par les internautes, il pourrait même les induire en erreur (pensant qu’il s’agit de votre page, lors d’une recherche Facebook). Par contre, pensez bien à ajouter une « icône » à votre application : il s’agira de la petite vignette de l’onglet lorsqu’elle sera ajoutée sur votre Fan-Page (exemple : l’icône de l’application « Mur » est une petite bulle verte).
3.	Renseigner l’encart dédié au paramétrage de l’onglet
Passons à l’étape la plus importante, celle du renseignement du contenu à afficher à travers l’application. Cliquez sur « Onglet Page », renseignez le « Nom de l’Onglet » (celui qui s’affichera dans la liste des onglets sur la Fan-Page, par exemple « Bienvenue »), et ajoutez le chemin des deux documents, « http://…/ » pour « Page Tab URL » et « https://…/ » pour « Secure Page Tab URL », sans préciser le nom du document (ici « index.html ») à la fin du chemin (sinon ça ne fonctionnera pas).
Dans le cas présent, il ne vous est pas utile de renseigner le champ « Page Tab Edit URL », que vous pouvez donc laisser vide. N’oubliez pas de finir les chemins par un « / », car si vous ne le faites pas, cela ne fonctionnera pas non plus (et je suis malheureusement bien placé pour en parler). Ne vous intéressez pas aux autres champs de l’application, nous n’en aurons pas besoin pour un onglet de page. Cliquez simplement sur le lien « Enregistrer les modifications » en bas de page.
4.	Ajouter l’application sur sa Fan-Page Facebook
Il y a encore quelques semaines, il vous suffisait de cliquer sur « Ajouter à ma page » en bas du menu de gauche dans Facebook Developer afin de pouvoir vous rendre sur la page de l’application et ainsi l’ajouter à votre Fan-Page. Facebook a retiré ce lien récemment, sans doute pour une bonne raison, bien que très obscure à mes yeux, ce qui implique que vous devez désormais retrouver l’application sur Facebook à l’aide d’une « URL type » à personnaliser au cas par cas.
Commencez par entrer l’URL suivante dans votre navigateur, sans appuyer sur « entrer » :
www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL
Maintenant, renseignez les deux éléments à personnaliser. A la place de « YOUR_URL », renseignez le chemin HTTP de votre contenu (le fameux « http://…/ »), et à la place de « YOUR_APP_ID », l’ID de votre application (précisée en haut de la page de personnalisation de votre application, sous son nom). Accédez à cette adresse (cliquez sur « entrer »), vous n’avez alors plus qu’à sélectionner la page sur laquelle vous souhaitez ajouter l’application et à cliquer sur « Ajouter un onglet de page » !
5.	Transformer son onglet en onglet d’atterrissage
En vous rendant sur votre Fan-Page Facebook, vous devriez désormais voir l’onglet en dessous de son image de profil. Vérifiez bien que le rendu de l’icône est satisfaisant (sinon, privilégiez une forme très simple, avec peu de couleurs), et que le contenu s’affiche correctement lorsque vous cliquez sur l’application (sur l’onglet, donc). Si ce n’est pas le cas, apportez des modifications sur votre contenu (mais attention, sur le document accessible en HTTP ET sur le document accessible en HTTPS !).
Afin que cet onglet soit affiché automatiquement lorsqu’un « non-fan » se rend sur votre page (cela ne concerne donc que les onglets de type « Bienvenue », par exemple), cliquez sur « Modifier la Page » en haut à droite de votre Fan-Page, puis sur « Gérer les permissions » (normalement affiché par défaut), et renseignez « l’onglet affiché par défaut ». Cliquez sur « Enregistrer les modifications », et le tour est joué ! Votre page d’atterrissage est désormais effective.
Pour info, vous pouvez vous désinscrire de votre propre page et recliquer sur « J’aime » sans le moindre problème (vous ne perdrez pas vos droits d’administrateur) ; par contre, la page d’atterrissage sera toujours le « Mur » pour les administrateurs de la page. Ne vous inquiétez donc pas si l’onglet « Bienvenue » ne s’affiche pas automatiquement lors de vos essais ; préférez le test avec plusieurs comptes (en demandant à vos amis non administrateurs de vérifier si cela fonctionne, par exemple).
Si vous avez la moindre question ou suggestion au sujet de ce billet, n’hésitez pas à m’en faire part dans les commentaires. N’hésitez pas non plus à nous faire part de vos réalisations à l’aide de ce tutoriel, je n’hésiterai pas à aller les visionner ! Enfin, vous pouvez également me retrouver sur Twitter (pseudo @Kriisiis), sur la Fan-Page Kriisiis.fr sur Facebook ou sur la Page Kriisiis.fr sur Google+, mais ça, je suppose que depuis le temps que je le répète, vous le savez déjà. À très vite !
81SHARESFacebookTwitterGoogleLinkedin Newsletter
Hebdomadaire, la newsletter de Kriisiis.fr est un concentré de Social Media soigneusement sélectionné par notre équipe.
Franck | Papa Blogueur
Il y a un mois j’ai du créer une nouvelle application pour le site de ma boite. Et je suis tombé sur les mises à jour de Facebook dans le cadre de création et d’ajout dans le menu des applications. J’ai cherché pendant près de 2h00 la solution. En fait sur les forums anglais elle était donnée mais pas très claire du tout. La partie « d’ajout de l’application par url » fut noyée dans un flot d’informations qui ne me concernaient pas.J’ai fini par trouvé, dommage que ton article ne fut pas en ligne avant. :-D
Si cela t’intéresse, il existe un code source à intégrer dans la page de Bienvenue afin de rediriger vers une autre application (le mur par exemple) une foi l’Internaute « fan » de la page.
Phil Guelpa-Bonaro
Franck, je ne sais pas si Christophe est intéressée par cela mais moi oui :)
Je vais créer un article rapide dessus afin que vous puissez prendre le code source. Dès que je le tape ici il est transformé.
Merci Franck !
Billy Jannequin
Merci pour cet article !!
Cependant que vont devenir les « Iframe apps » avec la Timeline imposée aux profils ET aux pages ?
Kriisiis
C’est une excellente question ; pour le moment, il n’est pas prévu que les Fan-Pages soient transformées en Timeline, c’est juste « envisagé ». Je suis persuadé que Facebook ne mettra pas à mal les efforts des marques afin de proposer un rendu cohérent et attractif !
Yannick Audubert
Sinon des entreprises pouvant vous aider existes, découvrez la mienne Neocloud sur http://neocloud.eu
Yannick… ça va, il n’est pas trop promotionnel ce commentaire ? :-P
Un peu mais notre entreprise n’as qu’un an et nos créations peu connues, je ne spam pas non plus, je te remercie de le laisser si ça ne te dérange pas
Tu as visité notre site et notre page Fan au moins ? on fabrique de vrais sites Internet dans Facebook et on est les seuls à faire cela comme ça en France, regarde bien la page fan et nos créa
Geekndev
Pour le ssl, on peut également keroku , qui héberge (via git) votre application fb, gratuitement ;) (c’est le « cloud » par facebook , en somme)
Merci Christophe.
Par contre, la solution que tu proposes et que j’utilise depuis quelques mois a un point négatif : quand l’internaute clique sur J’aime, rien ne se passe. Tu as une astuce pour le faire basculer sur le mur de la page ? Franck | Papa Blogueur
Comme promis, voilà article rapide pour créer une redirection d’application Facebook type « Bienvenue » vers le mur d’un Fan-Page (ou toute autre application) : http://www.papa-blogueur.com/facebook-creer-une-redirection-de-lapplication-bienvenue-vers-le-mur
Xerel
Merci ! je jette un coup d’oeil de ce pas !
Mais de rien, tu as réussi l’intégration ?
Salut, et bien oui j’ai reussi l’intégration en changeant correctement les chemins dans les fichiers php. Et ça marche correctement !
Content de l’apprendre ;-D
Dommage, avec l’arrivé de la timeline, cela ne semble plus fonctionner :/
Mais j’ai trouvé un code beaucoup plus cours Papa Blogueur si ça t’interesse :D et qui fonctionne !
http://www.leonard-rodriguez.com/blog/social-media/tuto-onglet-iframe-facebook-1209
Je ne connaissais pas ce code, je vais l’étudier.
Par contre, la timeline est-elle obligatoire ? Ou est-ce en option ? Pour tout avouer, avec les vacances et les enfants à occuper, je n’ai pas eu le temps de regarder de plus p^rès.
A moins que je n’ai pas tout compris mais son code décris la procédure d’intégration d’un onglet Iframe sur une Fan Page, pas une procédure de redirection d’une page de bienvenue vers le mur ;-D
Fracnk | Papa Blogueur
honte à moi, j’ai loupé le passage obligatoire en mode Timeline des Fan Page FB… oueps donc forcément mon article est un peu… obsolète O_o
Va falloir que j’en créé un autre pour mes lecteurs sur le Timeline alors ;-D
Léonard Rodriguez
Merci pour la citation Xerel!
Léonard
A. Demeulemeester
Mais comment on faisait avant Kriisiis ? Jennifer
Merci pour l’explication! Par contre j’aimerais savoir comment faire pour que les fans puissent commenter l’application sur la même page… Merci
Mamzelle Print
Super, je cherchais justement un bon récapitulatif et pour une fois l’article est bien structuré et complet. Et les commentaires précédents répondent aux qques questions restantes, donc merci ! :) Xerel
Bonjour, peut-on réaliser notre propre fangate une fois que l’application de l’onglet d’atterissage est reglé ?
Blog webmaster
Merci pour l’astuce, je ne connaissais pas.
Après je me demande tout de même comment cela va se traduire lorsque les fan-pages vont passer en Timeline.
Antoine Crock Hory
Salut, super tuto, très clair et très simple. ^^
J’ai un souci, au niveau du https.
j’ai un hébergement mutualisé chez OVH, donc avec l’option SSL.
J’ai mis l’url de mon iframe et j’ai rajouté un « s » pour l’url sécurisée.
Seulement, les gens qui arrivent sur mes fan pages ont un message d’erreur qui fait peur (pas cool) je ne sais pas si c’est possible de faire autrement, je suis allé voir ici : http://guides.ovh.com/sslsurmutu
mais ça ne m’aide pas.
Quelqun d’autre a-t-il ce souci ?
Je viens de m’inscrire sur heroku, mais à toute première vue je ne pense pas qu’on puisse héberger des app en php.
Je vais continuer de regarder, mais j’aimerais pouvoir héberger mes app sur mon ftp ^^
En tout cas bravo Kriisiis
Bon, ben pour ceux qui auraient le souci, j’ai trouvé un truc pas mal du tout : http://www.tomsyweb.com/component/content/article/45-reseaux-sociaux/129-comment-obtenir-un-certificat-ssl-gratuitement-pour-votre-application-facebook
Testé et approuvé.
Jessica de Jaham
Merci d’avoir pris le temps de rédiger ce tutoriel. Heureusement que tu es là ! grainedigitale.com
Est-ce que quelqu’un connait les nouvelles dimensions quand la page utilise Timeline ?
Trouvé : Les applications passent de 520px à 810px de largeur pour ceux que ça intéressent.
Brunog
Bonjour à tous, pour ma part je reste bloqué à l’étape 4, je n’arrive pas à publier l’application sur ma page depuis la nouvelle timeline. Si quelqu’un à une idée je suis Brunog
…preneur ;-)
smngt
Comment fait-on pour modifier (sur une fan page timeline) la petite icône située sur la gauche du nom de l’onglet ?
L’Etape 5 ne fonctionne plus avec le nouveau Facebook, avez-vous trouver une solution?
Pingback: Articles Taff | Pearltrees()
Elé
Bonjour! J’ai un problème depuis quelques temps et il n’y a aucune réponse sur les forums! J’essaye de créer pour une fan page facebook en passant par dropbox! Or quand je clique sur Applications sur Facebook Developers, facebook me renvoie sur ma page d’accueil! Donc impossible de créer une application! J’ai vu que beaucoup de gens avaient le même problème…. Si quelqu’un a une solution…
Pingback: community management | Pearltrees()
Erick Boileau
Mais comment faire un petit onglet du genre de Amis , Photos, ect… qui serait un lien vers une page existante sur facebook ?
par exemple j’ai mon compte perso http://www.facebook.com/erickboileau et ma page pro de photo http://www.facebook.com/Erick.Boileau.Photographies
Je ne trouve pas comment faire un lien fixe vers cette page est ce possible?
Pingback: Facebook et ses outils | Pearltrees()
Hélène DENIS
Je suis en pleine galère pour ma part. J’aimerais
créer des onglets pour ma page nouvellement créée. L’idée est par
exemple de créer un onglet « blog », on clique dessus et une nouvelle page
s’ouvre qui nous emmène directement dessus.
Je ne veux des onglets avec du contenu. Simplement des sortes de liens améliorés.
Philippe Crogiez
je suis webmaster et développeur facebook. j’ai déjà créé appli, forum, jeux en dehors et intégré dan facebook. https://www.facebook.com/media/set/?set=a.3925683462649.169898.1296529424&type=1 je ne connais pas tout, mais j’en connais un bon bout ;-). si vous êtes bloqué, on peut en discuter. A+
Frank Underwood
comment faire en juin 2014 pour que l’onglet de notre Page App soit l’onglet d’arrivée sur la page ?
On ne peut pas.
Pingback: Borderlines Apps FB | Pearltrees()
Benjamin Cimalpes
J’ai créé une page Facebook au nom de l’entreprise que je représente, et je cherche à créer un onglet, sur le profil de la marque, afin de d’obtenir un résultat dans ce genre : https://www.facebook.com/cocacola/app_161193133389 .
Mais au moment de valider l’étape 4 ( http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL ) j’ai une erreur qui apparait…
On me demande de poursuivre la démarche en tant que Benjamin Cimalpes, et non plus en tant qu’entreprise. Là j’accepte et je tombe sur une page d’erreur indiquant : « une erreur s’est produite. Veuillez réessayer plus tard ». Évidemment, plus tard encore ça n’a pas marché…
Que faire pour empêcher cette erreur ?
Pingback: [Web social] Choisir son prestataire en web social()
Pingback: Facebook | Pearltrees()
Arkthus
C’est sûr que c’était trop facile de mettre dans l’administration de la page une option « gérer les onglets » avec possibilité d’ajouter un onglet qui va vers une page web, ou un onglet qui va vers un contenu hébergé qu’on ajoute directement dans les options….
Et bah non…. faut passer par Facebook Developers… Merci Facebook pour toute cette complication, qu’est-ce qu’on ferait sans vous !
hello, comment faire en juin 2014 pour que l’onglet de notre Page App soit l’onglet d’arrivée sur la page ?
Aucune idée, je n’ai jamais eu besoin de cette fonction encore, je sais que c’était possible il y a quelques temps (mais je crois que ça ne fonctionnait que pour ceux qui n’aimaient pas la page), aujourd’hui je ne sais pas du tout :/
Pingback: leonard()
Pingback: Kirk()
Gardons contact	Twitter
LES 3 AUTEURS	Follow @Kriisiis
Follow @Lauramparra
Follow @JessicaLymae
Application	Les dernières publications sont sur l'application Kriisiis
App iOS
Newsletter – Sidebar	If you are a human and are seeing this field, please leave it blank.	Obligatoire
Prénom : Adresse email : Newsletter Kriisiis.fr Anti-Spam : combien fait 11 + 3 (répondre en chiffres) ? Offres d’emploiCommunity Manager (H/F) RATP chez RATP à Paris (Paris)[Stage/Alternance] Chargé(e) communication/community manager chez RemixJobs à Paris (Paris)[Stage] Chargé(e) de campagnes e-CRM chez IGraal à Boulogne-Billancourt (Hauts-de-Seine)ScrumMaster expérimenté(e) - H/F chez eNova Sante à Montpellier (Hérault)Dataminer - H/F chez Seeqle à Paris-17E-Arrondissement (Paris)[Stage] Manager e-commerce (H/F) chez Fast-Up Partners à Paris (Paris)Rédacteur / Journaliste (H/F) chez WebRivage SAS à Aix-en-Provence (Bouches-du-Rhône)
Rejoignez une communauté de 80.000 abonnés
En poursuivant votre navigation sur ce site, vous acceptez l'utilisation de cookies pour vous proposer des contenus et services adaptés à vos centres d'intérêts.Ok