Le blog d'Eenov, solutions eenovantes !

Créez un onglet personnalisé en HTML pour votre page Facebook (Timeline)

FacebookVoici un petit tutoriel sur la façon dont créer votre appli Facebook et comment la greffer à votre pageFacebook en tant qu’onglet. Cette méthode est valable pour la nouvelle présentation des fanpages (sous forme de Timeline).

 

 

Pré requis :

  • Posséder un compte Facebook Developer
    -> pour créer et gérer des applications
  • Posséder une solution d‘hébergement
    -> hébergeur de type OVH , 1and1 …
  • Posséder un certificat SSL
    -> Facebook impose la navigation sécurisée pour ses applications (avec du contenu affiché en HTTPS)
  • Avoir créé la page où l’on veut placer l’onglet personnalisé

 

Onglets personnalisés Facebook

 

1)      Créez le contenu de l’application (page HTML)

  • Réalisez votre contenu à afficher dans l’onglet, vous pouvez utiliser la technologie que vous souhaitez : HTML/CSS, php, JS,
  • 520 ou 810 pixels de large, illimité en hauteur,
  • Hébergez ce document sur votre serveur, le domaine utilisé devant être accessible en HTTP et HTTPS.

 

Facebook Developers : créez votre appli Facebook

 

2)      Créez l’application sur Facebook

  • Allez sur votre compte Facebook Developer, cliquer sur « Applications » en haut à droite puis sur « Créer une application »,
  • Rentrez le nom de votre application, puis son « Namespace » (sans espaces) : c’est le nom repris dans l’URL de l’appli.

 

Création de votre application Facebook

 

3)      Renseignez les paramètres de l’application

Seuls quelques champs ont besoin d’être renseignés afin de pouvoir utiliser l’application :

  • Display Name : le nom de l’application,
  • Namespace : pour l’URL de l’application sur Facebook,
  • Catégorie : Définit le thème de l’application.

Ensuite, choisissez comment l’application s’intègre à Facebook (ici en tant qu’onglet de votre page) :

  • Allez dans « Onglet Page »,
  • Renseignez le nom de l’onglet (celui qui sera affiché sur la page),
  • Renseignez l’URL de la page HTTP où est hébergé le contenu de l’appli ( ex : http://www.monsite.com/facebook/index.html),
  • Faites la même chose  pour le domaine en HTTPS,
  • Choisissez une image miniature pour l’onglet (visible sur la page) (111x74px),
  • Cochez la largeur de votre application pour optimiser son affichage (vous avez le choix entre l’ancien affichage en 520px et le nouveau en 810px – Votre appli sera centrée dans la page si vous sélectionnez la largeur de 520px.),
  • Cliquez sur « Enregistrer les modifications ».

 

4)      Ajoutez l’onglet à votre page Facebook

  • Notez l’ID de votre application (App ID, présente en haut des paramètres),
  • Rentrez l’URL suivante dans votre barre de navigation : www.facebook.com/dialog/pagetab?app_id=VOTRE_ID&next=VOTRE_URL,
  • Remplacez « VOTRE_ID » par celle de votre application puis « VOTRE_URL » par celle de la page où est hébergé votre contenu (http://www.monsite.com/facebook/index.html),
  • Appuyez sur entrée,
  • Là, on vous propose d’ « Ajouter un onglet de page »,
  • Sélectionnez la page sur laquelle vous souhaitez mettre l’onglet, puis validez.

Et voilà ! Votre onglet est bel et bien greffé à votre fanpage =)
Si vous avez des questions sur la mise ne place de votre onglet, n’hésitez pas à nous écrire !

D’après la doc Facebook

Posté par : Marion le 09/07/2012
Développement / Open Source, Web-marketing
Tags : , , , ,

3 commentaires

  • […] Voici un petit tutoriel sur la façon dont créer votre appli Facebook et comment la greffer à votre pageFacebook en tant qu'onglet. Cette méthode est valable pour la nouvelle présentation des fanpages (sous forme de Timeline).  […]

  • sheila dit :

    Bonjour,

    Merci pour ce tuto bien utile. Je pense avoir tout suivi à la lettre, cependant, j’ai une erreur qui persiste. Lorsque je mets en place mon onglet sur Facebook, j’ai un joli ‘Not found’ qui s’affiche à la place. Pourtant, lorsque je tape l’adresse de mon onglet https://www.mondomaine.com/facebook/mononglet.html dans la barre URL, ma page s’affiche correctement. Je ne comprend pas où je me suis planté dans la mise en place de mon appli.
    Un petit coup de pouce serait le bienvenu.
    Merci de ton aide!

    • Marion dit :

      Bonjour,

      De mon côté tout fonctionne pourtant. Avez-vous bien suivi les étapes (cf l’imprim écran) ? Avez-vous bien un certificat SSL pour votre nom de domaine (url en https://…) ?

      Cdt

  • Poster un commentaire

    Vous voulez donner votre avis ?
    Laissez un commentaire !

    Laisser un commentaire

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