{"id":42,"date":"2010-05-21T00:37:11","date_gmt":"2010-05-20T22:37:11","guid":{"rendered":"http:\/\/www.davel.fr\/techblog\/?p=42"},"modified":"2010-05-21T16:58:47","modified_gmt":"2010-05-21T14:58:47","slug":"un-onglet-personnalise-sur-une-fan-page-facebook-comment-on-installe","status":"publish","type":"post","link":"https:\/\/www.davel.fr\/techblog\/2010\/05\/un-onglet-personnalise-sur-une-fan-page-facebook-comment-on-installe\/","title":{"rendered":"Un onglet personnalis\u00e9 sur une fan page Facebook : comment on installe ce bordel ?"},"content":{"rendered":"

En ce moment je d\u00e9veloppe pas mal d'applications sur Facebook. Non pas que \u00e7a me plaise particuli\u00e8rement mais c'est en vogue : un site qui a r\u00e9ussi \u00e0 faire plus de pages vues que google sur une semaine forc\u00e9ment \u00e7a attire de l'annonceur. Et ce qui marche bien en ce moment c'est de personnaliser les onglets des fans pages <\/strong>et d'y afficher un contenu divers et vari\u00e9 pour repr\u00e9senter la marque : image\/son\/vid\u00e9o\/RSS de Blog\/formulaire\/toutskonveutmaisl\u00e9gal.<\/p>\n

Je ne me pencherai pas ici sur l'aspect marketing ou m\u00eame sur la pertinence des strat\u00e9gies des op\u00e9rations men\u00e9es sur ce medium, d'autres le font largement mieux que moi - on mettra des liens en commentaire, promis.
\nNon, l\u00e0 je vais expliquer pas-\u00e0-pas comment mettre en place techniquement cette saloperie d'onglet <\/strong>(non, il n'est pas possible de mettre une bavette \u00e0 la place).<\/p>\n

Souvent, je travaille en sous-traitance pour des agences qui ne veulent pas me voir apparaitre parmi les d\u00e9veloppeurs de l'application ou m\u00eame encore pour des clients qui veulent garder tout contr\u00f4le sur ce que je leur livre. Grand bien leur fasse, moi \u00e7a ne me pose pas trop de soucis.
\nSauf qu'il arrive tr\u00e8s r\u00e9guli\u00e8rement un moment o\u00f9 un non-technicien, parfois m\u00eame qui connait \u00e0 peine facebook (si si \u00e7a existe encore) me demande comment il faut faire pour installer ce que je lui ai livr\u00e9. Et ce ne serait pas tr\u00e8s commer\u00e7ant de lui r\u00e9pondre \"d\u00e9brouille-toi !\" ;)<\/p>\n

Alors voil\u00e0, pour me faciliter la vie, peut-\u00eatre j'esp\u00e8re faciliter la votre si vous \u00eates dans la m\u00eame situation que moi, ou m\u00eame pour vous, voici une petite explication d\u00e9taill\u00e9e de la proc\u00e9dure <\/strong>\u00e0 suivre...<\/p>\n

Note pr\u00e9alable :<\/strong> Je d\u00e9cris ici la\u00a0mani\u00e8re\u00a0d'installer une application avec les fichiers sur un serveur et tout le tintouin. G\u00e9n\u00e9ralement c'est la m\u00e9thode qui est utilis\u00e9e pour r\u00e9cup\u00e9rer des infos d'une base de donn\u00e9es ou\u00a0utiliser les API Facebook dans du contenu interactif.
\nSi vous n'avez que du contenu statique \u00e0 mettre en place, vous pouvez simplement \u00e9viter toute la partie concernant la mise en place de l'application et ajouter \u00e0 votre page celle-ci : Static FBML<\/a>.<\/p>\n

Si tout va bien vous avez \u00e0 votre disposition un espace o\u00f9 stocker vos fichiers - un h\u00e9bergement ou un serveur avec une adresse accessible - et tout un tas de fichiers[*].<\/p>\n

L'application est au moins compos\u00e9e de fichier qui comportent ou g\u00e9n\u00e8rent du FBML<\/strong>, le langage de facebook, ce sont donc des fichiers html, php, asp(x), jsp, etc[**]. L'un d'entre eux est celui qui correspond au contenu de base de l'onglet, il est bon que vous le rep\u00e9riez de suite. Dans mon exemple mon fichier\u00a0s'appellera\u00a0\"tab.php<\/em>\".<\/p>\n

Premi\u00e8re tann\u00e9e : Cr\u00e9er et installer l'application.<\/h3>\n

Pour cr\u00e9er une application il faut \u00eatre \"d\u00e9veloppeur\" sur Facebook. Pour cela pas besoin de dossier m\u00e9dical, ni questionnaire de sant\u00e9 et encore moins de\u00a0l\u00e9cher\u00a0la\u00a0casserole. Non, il suffit de se rendre sur http:\/\/www.facebook.com\/developers\/<\/a> et d'autoriser l'application. Et voil\u00e0 ! Vous \u00eates d\u00e9veloppeur(-euse), mais pas\u00a0d'inqui\u00e9tude \u00e7a n'est pas forc\u00e9ment contagieux.<\/p>\n

Vous voyez le petit bouton en haut \u00e0 droite qui vous indique que vous pouvez mettre en place une nouvelle application ? bin cliquez-dessus prestement.<\/p>\n

\"Cr\u00e9er<\/a><\/p>\n

Indiquez le nom de votre application. Je vous conseille d'utiliser un nom reconnaissable car il pourra apparaitre aux utilisateurs. Acceptez les conditions d'utilisation de facebook - j'ai essay\u00e9 de ne pas le faire et l'op\u00e9ration de cr\u00e9ation est refus\u00e9e. Damned ils sont trop malins les bougres.<\/p>\n

\"\"<\/a><\/p>\n

Votre application existe donc \u00e0 partir de maintenant et vous pouvez admirer une superbe page de r\u00e9sum\u00e9 de celle-ci.
\nVous y trouverez deux donn\u00e9es importantes : l'API Key <\/strong>et l'Application Secret<\/strong>. Selon les fonctionnalit\u00e9s de votre onglet, vous en aurez peut-\u00eatre besoin[***].<\/p>\n

\"\"<\/a><\/p>\n

Nous allons maintenant \u00e9diter les param\u00e8tres de l'application. Allons sur Edit Settings <\/em>et d\u00e9couvrons le premier \u00e9cran. Il permet de param\u00e9trer les informations principales de l'application<\/strong>. Elles ne sont pas toutes n\u00e9cessaires pour la mise en place de l'onglet d'une fan page mais je vous conseille au moins d'envoyer les logos qui peuvent apparaitre sur certaines popups, partages ou sur la page publique de l'application.<\/p>\n

<\/a>\"\"<\/a><\/p>\n

Dans la partie Authentification <\/em>il faudra indiquer que l'application est installable sur les pages<\/strong>. Il est relativement inutile de la rendre installable pour les utilisateurs vu qu'en g\u00e9n\u00e9ral le but d'une fan page est d'augmenter le nombre de fans pour pouvoir par la suite communiquer avec eux. De m\u00eame, ne vous emb\u00eatez pas avec les URL de retour.<\/p>\n

\"\"<\/a><\/p>\n

C'est sur la partie Profiles <\/em>qu'on va enfin faire des choses concr\u00e8tes : Donner un nom \u00e0 l'onglet de l'application <\/strong>et mettre le chemin vers le fichier qui contient le contenu FBML de l'onglet<\/strong>. Comme je vous l'ai dit plus haut, chez moi ce fichier s'appelle \"tab.php\".<\/p>\n

Notez aussi que si vous \u00eates limit\u00e9s par facebook pour le nombre de caract\u00e8res du nom de l'onglet, vous \u00eates aussi limit\u00e9s par la place disponible sur la barre d'onglets de votre fan page. \u00c0 vous, ou \u00e0 votre CR, de tester et de trouver le meilleur nom possible pour optimiser le succ\u00e8s sans pr\u00e9c\u00e9dent de votre fan page.<\/p>\n

\"\"<\/a><\/p>\n

Canvas <\/em>est la partie qui va vous permettre de mettre l'adresse du serveur <\/strong>o\u00f9 sont h\u00e9berg\u00e9s vos fichiers. Il faut mettre ici le chemin complet vers le r\u00e9pertoire <\/strong>de l'application et pas juste l'adresse du serveur. Trouvez un nom pour l'url de facebook - moins important mais il peut \u00eatre utile d'en avoir un assez explicite pour ne pas passer pour un vil spammeur. Le reste a moins d'importance.<\/p>\n

\"\"<\/a><\/p>\n

J'ai ajout\u00e9 la partie Advanced <\/em>car elle peut-\u00eatre int\u00e9ressante en phase de d\u00e9veloppement : Elle va permettre de mettre l'application en mode 'priv\u00e9'<\/strong> pour que seuls certains ordinateurs ou seuls les administrateurs de l'application puissent y avoir acc\u00e8s. Pour \u00eatre en mode public d\u00e9sactivez le Sandbox (bac \u00e0 sable en fran\u00e7ais si je ne m'abuse). Pour le reste, je vous laisse chercher, il y a de grandes chance pour que vous n'en ayez jamais besoin.<\/p>\n

\"\"<\/a><\/p>\n

Et voil\u00e0 ! Votre application est en place. Content ? Bin calmez-vous c'est loin d'\u00eatre fini !<\/p>\n

Si j'existe... c'est d'\u00eatre fan page !<\/h3>\n

Bah oui, c'est sur une fan page qu'on veut voir notre onglet s'afficher alors la premi\u00e8re chose \u00e0 faire c'est quand m\u00eame de cr\u00e9er une fan page... non s\u00e9rieux vous avez compris \u00e7a quand m\u00eame ?<\/p>\n

Bon alors rendez-vous sur la page http:\/\/www.facebook.com\/pages\/<\/a> qui va vous permettre par un simple bouton, de type \"clique dessus et \u00e7a fait une action\", de commencer \u00e0 cr\u00e9er votre fan page<\/strong>.<\/p>\n

\"\"<\/a><\/p>\n

L'\u00e9cran suivant va vous permettre de choisir le type de page <\/strong>que vous d\u00e9sirez cr\u00e9er. Notez bien que depuis tr\u00e8s peu de temps si vous souhaitez faire de votre onglet la page d'accueil de votre fan page il vous faudra soit avoir plus de 10000 fans, soit vous payer des pub chez facebook. Je vous conseille donc fortement de cr\u00e9er une Official Page<\/em>.<\/p>\n

\"\"<\/a><\/p>\n

Voil\u00e0 votre page est cr\u00e9\u00e9e. Simple isn't it ?<\/p>\n

Par un habile subterfuge vous allez devoir aller sur le profil public de l'application <\/strong>que nous avons cr\u00e9\u00e9e plus haut. Pour cela retournez sur la page d\u00e9veloppeur, cliquez sur votre application dans la liste \u00e0 droite, puis choisissez le profil public de l'application. Il vous sera alors propos\u00e9 tr\u00e8s gentiment (enfin c'est assez neutre mais j'ai d\u00e9cid\u00e9 de le prendre gentiment) d'ajouter l'application \u00e0 une de vos page. Faites-le donc.<\/p>\n

\"\"<\/a><\/p>\n

Voil\u00e0, votre fan page est cr\u00e9\u00e9e, l'application y a \u00e9t\u00e9 ajout\u00e9e<\/strong>. Et ptet m\u00eame que vous en avez plusieurs des fan pages. Sur la page http:\/\/www.facebook.com\/pages\/manage\/<\/a> vous en verrez la liste pour \u00e9diter les param\u00e8tres <\/strong>de celle que vous voulez.<\/p>\n

\"\"<\/a><\/p>\n

Dans la liste des applications qui ont \u00e9t\u00e9 ajout\u00e9es \u00e0 votre page, vous allez facilement retrouver la votre et \u00e9diter ses param\u00e8tres. C'est l\u00e0 que vous allez pouvoir rajouter l'onglet <\/strong>(tab).<\/p>\n

\"\"<\/a><\/p>\n

Note : Depuis le 20 mai 2010, il parait qu'il faut 10000 fans et\/ou acheter de la pub \u00e0 facebook pour cette derni\u00e8re partie. Mais je l'ajoute quand m\u00eame pour l'instant l'option apparait encore sur mes fan pages.<\/em><\/p>\n

Remontez en haut de la page d'\u00e9dition. \u00c9ditez les param\u00e8tres du Mur <\/strong>(Wall) et choisissez votre nouvel onglet en tant que Landing Page<\/strong>. Et hop, les nouveaux arrivants, ceux qui ne sont pas encore fans, devraient arriver directement sur votre onglet.<\/p>\n

\"\"<\/a><\/p>\n

Et bin vous savez quoi ? Vous avez r\u00e9ussi !!!<\/strong><\/p>\n

\u00c7a me fait quand m\u00eame sacr\u00e9ment l'effet d'une aventure o\u00f9 les \u00e9nigmes sont du niveau des meilleurs point'n'clicks de la grande \u00e9poque Lucas Arts <\/em>: c'est super relou de trouver ce qu'il faut faire - comme tout ce qui a trait au d\u00e9veloppement facebook - mais une fois que c'est fait on est quand m\u00eame bien content. Voyez donc tout cet article comme une sorte de soluce pour un jeu pas tr\u00e8s fun.<\/p>\n

Alors je sais aussi que le ton que j'emploie ici ne sera pas forc\u00e9ment pour plaire \u00e0 tous les clients. Ce n'est pas tr\u00e8s grave, je vous laisse reprendre sans soucis mes copies d'\u00e9cran, et r\u00e9-\u00e9crire les textes \u00e0 votre sauce corporate. C'est bien normal. Et bien sur n'h\u00e9sitez pas si d'aventure vous voyez une coquille dans le texte ou dans la m\u00e9thode \u00e0 laisser des commentaires.<\/p>\n

[*] Si vous n'avez aucune id\u00e9e de ce qu'il faut mettre dans ces fichiers mais que vous voulez quand m\u00eame mettre en place une applicationfan page avec plein de trucs hyper coules dedans, vous pouvez aussi vous adresser <\/em>\u00e0 des sp\u00e9cialistes hypra-sympathiques afin de les cr\u00e9er pour vous<\/em><\/a>.<\/em><\/span><\/p>\n

[**]\u00a0euh non attention, il n'y a aucun fichier qui peut\u00a0s'appellera \"index.etc\" ;)
\n<\/em><\/span><\/p>\n

[***] Ce sont des \u00e9l\u00e9ments qui vont vous permettre d'identifier votre application aupr\u00e8s de\u00a0\u00a0Facebook pour aller chercher des informations sur les utilisateurs. ex. lister les amis, afficher le nom\/pr\u00e9nom, etc.<\/em><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

En ce moment je d\u00e9veloppe pas mal d’applications sur Facebook. Non pas que \u00e7a me plaise particuli\u00e8rement mais c’est en vogue : un site qui a r\u00e9ussi \u00e0 faire plus de pages vues que google sur une semaine forc\u00e9ment \u00e7a attire de l’annonceur. Et ce qui marche bien en ce moment c’est de personnaliser les […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[13,50,12,14],"class_list":["post-42","post","type-post","status-publish","format-standard","hentry","category-facebook","tag-application","tag-facebook","tag-fan-page","tag-tutoriel"],"_links":{"self":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/42","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":54,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"predecessor-version":[{"id":44,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/posts\/42\/revisions\/44"}],"wp:attachment":[{"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.davel.fr\/techblog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}