Facebook : créer des onglets personnalisés pour votre page Entreprise

Avec les changements apparus sur votre page entreprise Facebook depuis le passage à la fameuse Timeline, vous vous demandez comment créer des onglets personnalisés sur votre page Entreprise ? Je suis tombée sur un petit billet de Hubspot et je vous propose une traduction à ma sauce des 6 étapes de création…

Avant propos : les onglets prennent désormais beaucoup plus d’importance que dans feu votre vieille page old school car ils propulsent au devant de la scène le contenu que vous souhaitez mettre en valeur. Attention, on oublie tout onglet destiné aux non fans, ça n’existe tout simplement plus !

Pour rappel, on parle bien des petites icônes qui apparaissent sous votre page de couverture.

exemple onglets

Etape 1 : se connecter à l’interface développeur de Facebook

Connectez-vous sur https://developers.facebook.com/apps avec vos codes habituels pour Facebook.

Etape 2 : commencer la création de son onglet

Cliquez sur « Créer une application » et une fenêtre apparaitra en franglais. Entrez le nom de votre application ainsi qu’un nom en mode ID (comme_ca_par_exemple). Vous avez également l’option d’héberger votre application chez Heroku; mais sachez que pour la plupart d’entre nous, ça ne sera pas utile.

Vous arriverez ensuite dans l’interface de gestion des applications.

Etape 3 : illustration et infos à remplir

Choisissez une image et une icône qui illustreront votre onglet personnalisé. Rappelez-vous qu’elles se retrouveront tout en haut de votre page Facebook, donc pensez bien « call-to-action ». Choisissez une image qui incitera votre visiteur à cliquer !

Remplissez aussi les infos « app domains » et « catégorie ».

 


Etape 4 : création du contenu qui apparaitra au sein de votre onglet

Il est temps de passer à la phase de création d’une page web en dehors de Facebook. Celle-ci apparaitra donc dans votre onglet. Pour être sûr d’avoir un contenu qui s’affiche correctement sur Facebook, faîtes bien attention de fixer la largeur à 100% ou à 810px. Assurez-vous aussi d’avoir des images, vidéos & co qui fassent moins de 810px.

facebook screenshot

Etape 5 : ajoutez votre contenu à votre onglet Facebook

Retournez à vos paramètres d’applications sur l’interface développeurs de Facebook et sélectionnez « Onglet Page » dans la section « Select how your app integrates with Facebook » (je vous avais prévenu pour le Franglais !). Nommez votre onglet puis copiez l’URL de la page que vous venez de créer dans l’étape 4 et collez là dans le champs « Page Tab URL ».

Enfin, dans « Website with Facebook Login », entrez votre URL en n’oubliant pas de rajouter le http:// devant.

Etape 6 : moment final, ajoutez votre onglet à votre page Facebook

Attention, c’est le moment d’être encore plus attentif. Pour ajouter votre nouvel onglet à votre page Entreprise Facebook, vous devez vous rendre sur un lien « http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL »

Vous devez remplacer les parties en gras « YOUR_APP_ID » et « YOUR_URL » avec vos propres données que vous trouverez sur votre résumé d’application.

Vous devriez avoir une page comme celle de dessous qui s’affiche. Si vous gérez plusieurs pages, vous devrez choisir à quelle page Facebook votre onglet va s’ajouter !

En allant sur votre page Entreprise Facebook, vous verrez votre tout nouvel onglet apparaitre. Vous pouvez changer l’ordre des onglets en cliquant sur le petit crayon qui apparait en haut à droite de l’onglet et en sélectionnant « changer de position avec… ».

Et voilà le travail…

Article original : http://blog.hubspot.com/blog/tabid/6307/bid/26330/How-to-Create-Custom-Tabs-for-Facebook-Business-Pages.aspx#ixzz20nqapQ6v

Articles similaires

49 comments

  1. Ping : Les incontournables de la semaine du 16 Juillet 2012 | STONEPOWER BLOG

  2. Nathalie C il y a 1 mois 

    Bonjour,
    Complexe tout ça. Mais je pense que ma problématique est différente. J’ai mon onglet « Articles » en affichage texte et je voudrais qu’il s’affiche avec un onglet en image. Est-ce la même démarche avec le lien qui dirigerait vers la page des articles ?

  3. Georgina il y a 10 mois 

    Attractive portion of content. I simply stumbled upon your web site and in accession
    capital to say that I acquire actually loved account your weblog posts.
    Anyway I’ll be subscribing on your feeds or even I success you access constantly rapidly.

  4. Ping : Facebook : créer des onglets personnalis...

  5. Ameye il y a 1 année 

    Bonjour,

    Moi j ai un soucis avec une page créée et qui ne s’affiche pas via firefox mais par ex aucun problème avec Safari.
    Quelqu’un a une idée?

  6. Mailys il y a 1 année 

    Bonjour, merci pour ton aide mais je suis bloquée, après avoir tout installé, mon onglet affiche vide… alors que l’adresse indiquée précédemment est correcte…
    Comment faire ?

  7. BenoitbBenoit il y a 1 année 

    @Alexa
    Je suis pas sur que mettre en pdf soit une bonne idée : selon les navigateurs et les préférences utilisateurs, un lien pointant vers ce type de fichier se comporte différemment, le fichier peut s’ouvrir dans le navigateur (dans l’iframe de facebook dans le cas présent), ou ouvrir une fenêtre de dialogue demandant de télécharger le fichier :/
    Créer une page html me semble la meilleur solution

  8. Alexa il y a 1 année 

    est-ce que la page web que l’on doit créer (le contenu du nouvel onglet) peut-être fait sous n’importe quelle forme? C’est-à-dire est-ce que cela peut-être un PDF en ligne, ou autre?

    Merci d’avance pour votre aide

  9. beryl il y a 1 année 

    Merci beaucoup Benoit pour ton aide. Je vais effectivement essayer de refaire une page aux bonnes dimensions… mais novice en la matière cela risque d’être drôle.
    J’abuse un peu mais à tout hasard est ce que vous savez comment on fait toujours sur Facebook pour avoir un « Go to the app » en haut à droite entre le like et le message ?

    exemple: https://www.facebook.com/app.yosee

    Merci beaucoup

  10. Gaelle Cealac il y a 1 année 

    Merci pour ta contribution à nouveau Benoit :)

  11. Benoit il y a 1 année 

    @beryl
    pour l’onglet visible que par les admin, vérifie que le mode « bac à sable » ne soit pas activé dans les paramètres de l’appli

    sinon, un onglet n’est pas un bouton de renvoi direct vers un site internet, c’est même sanctionnable par Facebook
    un onglet permet de charger (DOIT charger même) dans Facebook une page particulière de votre site spécialement conçue pour, ne serait-ce qu’en terme de largeur, voir l’étape 4 de cet article qui rappelle que la page doit faire 810px de large maximum (ou être adaptative en utilisant des pourcentages), mais aussi, (éventuellement) dépouillée de tout menu de navigation

    j’ai eu les même problématiques, je voulais afficher ce qui ressemble à une liste de produits et qui aurait renvoyait directement sur la fiche produit concernée,
    j’ai du créer une page « clone » de ma liste répondant aux contraintes de largeur
    le problème suivant, était que les liens se chargeaient toujours dans l’iframe facebook et non pas dans une nouvelle fenêtre comme je l’auvait voulu, il faut donc penser à ajouter dans son code html l’attribut target à ses liens (perso, ma liste était trop longue pour être éditée à la main, j’ai contourné ce problème avec un bout de javascript)

  12. beryl il y a 1 année 

    Bonjour,
    Merci beaucoup pour ton article qui est super bien expliqué…. mais j’ai du louper un truc puisque que uniquement les administrateurs de ma page Facebook peuvent voir mon onglet. Et de mon coté quand je clic sur celui ci ca ne m’enmene pas directement sur mon site mais intègre mon site dans une page Facebook … ce qui du coup coupe mon site de part et d’autre…. pas jolie jolie ! UN idée pour me sortir de cette impasse ?
    Merci :-)

  13. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise – Le Blog Kinoa | Astuces Marketing

  14. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise | The social guideline

  15. Ping : Facebook : créer des onglets personnalis...

  16. Ping : Facebook : créer des onglets personnalis...

  17. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise | boulot web | Scoop.it

  18. Gaelle Cealac il y a 1 année 

    Rebonjour Carson,

    Effectivement, vous pouvez utiliser l’option « inviter des amis » depuis la page Entreprise pour inviter les amis du profil qui gère la page. Ils recevront alors un mail leur proposant « d’aimer » la page en question.

    Nous avons des formations spécialisées sur Facebook Entreprise où nous étudions les problématiques de votre marque si vous voulez aller plus loin !
    http://www.institutkinoa.com/formation-facebook-3

  19. Carson il y a 1 année 

    Par contre, que pensez-vous de l’option « invitez vos amis ». Permet de signaler sa page pro à ses amis et les invitez à cliquer sur la page pro.

    Question : comme ils ont le statut d’amis, ils n’apparaitront pas dans les notifications mais viendront directement cliquer sur la fan page c ça ?

  20. Carson il y a 1 année 

    Bonjour Gaelle,

    Merci pour votre retour rapide. Effectivement, j’avais du mal à trouver des informations allant dans ce sens.

    C noté, encore merci !

  21. Gaelle Cealac il y a 1 année 

    Bonjour !

    @camille : regarde tout en bas de ta page et clique sur « créer une page »

    @carson : lorsqu’on transforme un profil en page, les amis deviennent obligatoirement des fans. Par contre, il est impossible de récupérer les amis sans transformer son compte perso en page Entreprise !

  22. Carson il y a 1 année 

    bonjour,

    Je souhaite transférer les amis facebook du compte perso de mon entreprise en fans sur une page facebook professionnelle. Connaissez-vous un procédé pour le faire ? A noter que mon directeur ne veut pas transformer son compte perso en page fan !

    D’avance merci pour vos retours.

  23. Camille il y a 1 année 

    C’est con mais bon… J’arrive pas a trouver rien que le truc « créer une page » ça dois etre a cause de la fatigue mais si tu pouvais m’aider merci :)

  24. Gaelle il y a 1 année 

    Bonjour Lucie

    Pour l’étape 4, tu dois faire exactement comme lorsque tu crées une nouvelle page sur ton site web. Donc, non tu n’as pas forcément de codage, mais c’est selon ta plateforme et ce que tu envisages de faire !

  25. Lucile il y a 1 année 

    Bonjour,
    Merci pour cette info bien utilise :-) En revanche, je bloque sur l’étape 4 … Comment puis-je créer une page en-dehors de facebook ? Il faut que je sache coder pour le faire?
    Merci de ton aide
    Bonne journée

  26. Gaelle il y a 1 année 

    Merci d’avoir partagé l’info !!

  27. Benoit il y a 1 année 

    J’ai identifié la source du problème : « Page Tab URL » et « Secure Page Tab URL »

    il semble que lorsque l’on est pas connecté, se soit la « secure » page qui se charge

    moi je me suis contenté de mettre la même url dans les 2 champs avec « S » en plus pour la 2e …

    le problème vient de mon serveur qui ne dispose pas (encore) de « certificat SSL », du coup c’est comme si la 2e url n’existait pas

    l’info aidera peut-être de futurs lecteurs

  28. Gaelle il y a 1 année 

    Bonjour Benoit,

    Je n’ai malheureusement pas d’explications pour ce problème. En n’étant pas connecté, vous devriez être redirigé vers la page de connexion. Je ne m’explique pas le « page web inaccessible » !

  29. Benoit il y a 1 année 

    Merci pour ce tuto qui m’a bien aidé.

    Par contre, j’ai remarqué un truc, quelqu’un qui n’a pas de compte facebook (ou qui n’est pas connecté) et qui clique sur notre onglet perso voit une page d’erreur (« Page web inaccessible »).

    Il doit y avoir un problème d’autorisation ou une option de visibilité quelque part que j’ai pas/mal configuré qqpart, mais je ne vois pas où ?

  30. Gaelle Cealac il y a 1 année 

    Bonjour Roxane,

    Je n’ai jamais été confrontée à ce problème alors je suis désolée de ne pas pouvoir t’aider.
    En regardant sur le net, j’ai trouvé cette piste : Outils > Options > Avancé > Chiffrement. Est ce que la case « Utiliser SSL 3.0″ est bien cochée ?

  31. Roxane il y a 1 année 

    Bonjour,

    J’ai créé mon onglet mais après avoir cliquer dessus sur ma page entreprise on me signale une erreur de connexion SSL:

    « Erreur 107 (net::ERR_SSL_PROTOCOL_ERROR) : Erreur de protocole SSL »

    J’ai mis URL d’une page déjà existante et je n’ai pas vraiment compris l’étape 4 ( que j’ai sauté du coup) sorry !

    Que dois je faire ? Merci de ta réponse !

  32. Carson il y a 1 année 

    merci :) – c fait !

  33. gaelle il y a 1 année 

    Bonjour,

    Je reviens de vacances et je vous réponds donc maintenant :)

    @Thiais et @Carson, pour your_url, il faut insérer la page créée à l’étape 4. Vérifiez que vos pages, hébergées sur vos serveurs, apparaissent correctement en dehors de Facebook.

  34. Carson il y a 1 année 

    Bonjour,

    D’abord merci pour ce tutoriel très simple. Par contre je rencontre 2 problèmes :
    - je n’arrive pas à publier mon onglet sur mon mur.
    - l’url de pointage redirige vers une page d’erreur.

    Pourriez-vous m’aider, je dois créer ce même onglet sur la page Facebook pour mon entreprise mais là également, je rencontre ces 2 mêmes problèmes.

    Un grand merci pour votre aide !

    Syl

  35. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise | Le Blog Kinoa | @[483988358319157:o] | Scoop.it

  36. Thais il y a 1 année 

    Super, merci pour ton aide.

    J’en suis à l’étape ultime, mais petit soucis, pour your app_id, pas de soucis, mais tu mets quoi a your_url ?

    j’ai une erreur :
    API Error Code: 191
    API Error Description: The specified URL is not owned by the application
    Error Message: redirect_uri is not owned by the application.

    Merci pour ton aide

    Thais

  37. Floop il y a 1 année 

    Yep les onglets ont fonctionné finalement

  38. Gaelle Cealac il y a 1 année 

    Merci Fontaine !
    Est-ce que les onglets de Floop ont fonctionné au final ?

  39. Fontaine il y a 1 année 

    Super interessant! Merci

  40. Ping : 5 astuces pour optimiser votre page facebook entreprise. | Le Blog Odomia.

  41. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise | Astuces Marketing

  42. floop il y a 2 années 

    Super ca marche j’ai bine mon onglet par contre quand je clique dessus ma page html créée sur mon site ne s’affiche pas :( une idée ?

  43. Ping : Com j'aime » Blog Archive » Créer des onglets personnalisés pour votre page Entreprise FB

  44. gaelle il y a 2 années 

    Et oui Oweia, c’est finalement plus simple qu’on ne le pense et c’est tant mieux :)

  45. Oweia il y a 2 années 

    Merci, c’est plus simple que ce que j’aurai cru en fait, et bien pratique du coup. Hubspot est une excellente référence au passage, merci pour la traduction !

  46. Ping : Facebook : créer des onglets personnalisés pour votre page Entreprise « la bibliothèque, et veiller

  47. gaelle il y a 2 années 

    Je ne connais pas mais ça m’a l’air payant alors que les étapes décrites plus haut sont évidemment gratuites :)
    Par contre, ça sous-entend du développement en interne bien sûr !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


8 − trois =