Développer une application Facebook pour sa page marque n’est pas ce qu’il y a de plus difficile. Cependant, au fil des ans et des mises à jour successives, l’opération est devenue de plus en plus fastidieuse. D’autant plus que la documentation officielle n’est souvent pas à jour et que les moteurs de recherche proposent quant à eux des articles assez anciens et donc obsolètes, ces derniers pullulants sur le Net. Voici donc quelques astuces et conseils qui, je l’espère, vous feront gagner du temps…
Oubliez le FBML, vive les IFRAME Apps !
Annoncée depuis fin 2010, la mort du FBML se rapproche inexorablement et aura lieu cette année (https://developers.facebook.com/blog/post/568/).
Depuis le début 2012, le langage n’est plus supporté ni les éventuels bugs corrigés.
Depuis le 18 mars, il n’est plus possible de créer une application basée sur du FBML, uniquement des applis de type IFRAME. Les applications existantes continuent de fonctionner cependant.
Le 1er juin 2012 : arrêt complet et définitif du FBML. Toutes les applications existantes non migrées ne fonctionneront plus.
Navigation sécurisée obligatoire !
Pour un développeur, l’utilisation d’IFRAME offre quelques avantages de poids :
Possibilité d’utiliser des librairies javascript (jQuery !) sans restriction
Possibilité de gérer sa page applicative de A à Z : gestion du contenu, des événements, de la dynamique et de l’ensemble des technologies utilisées.
Une IFRAME étant tout simplement un cadre qui appelle un URL (hébergé chez vous, à côté de vos autres pages, sites web ou applications), les possibilités sont quasi infinies et les contraintes minimes. Attention cependant à bien configurer et installer un certificat SSL pour votre URL d’application. En effet, depuis janvier 2011 le réseau social propose à ses utilisateurs de naviguer entièrement en HTTPS (paramètre dans les options de confidentialité). Si vous ne prévoyez pas un accès sécurisé à votre page, alors les utilisateurs concernés recevront des messages d’alerte, voire d’erreur selon les navigateurs.
LE B.A-BA : la variable signed_request
D’un point de vue un peu plus technique, en vue de développer votre tab de type IFRAME, il est impératif de savoir gérer la variable « signed_request » (https://developers.facebook.com/docs/authentication/signed_request/). Cette variable est postée par Facebook dès que quelqu’un accède à votre application, par l’intermédiaire d’un « tab page » ou en direct (canvas page). Il s’agit d’une chaîne de caractères encryptée que vous devrez décoder côté serveur afin de traiter les informations (structure json) qu’elle contient.
De cette façon, vous pourrez très facilement savoir par exemple si la personne qui affiche votre application aime (« like ») votre page ou pas.
La documentation officielle détaille les étapes en PHP, je vais vous montrer comment faire cela en Coldfusion en quelques lignes de code :
<cfset _srequest = ListGetAt(FORM.signed_request, 2, ".")> <cfset res = Len(_srequest) % 4> <!--- On pad la chaine avec des caractères = si besoin ---> <cfif res eq 2> <cfset _srequest &= "=="> <cfelseif res eq 3> <cfset _srequest &= "="> </cfif> <cfset _srequest = ToString(BinaryDecode(_srequest, "Base64"))> <cfset fbRequest=DeserializeJSON(_srequest)>
Au final, nous récupérons une structure CF comme celle-ci :
Structure FB signed_request
Outre l’ID du visiteur, il y a 2 ou 3 informations essentielles :
La présence (ou non) de la variable « oath_token » indique si l’utilisateur est bien authentifié et a accepté l’application.
La présence de la structure « page » indique que l’application est bien appelée à partir d’une page facebook et à partir de laquelle (« id »).
page[« liked »] indique quant à elle si la page est « likée » ou pas. Il est donc très facile d’adapter son contenu en fonction.
Gérer l’authentification : exemple de doc pas à jour (à l’heure de publication de cet article)
S’il est une partie qui peut vous donner du fil à retordre, c’est bien la (nouvelle) gestion de l’authentification. En effet, après avoir effectué de nombreux essais, il s’avère que la documentation aujourd’hui proposée sur le site des developpeurs facebook est obsolète (https://developers.facebook.com/docs/authentication/pagetab/). Et comme je vous l’annonçais en introduction, en recherchant des informations sur le web, vous ne trouverez que des exemples basés sur ces techniques.
Les urls d’authentification du type
https://www.facebook.com/dialog/oauth/?client_id=YOUR_APP_ID&redirect_uri=https%3A%2F%2Fwww.facebook.com%2Fpages%2Fnull%2FPAGE_ID%2Fapp_YOUR_APP_ID
&scope=COMMA_SEPARATED_LIST_OF_PERMISSION_NAMES
ne fonctionnent plus.
A la place, il faudra utiliser cet url :
<script type="text/javascript">
var _url="https://graph.facebook.com/oauth/authorize?client_id="
+ encodeURIComponent('YOUR_APP_ID')
+ "&redirect_uri=" + encodeURIComponent("YOUR_APP_URL")
+ "&scope=email";
top.location.href = _url;
</script>
N’oubliez pas d’utiliser top.location.href pour sortir de votre IFRAME.
Naturellement, ce billet est loin d’être exhaustif. Je cherche simplement à vous indiquer quelques astuces et à pointer du doigt certaines difficultés que vous pourriez rencontrer.
Si vous avez des besoins particuliers pour des applications social CRM / facebook, je vous conseille vivement de nous contacter (http://www.NSP-fr.com), nous serons heureux de pouvoir collaborer et vous aider dans vos démarches.
Réagissez à cet article en laissant un commentaire, partagez le à vos connaissances et inscrivez-vous à notre flux RSS pour être informé dès la parution de nouveaux articles.
