Facebook a dévoilé fin septembre sa nouvelle version d'Open Graph. Open Graph est un protocole développé par Facebook permettant de transformer n'importe quel page web en un objet capable de s'intégrer au graph social de Facebook. Cette la nouvelle version Open Graph 2.0, vous pouvez maintenant intégrer votre site web en profondeur avec Facebook et principalement avec la Timeline, le nouveau nom donné aux profils des utilisateurs sur Facebook.
Je vais vous expliquer dans ce tutoriel comment intégrer Open Graph à votre site web et comment paramétrer votre application Facebook pour qu'elle utilise Open Graph.
Avant de commencer quoi que ce soit, nous devons modifier notre application sur Facebook afin qu'elle puisse utiliser Open Graph. Si vous n'avez pas encore d'application sur Facebook, vous allez devoir en créer une. Je vous explique ça dans le paragraphe ci-dessous.
Si vous avez déjà une application Facebook, passez au paragraphe suivant. Vous devrez cependant modifier les paramètres de votre application pour y ajouter un namespace.
Pour procéder à la création de votre application, rendez-vous sur la page Facebook Developers. Vous pouvez également y accéder en tapant developers dans le champ de recherche sur Facebook.
Une fois sur cette page, cliquez sur le bouton Create New App en haut à droite de la page.
Une fenêtre modale va alors apparaître vous demandant le nom de votre application ainsi que son namespace. Le namespace de votre application est en fait un moyen d'identifier votre application de façon unique lors de l'utilisation d'Open Graph. Vous comprendrez mieux lorsque nous l'utiliserons plus loin.
Une fois que vous avez donné les informations sur votre application et accepté les conditions d'utilisation, cliquez sur Continue. Vous devrez alors remplir un captcha on ne peut plus banal.
Remplissez le sans vous planter et cliquez sur Submit.
Vous voilà maintenant sur la page de paramétrage de votre application. Vous pouvez y voir les informations que vous avez entré. Remplissez le champ App Domain avec votre nom de domaine de deuxième niveau (syrinxoon.net pour moi) et cliquez sur Save Changes en bas de page.
Les informations de bases étant donnnées, nous allons devoir indiquer de quelle manière nous allons communiquer avec Facebook. En bas de page, cliquez sur le l'image en forme de V près de Website puis entrez l'adresse de votre site web (en entier cette fois) puis sauvegardez.
Nous allons maintenant pouvoir passer à la configuration d'Open Graph. Cliquez sur Open Graph en haut à gauche de la page. Vous tombez sur un assistant qui va vous aider à configurer les paramètres de base d'Open Graph.
La première étape de cette assistant nous demande deux choses :
Prenez garde à ce que vous utilisez comme action car cette dernière devra être validée par Facebook avant que les utilisateurs puissent l'utiliser. Fuck et kill sont donc à proscrire.
Lorsque vous avez entré l'action et l'objet, cliquez sur Get Started.
La deuxième étape de l'assistant vous permet de personnaliser les paramètres de votre action. Laissez les paramètres tels quels, on y reviendra plus tard au besoin.
Cliquez sur Save Changes and Next en bas de page.
Nous arrivons à la 3ème étape de l'assistant. Celle ci vous permet de paramètrer l'object auquel s'applique l'action. Nous allons indiquer quelques propriétés de l'objet afin d'avoir un aperçu de la façon dont seront affichés les objets dans Facebook plus tard.
J'ai ici indiqué le titre de l'objet, une image le représentant ainsi que sa description. Comme vous pouvez le voir, l'aperçu juste en-dessous est mis à jour.
La dernière section de la page vous permet d'apporter des modifications grammaticales sur la façon dont les actions sont affichées.
Cliquez sur Save Changes and Next.
La 4ème et dernière étape vous permet de configurer les aggregations. Les agrégation sont des petites boîtes apparaissant sur la timeline de vos utilisateurs lorsque ceux-ci ont effectué au moins 5 actions du même type sur votre site. Cette page vous permet de définir comment ces agrégations sont affichées.
Libre à vous de configurer cette page comme vous le souhaitez.
Lorsque vous avez terminé, cliquez Save and Finish.
Vous êtes alors redirigé vers une page vous présentant un résumé de l'action, de l'objet et de l'agrégation que nous venons de définir.
Cliquez sur le nom de votre action pour la modifier. Vous pouvez paramétrer plus en détails votre action sur cette page. Je vous invite à le faire comme sur la capture d'écran ci-dessous. Cliquez dessus pour l'agrandir.
Cliquez maintenant sur Auth Dialog en haut à gauche.
La fenêtre modale qui vient d'apparaître vous permet de personnaliser la page demandant à vos utilisateurs les permissions nécessaires à notre application. Cliquez sur Add Another près de Preview Objects.
Ajouter les propriétés de l'objet comme nous l'avons fait précédemment.
Cliquez sur Create pour sauvegarder et revenir à la fenêtre précédente puis cliquez sur Add Another près de Preview Actions.
Remplissez les informations de l'action comme ci-dessous :
Cliquez sur Create.
La page doit maintenant ressembler à celle-ci :
Note : Les actions et objets que vous ajoutez ici ne servent pas à faire joli, enfin si, mais pas d'une manière inutile. En fait, la fenêtre de dialogue demandant les permissions à l'utilisateur affichera un aperçu d'une agrégation avec 3 actions visibles. Ajoutez donc au moins 3 actions et objets afin de rendre cette fenêtre plus sympathique et qu'elle illustre au mieux votre site web.
Cliquez sur Close.
Vous êtes maintenant redirigé vers la page ci-dessous.
Cliquez sur preview dialog en haut à droite. Vous avez maintenant un aperçu de la fenêtre de demande des permissions.
Cliquez maintenant sur Open Graph en haut à gauche pour revenir à l'aperçu de nos actions et objets.
Sur la ligne où apparaît l'action, cliquez sur Submit.
Une fenêtre modale s'ouvre.
Entrez un bref résumé (en anglais) de la façon dont vos utilisateurs utiliseront Open Graph et cliquez sur Submit for Approval. Je ne sais pas encore combien de temps il faut attendre pour que notre action soit validée.
Nous avons maintenant terminé avec la configuration de l'application. Passons à la modification des pages de notre site web.
Maintenant que notre application est paramétrée du côté de Facebook, passons aux modifications à apporter à nos pages web afin d'intégrer Open Graph.
Pour publier les actions des utilisateurs sur leur timeline, votre application a besoin de la permission publishactions_. Pour la demander, nous allons utiliser le plugin Add to Timeline qui se chargera de les demander pour nous (via le Auth Dialog que nous avons configuré auparavant).
Pour commencer, ajoutez les deux lignes ci-dessous en bas de vos pages.
<div id="fb-root"></div> <script src="http://connect.facebook.net/fr_FR/all.js" type="text/javascript"></script>
Le script que nous chargeons ici contient tout le SDK Facebook Connect nécessaire à l'authentification des utilisateurs, aux plugins et aux appels à l'API de Facebook. Le block #fb-root est utilisé par le SDK. Il doit être placé avant le script javascript.
Vous pouvez ensuite place le plugin Add to Timeline où vous voulez dans votre page grâce au code ci-dessous.
<!-- Sous forme de boîte avec les utilisateurs --> <div class="fb-add-to-timeline" data-show-faces="true"></div> <!-- Ou sous forme de bouton sans les utilisateurs --> <div class="fb-add-to-timeline" data-mode="button"></div>
Libre à vous de mixer les deux paramètres comme vous le souhaitez.
Juste sous le fichier Javascript que nous venons d'ajouter, insérez les lignes suivantes :
<script> FB.init({ appId:'YOUR_APP_ID', cookie:true, status:true, xfbml:true, oauth:true }); </script>
Remplacez YOURAPPID par l'identifiant de votre application. Ce dernier est disponible dans la partie Settings > Basic de l'application.
Pour mon application, ce sera :
<script> FB.init({ appId:'262637213776250', cookie:true, status:true, xfbml:true, oauth:true }); </script>
La fonction FB.init sert, comme son nom l'indique, à initialiser le SDK Javascript ainsi que les plugins.
Nous allons maintenant intégrer à notre page toutes les informations qui seront utilisées par Open Graph.
Cette intégration se fait à l'aide de balises <meta />.
Dans un premier temps, nous allons devoir modifier la balise <head> de nos page pour qu'elle ressemble à celle ci-dessous.
<head prefix="og: http://ogp.me/ns# YOUR_NAMESPACE: http://ogp.me/ns/apps/YOUR_NAMESPACE#">
Au début du chapitre précédent, je vous parlais de namespace. C'est ici qu'il entre en jeu. Remplacez YOUR_NAMESPACE par celui que vous avez défini lors de la création de votre application.
Dans mon cas, j'aurais :
<head prefix="og: http://ogp.me/ns# sxndemo: http://ogp.me/ns/apps/sxndemo#">
Passons maintenant aux données.
Pour chaque propriété de votre objet Open Graph, vous devrez ajouter une balise <meta /> à la page.
Vous ajouterez une balise supplémentaire pour l'identifiant de votre application (c'est un peu redondant je sais).
<!-- Identifiant de l'application --> <meta property="fb:app_id" content="262637213776250" /> <!-- Propriétés de l'objet --> <meta property="og:type" content="sxndemo:comment" /> <meta property="og:title" content="The Bobcats" /> <meta property="og:image" content="http://asset.syrinxoon.net/stuff/pics/cats.jpg" /> <meta property="og:description" content="The Bobcats are crappy cats working in an enterprise only to piss their coworkers off." /> <meta property="og:url" content="http://demo.syrinxoon.net/php/open_graph/">
Si vous avez ajouté des propriétés supplémentaires à votre objet, ajoutez une balise <meta /> pour chacune de ces propriétés.
C'est tout pour le paramétrage de nos pages.
Maintenant que tout est configuré, il faut donner un moyen aux utilisateurs de publier leurs actions sur votre site directement sur Facebook. Nous allons ajouter un bouton pour cela mais il y a bien d'autres façon de le faire.
Dans votre page, ajouter un bouton comme ceci :
<button id="comment-action" onclick="postComment()">J'ai commenté cette photo</button>
Associé à la fonction Javascript suivante :
function postCook() { FB.api('/me/sxndemo:comment?picture=' + window.location, 'post', function(response) { if (!response || response.error) { alert('Une erreur est survenue lors de la publication de l\'action.'); } else { alert('Action publiée ! Identifiant d\'action : ' + response.id); } }); }
La fonction FB.api se charge d'envoyer notre action à Facebook sans que l'on ait quoi que ce soit d'autre à faire. Facile non ?
Vous aurez remarqué que tout ce que nous avons fait sur Facebook était en Anglais. Des actions aux objets en passant par les agrégations. Si votre application s'adresse à des utilisateurs francophones par exemple, vous pourriez être intéressé par l'outil de traduction que vous propose Facebook. Sur la page de votre application, vous trouverez sur la gauche un lien Translate your App. Cliquez dessus et Facebook vous proposera toutes les phrases à traduire dans votre application. Il y a environ 70 phrases à traduire pour l'utilisation d'Open Graph.
Votre site web exploite maintenant tout le potentiel d'Open Graph. Cette intégration ne demande pas beaucoup de travail, juste un peu de configuration au niveau de votre application.
Soyez tout de même prudent dans votre utilisation d'Open Graph car certains utilisateurs y sont assez réticents.
N'hésitez pas à laisser un commentaire sur le tutoriel, ou à le partager sur les réseaux sociaux, ça me fait toujours plaisir et m'encourage à continuer mon oeuvre pour un monde meilleur.
Si le tutoriel contient un point que vous ne comprenez pas, sur lequel vous aimeriez avoir des explications, n'hésitez pas à poser votre question sur le Google Group de Syrinxoon Tuts, je viendrai rapidement répondre à votre question.
Enfin, signe ultime de remerciement, vous pouvez me faire un don pour m'aider à payer les frais du serveur en cliquant sur le bouton Donate ci-dessous ⇓
Abonnez vous au flux des tutoriels
Enregistrez vous pour commenter
Marquer ce tutoriel comme lu