Le blog

Custom Actions + Social Design = Custom Open Graph : la nouvelle révolution de Facebook

8 décembre 2011

Mardi 6 Décembre se déroulait la troisième édition française du Facebook Developer Garage. Pour rappel, les Facebook Developer Garage sont des événéments organisés par Facebook afin de présenter leurs services pour les développeurs, et souvent pour annoncer des nouveautés. Ce troisième épisode a été hébergé par Epita. Cette session de 4 heures était composée de :
  • - un rapide historique des outils Facebook et de la puissance de l'Open Graph
  • - un rappel de ce qu'est l'Open Graph et ce qui a fait son succès
  • - des conseils pour réussir ses jeux sociaux
  • - comment réaliser des applications Facebook grâce à une nouveauté

L’annonce principale de ce Facebook Developer Garage

Ceci est un résumé de mon résumé, et destiné principalement aux personnes ne connaissant pas la « Facebook Platform ». A partir de Janvier 2012, mais déjà accessible pour les développeurs, on ne sera plus obligé de « liker » un contenu. En effet, Facebook lance les « Custom actions » et le « Custom Open Graph » qui permettent de créer les actions que l’on souhaitera ! On ne « likera » alors plus un film mais on le regardera. Et vous pouvez faire cela avec tous les types de contenus. Pour que cela soit possible, on aura la possibilité de remplacer le traditionnel bouton « like » par le bouton que l’on souhaitera. Cela donnera alors naissance à une nouvelle génération d’applications sociales. La Timeline sera aussi accessible dans une semaine pour tout le monde.   Petit historique En 1980 sont nées les premières applications « logicielles » bien qu'il n’y avait pas vraiment de circuit de distribution, ce qui rendait celles-ci coûteuses. En 2000 sont arrivées les applications webs, qui pouvaient être partagées plus facilement (mail, messagerie instantannée …). Puis en 2008 est arrivé l’iPhone accompagné de son App Store qui a permis l’explosion de ces applications. En 2009, Mark Zuckerberg avait prédit qu’il existerait des sociétés pour lesquelles le business reposerait entièrement sur Facebook. Ce qui est effectivement arrivé avec des sociétés comme MakeMeReach, KRDS ou 909c, présentes aux précédents Facebook Developer Garage.  

" The Power of the Open Graph"

Tout a commencé lorsque Mark Zuckerberg souhaitait créer des connexions, des liens entre les gens. Ensuite est arrivé le « social design » avec la plateforme photo. Bien qu’il en existait déjà de très performantes, la réussite a été de pouvoir « tagguer » ses amis afin de relier une photo à des personnes. Puis est arrivée l’API qui a permis de mettre les gens en tant que personne au cœur même de l’Open Graph. Ainsi, l’utilisation de l’Open Graph a connu une croissance assez phénoménale : - en 2007 est créée la « Facebook Platform » qui procure un outil de développement pour relier ses applications à Facebook - en 2008 est lancé le bouton « Facebook Connect » qui permet de récupérer rapidement les informations d’un utilisateur pour l’inscription sur son propre site - en 2009 arrive le succès des jeux sociaux avec des acteurs comme Zynga ou Playfish - en 2010 arrive l’Open Graph qui permet de personnaliser les données récoltées par le bouton Like : on donne une identité à un objet - en 2011 a lieu la conférence F8 qui annonce tout son lot de nouveautés et de concepts  

Les jeux sociaux

Les jeux sont différents aujourd’hui d’il y a quelques années, du moins sur Facebook. En effet, la dynamique du jeu tourne maintenant autour des gens. On joue avec des amis, des personnes que l’on connaît, et non avec des bots ou des personnes cachées derrière un pseudo à rallonge. Cela a permis des succès fulgurants, comme pour Cityville qui a captivé 65 millions d’utilisateurs en seulement 45 jours. Encore une fois, cella a été possible grâce à une utilisation remarquable de l’Open Graph.  

Une nouvelle génération d’applications socialespar Christian Hernandez

Le « newsfeed », plus connu sous le nom de « mur » chez nous, a commencé à être très désordonné avec l’arrivée des applications, qui postaient un message sur le mur à chaque action d’un utilisateur (on se rappelle tous de Farmville). Ce n’est heureusement plus le cas, et l’arrivée de la Timeline va améliorer tout cela en modifiant la manière dont les gens considèrent les données (les « feeds »). Avec ce nouvel affichage composé d’une  Timeline, Facebook organise les actions en fonction du temps. On accède ainsi a une vue globale de ce qu’est une personne, mais surtout de ce qu’elle était, et ce qu’elle est devenue. Tout ceci relié à ce qui a fait la première force de Facebook, les photos. Cette Timeline cherche en fait à toucher les émotions, en présentant notre mur comme un ensemble de souvenirs. Mais Facebook limitait ce qu’on pouvait raconter. En effet, bien qu’on pouvait poster toute sorte de données (photos, vidéos, textes), on ne pouvait que « liker ». Or, on ne « like » pas une musique, on l’écoute (« listen to »), on ne « like » pas un film, on le regarde (« Watch ») … Ainsi on a d’un côté les gens avec leur identité, de l’autre les objets qui constituent l’Open Graph, qu’on pourra relier par des verbes, ce qui donne naissance à l’Interest Graph ! On pourra alors avoir une idée beaucoup plus précise de la personnalité (« Insight ») d’une personne. L’exemple de Netfix a été abordé. Cette plateforme de streaming légal de films et de programmes télé permet, en s’appuyant sur l’Open Graph, et maintenant l’Interest Graph, de proposer des films en fonction de ses amis, et plus en fonction des acteurs de ces films, ce qu’on faisait avant.  

Comment créer une application par Simon Cross

Tout d’abord, il est bon de rappeler que Facebook est aujourd’hui composé de 3 parties principales :
  • - la Timeline
  • - les newsfeeds (le mur)
  • - les tickets (qu’on appellera brèves) : ils sont présent dans la barre de droite (ou les logs) et permettent de connecter l’utilisateur aux actions faites dans une application
Prenons l’exemple de Deezer. Lorsqu’une personne écoute une chanson sur la plateforme, l’action « User écoute Titre » sera affichée dans les brèves. Les amis pourront alors cliquer dessus pour l’écouter directement dans Deezer. Spotify utilise les mêmes fonctionnalités, qui a alors vu son nombre d’utilisateurs augmenter de 7 millions. Il y a 4 étapes très simples pour réaliser une application de « nouvelle génération » :
  • - définir ses actions et ses objets
  • - définir l'affichage dans la Timeline
  • - définir ses « markups » et les relier aux objets
  • - publier ses actions
On pourra alors utiliser ces markups grâce à la balise méta « og :type ». Avant, il n’y avait que 35 types d’objets (film, livre, musique …). Ce nombre est maintenant illimité ! Lorsque ces markups sont intéressés sur un site, on a alors une url qui correspond à un objet. Il est intéressant de noté que l'utilisation de cette nouveauté ressemble beaucoup à des interfaces comme phpMyAdmin, et que cela permettra peut-être de créer des bases de données pour des sites. Vous pourrez remarquer que la deuxième ligne contient le Custom Object que j'ai créé précédemment.

   
   
   
   
   
   
Il y aura probablement une vidéo de démonstration sur youtube d’ici peu. Si j’ai le temps, je vous la ferais avant afin de vous montrer tout cela.

Object references & Action references

La notion d’ « Object reference » est très simple.Il existe maintenant deux types d’objets. L’objet principal, et son contexte, constitué d’autres objets. Cela nous permet de relier des objets ensemble. Pour Deezer par exemple, une musique est relié à un album. Pour un article, le contexte sera l’auteur, les tags ou la date. On peut alors relier le titre de la chanson à l’album grâce aux balises og. La notion d’ « Action reference » a été abordée plus haut. C’est la capacité qu’on a maintenant à relier des objets par des actions. Ainsi, pour une recette de cuisine, les brèves («tickets ») ou le newsfeed pourra laisser apparaître :

«  Simon Cross cooked hamburgers composed by meat and bread with Christian Hernandez »

Les données étant beaucoup plus précises, on pourra les distribuer plus amplement et plus efficacement pour générer plus de trafic.  

L’utilisation de l’Open Graph par Cinemur & Wipolo

Cinemur a germé d’un constat simple. Le cinéma est un lieu social, auquel on se rend accompagné. Ainsi est partie la réalisation du site qui présente des affiches de films, qui amène des informations sur ceux-ci. Ces données sont ensuite mises en relation avec les données récupérées via l’Open Graph, pour proposer à l’internaute les films qu’il sera plus susceptible d’apprécier, à partir des goûts de ces amis. Ce qui est encore plus ingénieux, est qu’à l’inscription, Cinemur récupère les pages de films que vous avez liké pour vous constituer une cinémathèque déjà très représentative. Julien Codorniou est alors intervenu pour rappeler les trois forces qui contribue au succès de Cinemur :
  • - on sait toujours qu’on est connecté, et via Facebook, grâce notamment à la photo profil en haut à droite
  • - on permet l’affichage d’informations dans le newsfeed de l’utilisateur
  • - un newsfeed interne recense les activités de ses amis sur la plateforme
  Wipolo est aussi né avec un constat similiaire : le voyage est mobile et social. Les gens voyagent rarement seuls. Le but a alors été de connecter le voyage au mobile pour deux raisons :
  • - avoir ses informations sur son mobile : numéro de vol, heure de départ, horaires des trains …
  • - réaliser du push de contenu : météo, visites à faire, musées …
On peut bien sûr synchroniser ces données avec ses amis, pour qu’ils participent au voyage, ou bien faire naître l’envie de réaliser le même voyage. L’échange de données avec Facebook est alors bi-directionnel :
  • - Facebook -> Wipolo : import des amis, des checkins, des photos
  • - Wipolo -> Facebook : partage des voyages, des statistiques, de nos envies
 

Les Tellings Stories, les nouvelles publicités de Facebook

Avec l'arrivée de cette amélioration de l'Open Graph, il est maintenant possible de créer des publicités personnalisées en fonction de ses amis. Avant on pouvait seulement générer des publicités présentées avec le même contenu. On pouvait juste cibler précisément ces publicités. Maintenant, on peut changer dynamiquement le contenu des publicités en fonction de ses amis. Ainsi, lorsqu'un ami aura utiliser l'application Cinemur par exemple, on pourra voir afficher :

«  Simon Cross a regardé Shame grâce à Cinemur  »

Le fonctionnement est très similaire à celui des Custom Actions. Je ne reviendrais donc pas dans les détails.

 

La doc de Facebook est toujours disponible à la même adresse : https://developers.facebook.com/

Vous pouvez avoir accès à au Custom Open Graph sur https://developers.facebook.com/apps/ID_APP/opengraph

Lire la suite

Portfolio

Custom Javascript Console pour Chrome

12 avril 2012

L’Application Cache (ou Cache Manifest) couplé à WordPress

28 décembre 2011

Le cache Javascript : comment et pourquoi !

21 décembre 2011

Custom Actions + Social Design = Custom Open Graph : la nouvelle révolution de Facebook

8 décembre 2011

Travailler sur 3 écrans avec Matrox

7 octobre 2011

Le Javascript mobile : « touch events  » et « gesture events »

10 août 2011

Adobe Edge : test et impressions

1 août 2011

Graph API Explorer, où comment rendre simple l’utilisation de l’Open Graph

29 juin 2011

Highcharts : réalisez vos graphiques avec un simple plugin Javascript

7 juin 2011

Les nouveautés de Flash Player, AIR et Flex (@Adobe Live)

13 mai 2011

Less CSS – Un framework CSS pour travailler plus vite !

12 mai 2011

Créer votre propre web widget

3 mai 2011

Présentation d’HETIC : première école des métiers de l’Internet

28 avril 2011

Facebook + Social Design = Open Graph : le VRAI produit de Facebook

27 avril 2011

Insérer les plugins Facebook en Ajax

24 avril 2011

Convertissez vos pages HTML en applications mobiles avec PhoneGap

22 avril 2011

Adobe expose sa vision du HTML5

21 avril 2011

Maqetta : un outil WYSIWYG en ligne pour le HTML5 !

19 avril 2011

Raphael JS – Librairie JS pour le tracé vectoriel dans canvas

15 avril 2011

HTML5 Boilerplate & Modernizr

4 avril 2011

Facebook Developer Garage Program – S01E01

29 mars 2011

Linkedin API Javascript Tutoriel

28 mars 2011

Détecter les navigateurs pour une meilleure compatibilité

24 mars 2011

Adobe propose de nouvelles propriétés CSS

11 mars 2011

Adobe Wallaby : convertir le Flash en HTML5

8 mars 2011

EEMI : finalement, c’est quoi ?

30 janvier 2011

Sarri Maxime - Javascript & jQuery Developer / Développeur Javascript & jQuery @ Paris

Je suis Sarri Maxime, développeur Javascript / front-end à Paris, encore étudiant en 4e année à HETIC.

Je m'intéresse fortement aux nouvelles technologies comme le HTML5 au service des supports mobiles et plus récemment aux objets connectés : TV, Arduino, domotique.

Bien que développeur, je ne néglige pas ce qui fait la richesse du web : sémantique, référencement, conception. J'aime participer à l'élaboration des sites que je serai amener à développer.

Sarri Maxime - Développeur Javascript

Télécharger mon CV

Télécharger ici

Formulaire de contact

Etant étudiant, je ne suis pas (encore) à la recherche d'un emploi. Je suis par contre disponible pour des demandes en freelance ou pour des stages/alternances intéressants.

Je serais présent aux événements suivants :