Google XXL: L’Open Social Graph de Facebook
Google XXL

L’Open Social Graph de Facebook

Indexer le monde entier avec l’Open Social Graph de Facebook


Quand on analyse le fonctionnement du Social Graph de Facebook, on se dit d’emblée, que c’est une véritable bombe… Examinons les grands principes :
La réalité est composée d’entités qui sont reliées par des liens appelées « Relations ».
Le principe consiste alors à rattacher une entité (ville, personne, objet, film, etc.) à une page web de votre site puis à créer une page « symétrique » dont le fonctionnement sera identique aux pages Facebook (Fan Page).
Afin de réaliser cette opération, nous allons nous servir du Web sémantique (ou Web 3.0). Il suffit d’ajouter, à la page web, un certain nombre de métadonnées qui sont listées à cette adresse : http://ogp.me/.
Les étapes à suivre sont les suivantes :
  • Créer ou modifier une page web qui sera placée sur notre serveur ;
  • Ajouter les déclarations d’en-tête ;
  • Ajouter les balises voulues ;
  • Ajouter un bouton J’aime ;
  • Créer une application Facebook.
Ajouter les déclarations d’en-tête :
Placez ces quelques lignes avant la section Head de la page web :
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">

Ajouter les métadonnées voulues


La liste des balises autorisées sont visibles sur cette page : http://developers.facebook.com/docs/opengraph/.
Celle des objets est accessible à cette adresse : http://developers.facebook.com/docs/opengraph/#types.
Afin de vérifier la validité de vos métadonnées, vous pouvez utiliser cet outil Facebook : http://developers.facebook.com/tools/lint.
Testez, par exemple, les résultats renvoyés par cette adresse URL : http://www.imdb.com/video/imdb/vi4131822873/.
Deux paramètres sont importants :
  • <meta property="fb:app_id" content="Identifiant de l’application" >
  • <meta property="fb:admins" content="Identifiant de l’administrateur" >
L’identifiant de l’application vous sera fourni quand vous allez créer votre application Facebook.
Afin d’obtenir l’identifiant de l’administrateur, accédez à cette adresse URL : http://graph.facebook.com/jean-noel.anderruthy. Bien entendu, remplacez mon nom d’utilisateur Facebook par le vôtre !
De nombreux exemples d’utilisation de l’API Facebook sont visibles à cette adresse : http://developers.facebook.com/docs/reference/api/.

Ajouter un bouton J’aime


Vous devez aller sur cette page web : http://developers.facebook.com/docs/reference/plugins/like/.
Personnalisez le code puis cliquez sur le bouton Get code.
Sélectionnez le code en XFBML que vous placerez à l’endroit voulu sur votre page web.
Il faut noter que pour pouvoir l’ajouter, vous devez posséder un compte certifié sur Facebook. La manière la plus simple d’en obtenir un est d’indiquer, dans les informations de paiement de son profil, les références de sa carte bleue.

Créer une application Facebook


Accédez à cette page : https://www.facebook.com/developers/ puis cliquez sur le bouton Créer une application.
Saisissez le nom de votre application.
Vous obtiendrez, dans la rubrique Intégration à Facebook, l’ID de l’application ainsi que la clé secrète.
Il vous faut renseigner :
  • L’URL de canevas : le domaine sur lequel est placé votre page web (vous devez ajouter un slash à l’adresse URL) ;
  • L’URL de l’onglet : l’adresse URL complète du fichier qui constitue la page web.
Le tour est joué !

Le mécanisme est alors le suivant :
Un « Facebooker » accède à votre page web puis clique sur le bouton J’aime. Ce « Like » est visible sur son mur et, en conséquence, dans le fil d’actualités de ses amis.
En aimant un contenu, il collabore à la construction de l’« Open Social Graph » de Facebook…
Un des premiers avantages à ajouter des « Open Graph Tags » est que le bloc de contenu (« Edge »), qui va s’afficher, sera beaucoup plus attractif que ses homologues, moins bien loti… En effet, en utilisant les tags Facebook, vous pouvez ajouter une miniature, intégrer une vidéo, définir un titre, une description, etc.
L'autre particularité est que son adhésion sera aussi visible dans la rubrique Activités et intérêts (ou autre en fonction du type d'objets auquel appartient l'entité).


Connectez-vous à votre compte Facebook puis cliquez sur Compte - Utiliser Facebook en tant que page.
Du fait que vous avez indiqué un identifiant d’application Facebook sur votre page web, vous avez, en même temps, créer une page Facebook « symétrique ». Elle apparaît dans la liste des pages que vous administrez.


Basculez sur cette Fan Page.
L’interface qui s’ouvre ressemble, en tous points, à celle d’une page Facebook classique. En cliquant sur le lien n personnes aiment, vous afficherez les « Facebookers » qui ont aimé votre page web.
Vous avez donc créé un canal de communication entre les internautes qui ont aimé votre page web (et l’entité que vous avez créée) et votre marque (au sens large du terme).
En conséquence, vous pouvez leur envoyer des notifications de trois manières :
  • Publier une mise à jour sur le mur de votre Fan Page « symétrique » ;
  • Leur envoyer une mise à jour via la fonctionnalité dédiée ;
  • Utiliser une page en PHP qui permettra d’automatiser la publication des mises à jour.
Et, là encore, votre statut ou mise à jour sera visible sur le mur de vos fans ou dans la rubrique Messages.
Quand vous accédez à la page web (sur votre serveur), deux liens sont visibles : Page d’administration et Statistiques. En cliquant dessus, vous êtes redirigé vers la page d’administration (sur Facebook) de la page web correspondante.


Quelles sont les bonnes pratiques quant à l’utilisation du « Social Graph » de Facebook ?


Un des points à souligner est que seuls les objets « réels » peuvent publier des mises à jour. Les pages relevant de la catégorie « Articles » ne le permettent donc pas.
Il vous est possible de définir vos propres valeurs à l’intérieur des métadonnées.
L’insertion de contenus multimédia et vidéo nécessitent l’utilisation de balises spécifiques.
Quand vous procédez à une mise à jour à partir de la « page Facebook symétrique », restez dans la thématique de votre page. Si, par exemple, la page web a pour sujet un artiste, les mises à jour doivent concerner cet artiste en particulier et non, la musique ou l’industrie du disque en général…

Un moteur de recherche dédié à la réalité


Un des autres avantages à utiliser les « Open Graph » est que, lorsque le fan utilisera le moteur de recherche Facebook, les entités que vous aurez créées (et qu'il a aimées) seront mises en avant dans les Serps.


Et, avec Facebook, c’est la seule façon de faire, de manière efficace, du « SEO » !
C’est une différence très importante avec le fonctionnement des moteurs classiques : sur Facebook, on ne cherche pas pour trouver un contenu que l’on ne connaît pas encore mais pour retrouver quelque chose que l’on connaît déjà. Et la pertinence du moteur Facebook repose non sur des algorithmes que sur les relations « en dur » qu’entretiennent les entités (vous, moi, etc.) entre elles.
En conclusion, vous faites indexer par Facebook des objets réels et non des objets virtuels…
On peut donc décrire trois champs d’application pour les marques :
  • À l’intérieur de Facebook : les Fan Pages ;
  • Les sites web de la marque : les modules sociaux : J’aime, Recommander, le « Facebook Connect », etc.
  • La réalité : l’« Open Social Graph ».
Et, si on prend un peu de recul, on peut dire que les Fan Pages Facebook représentent qu’une partie d’un concept plus large et important appelé « Open Social Graph ».
Nous avons donc :
  • Défini une entité et attribué un identifiant unique à cette dernière ;
  • Créer une page web qui fonctionne comme une sorte de fiche d’identité ;
  • Créer une page Facebook qui nous permet d’administrer cette entité
  • Créer un canal de communication entre les fans et cette entité.
Nous pouvons donc « nommer » toutes sortes d’objets présents dans le monde un peu à la manière de ce qu’il est possible de faire, sur Twitter, avec la fonctionnalité des Hashtags.

Référencer le monde réel


Oui ! Mais comment indexer, dans Facebook, des objets réels et même, plus que réels ?
Un des dispositifs possibles consiste à placer un code QR près du produit à « Liker ». Quand le mobinaute clique sur le code 2D, il sera redirigé vers la page dédiée du produit (entité) et il pourra l’« aimer ». Une fois qu’il aura finalisé son « Like », la page symétrique sur Facebook le récupèrera en tant que fan et pourra lui envoyer, quand bon lui semble, les messages voulus. Magique, non ?
Imaginons, par exemple, que je pénètre dans une boutique spécialisée et que je « Like » une boîte de biscuits. Ce « J’aime » sera relié au type d’objet « product », « food » ou à un type d’objet personnalisé et le propriétaire du magasin pourra me signaler que sa gamme s’est enrichie d’une nouvelle référence ou m’envoyer un « Facebook Deal » et me proposer une réduction sur mon prochain achat.
Nous passons donc du règne de l’URL à celui de l’ORL (« Object Real Location »). Les perspectives en termes de marketing sont, réellement, infinies !

En conclusion, on peut se poser ces trois questions :
  • Si vous gérez un nombre important de pages « symétriques », vous devrez mettre en place un véritable module d’administration (qui n’existe pas sur Facebook) et sa création nécessitera beaucoup d’efforts en termes de programmation ;
  • La question de la liaison avec un outil d’e-CRM se pose avec encore plus d’acuité qu’auparavant ;
  • Il faut réfléchir à l’articulation entre les métadonnées propres à Facebook et celles issues du tout nouveau protocole Schema.org. Si on rajoute à cela les spécifications du HTML5, il y a du pain sur la planche !

15 commentaires:

  Lionel

4 juin 2011 à 13:20

Merci pour cet article, très clair :)

  Jean-Noël Anderruthy

4 juin 2011 à 13:22

Et merci, Lionel, pour ce petit mot sympa :-)

  clawfire

7 juin 2011 à 12:56

Bonjour,
Pouvez vous développer ce que vous entendez par pages symétriques" ? Merci

  Jean-Noël Anderruthy

7 juin 2011 à 19:47

Une page symétrique est une sorte de Fan Page qui vous permet de gérer les personnes qui ont cliqué sur le bouton J'aime visible sur une ou plusieurs des pages de votre site web.

  Agence Référencement

17 juin 2011 à 13:03

Le web sémantique représente une révolution dans les moyens de présenter des informations à des publics. Mais sait-on que son émergence va affecter aussi la manière de les mettre en ligne.

  Romain

17 juin 2011 à 13:55

@Jean-Noël : Cela veut il dire que si un internaute clique sur j'aime sur une page de notre site, il va aussi automatiquement "aimer" la page facebook qui y est associée ?

J'ai du mal à comprendre l'utilité de créer une API facebook qui va dupliquer notre site. Les internautes consulteront notre site directement via l'API Facebook ? Si c'est le cas j'en vois pas l'intérêt... Autant qu'ils aillent directement sur le site en question.

Merci pour vos éclaircissement !

  Romain

17 juin 2011 à 15:49

Autre petite question, ce tuto dit : "Connectez-vous à votre compte Facebook puis cliquez sur Compte - Utiliser Facebook en tant que page."

Personnellement mes API n'apparaissent pas dans mes pages, pourtant mon id facebook est bien renseigné dans mon site :
< meta content="mon_id_facebook" property="fb:admins" > ?

  Jean-Noël Anderruthy

17 juin 2011 à 18:31

@Romain :
1) Exact !
2) Vous créez un canal de communication entre les Facebookers qui ont aimé un ensemble de pages de votre site et vous.
3) Vous avez créer l'application Facebook correspondante ?

  Romain

17 juin 2011 à 19:31

J'ai un blog wordpress, les balises meta (open graph) sont bien en place. Si un internaute clique sur un "j'aime" de mon blog, le message apparait sur son fil d'actualités, ce qui est une nouveauté comparé à avant, jusque là OK.

Maintenant je créé l'API facebook qui correspond au blog (du coup j'obtiens un onglet portant le nom de mon blog, et si je clique dessus, mon blog apparait à l'intérieur d'une page facebook).

Par contre je n'arrive pas à faire le lien entre le bouton "j'aime" de mon blog, et l'API facebook. Ce qui est le but final de l'open graph nan ?

  Romain

17 juin 2011 à 21:22

En gros, j'ai ça dans le < head> d'un article de mon blog :

< meta content="API_id" property="fb:app_id">
< meta content="mon_id" property="fb:admins">
< meta content="Mise en ligne du site internet JMJ PEUGEOT" property="og:title">
< meta content="article" property="og:type">
< meta content="http://blog.jmj-peugeot.com/mise-en-ligne-du-site-internet-jmj-peugeot/" property="og:url">
< meta content="JMJ Peugeot - Le Blog" property="og:site_name">
< meta content="http://blog.jmj-peugeot.com/wp-content/uploads/visuel-page-accueil-jmj-peugeot-a-la-une-300x160.jpg" property="og:image">

En ayant bien-sur remplacé "mon_id" et "API_id" par les id respectif.

Donc lorsqu'un internaute clique sur j'aime (sur ce même article) ses infos devraient être envoyées à l'API dont j'ai renseigné l'id, et dont je suis l'admin (si j'ai bien compris le fonctionnement de l'open graph).

Pourtant, lorsqu'un internaute clique sur le "j'aime" de cet article, mon API facebook ne reçoit aucun "j'aime" supplémentaire...

Normalement je devrais voir via mon API qui est cette personne qui à "aimer" l'article nan ?

  Jean-Noël Anderruthy

18 juin 2011 à 12:35

Vous avez défini une entité "Article" et c'est le seul cas où la page symétrique ne sera pas "nourrie".

  Romain

18 juin 2011 à 18:34

D'accord, j’essaierai avec un autre "type" alors.

Merci beaucoup en tout cas !

  Romain

20 juin 2011 à 15:08

Voila je viens d'essayer la manipe pour 2 blogs (avec des bouton "j'aime" sur les page d'accueil).

J'ai réussi à faire le lien entre un des 2 blog et son application facebook (ça m'a bien généré une fan page symétrique). Je procède exactement pareil pour le 2ème blog, mais lorsque je clique sur "j'aime" j'ai le message d'erreur suivant :

"L’identifiant de l’application spécifié dans le "fb :app_id" n’est pas autorisé sur ce domaine. Vous devez configurer la base de connexion de domaines pour votre application avec pour préfixe : http://blog.jmj-peugeot.com."

Pourquoi mon app_id ne serait il pas autorisé sur mon domaine (jmj-peugeot.com) ?

Merci par avance pour vos pistes ! :)

  Jean-Noël Anderruthy

20 juin 2011 à 18:59

Je n'ai pas vérifié mais, si j'ai bien compris votre problème, une même application ne peut porter sur un domaine et, par exemple, un sous-domaine différent.

  Romain

20 juin 2011 à 22:53

En fait j'ai simplement 2 applications qui portent vers 2 domaines différents. J'arrive à faire marcher l'une, mais pas l'autre, alors que je procède exactement de la même façon (les ID ont étés vérifiés et re-vérifiés).

Je vais essayer de creuser ça, mais j'avoues que je suis collé...