Blog inspirant depuis 2008
  • Pin It

Créer une page d’accueil à votre page Fan Facebook grâce au iFrame

Fan Facebook

Facebook annonça le 11 Mars 2011, la fin de l’application Static FBML. Celle-ci permettait aux administrateurs d’une page fan Facebook de se créer facilement et rapidement une page d’accueil personnalisée.

Désormais, la solution de rechange pour arriver au même résultat est de vous créer votre propre application iFrame. Celle-ci comporte plusieurs étapes, mais est quand même assez simple à implanter.

À l’aide de vos connaissances en HTML et en CSS ainsi que de ce tutoriel, vous pourrez apprendre comment vous bâtir facilement votre propre « landing page ».

Comment créer une Page d’accueil Personnalisée dans Facebook?

La première étape pour la création de votre page d’accueil sera de la construire en HTML et en CSS (au besoin).

N’oubliez pas que la largeur maximale des pages Facebook personnalisées est de 520 pixels. Par la suite, téléversez votre page ainsi que vos fichiers images et CSS (si de mise) vers un répertoire sur un serveur web.

Si vous êtes en manque d’inspiration pour votre page, voici un article paru précédemment sur des exemple de pages fan Facebook situé au bas de l’article.

Installation de l’application Facebook pour votre page

La première étape dans la création d’une application Facebook est d’installer l’application « développeurs Facebook » (Facebook Developer application) disponible à cette adresse : facebook.com/developers/.

S’il s’agit de la première fois que vous effectuez cette étape, vous verrez apparaître une boîte de dialogue comprenant les demandes de permissions suivantes :

Permission application

Cliquez sur le bouton Allow pour procéder.

Créer votre application iFrame

Maintenant que l’application développeurs est installée, cliquez sur « Set up New App ».

ajouter une application Facebook

Donnez un nom à votre application puis cliquez sur « Agree » et sur le bouton « Create App ».

Nom d'une page fan

Plusieurs options peuvent être modifiées lors de l’amorçage d’une nouvelle application. Cependant, pour les besoins de la cause, nous utiliserons seulement les paramètres de bases.

Dans l’onglet « About », nommez votre application dans la case prévue à cet effet et ajoutez également une courte description. Toujours dans cette section, vous avez aussi la possibilité de téléverser une icône qui sera utilisée sur votre page fan.

L’onglet « Facebook Integration »

Cliquez sur l’onglet « Facebook Integration ».

Intégration page fan

  • « Tab Name » : Entrez le nom de la page qui apparaîtra dans votre barre de gauche de votre page fan. Vous pouvez insérer jusqu’à 16 caractères.
  • « Page Tab Type » : utilisez l’option iFrame.
  • « Tab URL » : Dans cette case, entrez l’adresse URL qui pointe vers le fichier HTML de votre page que vous avez mis auparavant sur votre serveur web.
  • « Secure Tab URL » : Cette case est optionnelle. Il s’agit d’une adresse URL sécurisée (HTTPS) pointant vers le fichier HTML de votre page. Cette page sera diffusée aux utilisateurs naviguant seulement par l’entremise d’une connexion sécurisée (https://facebook.com).

Sauvegardez vos paramètres.

Installation de l’application iFrame sur votre page Fan

Une fois votre application créée, il vous reste à l’ajouter à votre page Fan. Pour ce faire, cliquez sur le lien « View App Profile Page » situé à droite sur votre page « développeurs Facebook » dans vos applications.

app page

Cliquez sur le lien « Ajouter à ma page » (« Add to My Page ») situé au bas à gauche de la page de l’application. Une boîte de dialogue s’ouvrira alors vous demandant sur laquelle de vos pages fan vous désirez ajouter cette application. Sélectionnez votre page.

Ajouter à page Facebook

Votre nouvelle application iFrame devrait désormais apparaître dans les onglets à gauche de votre page fan. Si ce n’est pas le cas, vous devrez aller dans les paramètres de votre page « Modifier la page » (« Edit Page »). Dans l’onglet « Apps », cliquez sur « Modifier les paramètres » (« edit setting ») de votre application et ajouter l’option « tab ».

Enfin, pour utiliser votre application iFrame comme page d’accueil par défaut pour les non-membres de votre page, retournez dans les paramètres de votre page fan, puis cliquez sur « Gérer les permissions » (« Manage Permission »). À côté de la mention « Default Landing Page », dans le menu déroulant, sélectionnez votre application.

Voilà! J’espère que ce tutoriel vous aura aidé dans vos démarches de création de votre page d’accueil personnalisée. N’hésitez pas à laisser vos commentaires ci-dessous.

11 commentaires

  • clercius caleb | 2011/08/18

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Felicitation pour cette service impecable

  • David | 2011/09/22

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Salut,

    Le problème, c’est que pour installer « Facebook Developer application », il faut un profil facebook,
    et que pour une « page » on ne peut pas avoir de profil…

  • Syn Logan | 2011/10/03

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Quand je commance a créer mon application le message d’erreur suivant s’affiche.
    « Votre compte doit être vérifié avant que vous ne puissiez effectuer cette action. Veuillez vérifier votre compte en ajoutant votre téléphone mobile ou votre carte de crédit. »

    Que dois-je faire ?

  • Louis_Dea | 2011/10/03

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Entrer votre numéro de téléphone mobile comme demandé.

  • Jim | 2011/10/03

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Une petite question, j’ai chercher toute l’apres midi ou ce trouve l’onglet intégration a facebook Dans l’ordre j’ai :
    Paramètres ( Basic, Auth Dialog, Avancé)
    Open Graph
    Rôles
    Crédits
    Insights

    Et ensuite les liens utils.

    Et dans « Select how your app integrates with Facebook »
    On ne me demande site web : ( je met quoi ? :/ )
    Application facebook : ( même question)

    J’aimerai avoir un résultat proche de celui la : http://www.facebook.com/allthatremains

    Avec incorporation de date de tournai un lecteur de music et video un store et si possible une page comme coca colas ou Red Bull ou il faut cliquer pour pouvoir entrer sur la page.
    Je me charge de la page fan d’un groupe qui commence a ce faire connaitre dans ma région.
    Merci d’avance en espérant avoir une réponse rapidement bonne journée

  • Susanne | 2011/11/16

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    J’ai créé un mini website em Flash que j’aimerais insérer dans ma page fan.

    Je n’ai aucun problème pour savoir comment faire techniquement mais je viens de lire dans l’un de vos articles que Facebook n’autorisait pas que les applications en Flash démarrent automatiquement. Cela veut-il dire que je ne peux pas insérer mon site en Flash dans ma page fan ?

    Si c’est le cas est-ce que cela veut dire que je dois créer une image initiale avec un bouton pour que les fans cliquent afin de pouvoir visualiser le website Flash en question ?

    Je vous remercie d’avance pour votre aide.

    Susanne

  • Anne | 2012/01/02

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Bonjour !
    Je ne trouve pas « ajouter une application » dans la rubrique modifier la page ?
    Est-ce que j’ai mal vu ?
    D’autre part, quand je veux rechercher un profil à partir de ma page je tombe sur un « tableau » et pas sur un profil normal ?
    Merci de vos explications !
    Et bonne année à tous !!! et toutes !

  • EDEM | 2012/02/01

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    Je crois qu’avec les nouvelles mise a jour de facebook, on a plus le liens  » voir le profil de lapplication » on fait comment pour acceder a l’application ?

  • niah | 2012/04/06

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    quand je suis dans le truc develloper je ne vois pas le truc ajouter a ma page et je n’ai pas vu non plus l’onglet facebook integration

  • ROUFF D. | 2013/02/04

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    CECI EST NOUVEAU POUR MOI. JE FAIT UN ESSAI. SI CA MARCHE VS POURREZ VENIR VOIR CE QUI ME DISTRAIT DANS LA VIE. MERCI DE VOTRE COMPREHENTION . !!!!!

  • lefevre | 2015/04/07

    Warning: Undefined variable $default_avatar in /home/hochedez/public_html/marevueweb.com/wp-content/themes/marevueweb2012/comments.php on line 30

    bonjours

    pour facebook sa me donne pas trop d’idee perso

    merci

    cordialement

Laisser un commentaire