formafion facebook open graph synerg'hetic
TRANSCRIPT
La Junior-Entreprise des enfants du web
Facebook Open Graph protocol
Facebook Open GraphLe 11 décembre 2012Damien CORNU
SOMMAIRE
Open Graph — présentation
Custom Actions — Quand les actions built-ins ne suffisent plus
Exemple de code — premiers pas
Les concepts et les outils — ce qu’on peut faire et comment le mettre en place
Open Graph
FACEBOOK UNE MINE D’INFORMATION
Profils (informations basiques) : nom, prénom, âge, adresse
Goûts / likes
Posts, photos, vidéos
Pleins d’autres choses encore
Et vos amis !
DES PERSONNES, DES OBJETS ET DES (INTER)ACTIONS
Facebook repose sur les relations entre individus
Les actions entre individus : posts, likes, commentaires
Les actions des utilisateurs avec des pages
Et depuis peu (un an) : vos actions sur de plus en plus d’applications
L’ensemble forme le « social graph »
Le Social graph
Les objets internes à Facebook, «limité» en termes d’interactions
L’Open Graph
Avec l’Open Graph, Facebook peut intégrer n’importe quelle page dans le Social Graph
OGP, LA PASSERELLE ENTRE LES INFORMATIONS ET FACEBOOK
Une page web, n’est qu’une page Web
Jusqu’à...
L’implémentation de balises Meta
Plus particulièrement les balises de l’Open Graph protocol
Elles transforment une page web en objet riche dans le social graph
PLUGINS, API ET SDK : INTERAGIR AVEC FACEBOOK
Plugins : bouton like, module de commentaire, 16 au total
Graph API : chaque utilisateur, page, post, photo, bref tout à sa page correspondante dans l’API
SDKs Android, iOS, JavaScript et PHP : boites à outils prêtes à l’emploi
Plus d’informations et de possibilités avec un Access Token
Des outils pour commencer de suite et les moyens d’aller plus loin
Les concepts et outils
LES BALISES OPEN GRAPH
Les balises Open Graph servent à transformer une page web en objet riche dans le social graph
Balises <meta>, elles se placent donc dans le <head> de votre HTML
Sans ces balises Facebook pourra lire votre URL mais ne saura pas la référencer correctement, elle ne sera pas mise en avant sur le site
LES BALISES OPEN GRAPH
Les indispensables
Le type : activity, actor, album, article, athlete, author, band, bar, blog, book, cafe, cause, city, company, country, director, drink, food, game, government, hotel, landmark,
movie, musician, non_profit, politician, product, public_figure, restaurant, school, song, sport, sports_league, sports_team, state_province, tv_show, university, website. Objets
prêts à l’emploi, il en existe d’autres pour complémenter ceux là. Vous pouvez aussi créer les vôtres
Le titre : Un titre destiné à l’humain / pas un titre optimisé pour le SEOUne Image : L’URL d’une image associé au contenu. Par exemple l’image à la une pour un article de blog. Le logo du site pour la page d’accueil, ou les pages à propos etc.Une URL dite canonique : L’URL préférée pour accéder à votre contenu sans tous les paramètres / attributs qui pourraient la parasiter. (sans les paramètres GETs non nécessaires)
LES BALISES OPEN GRAPH
Les plus
Une description : Une description de l’objet en une ou deux phrasesLe nom du site : Le nom du site duquel est issu l’objet. Pour un article de blog, le blog duquel il vient. Ex : “IMDb” pour une fiche de film recensé sur IMDb
Des informations complémentaires (certains types d’objets)
Certains objets peuvent s’accompagner de plus d’informations comme les objets de type Movie pour lesquels on peut par exemple rajouter une liste d’acteurs, le réalisateur, etc. Les Books ont un auteur, la liste est longue.Une liste détaillée des propriétés disponible pour chaque objet est disponible dans la documentation Facebook.
CONCRÈTEMENT
Une implémentation - CINEMUR
<meta property="og:type" content="movie"><meta property="og:title" content="CINEMUR.FR | Films au cinéma, séances et programme TV"><meta property="og:description" content="Consultez rapidement les films au cinéma, les bandes-annonces, les horaires de vos salles favorites et partagez vos avis avec vos amis."><meta property="og:url" content="http://cinemur.fr/"><meta property="og:image" content="http://cinemur.fr/img/logo_cinemur.jpg"><meta property="og:site_name" content="CINEMUR"><meta property="!:app_id" content="159924594044587"><meta property="og:video" content="http://www.dailymotion.com/embed/video/xtnunp?logo=0&related=0">
ENCORE UN PEU
L’App ID : votre application sur Facebook + l’accès aux Insights
Admins : les administrateurs de la page, donne l’accès à l’administration des plugins présents
Facebook Debugger : Vérifier que votre page est correctement paramétrée
Et maintenant il ne reste plus qu’à intégrer le bouton like à votre page
GRAPH API
Une URL unique pour chaque élément présent sur Facebook
On y retrouve toutes les informations publiques, celles qui sont accessibles sans être connecté à Facebook
Exemple : Mark Zuckerberg
Le Graph API Explorer permet de plus facilement naviguer entre les objets et obtenir pus d’informations
OBTENIR PLUS D’INFORMATIONS
Facebook ne se limite pas aux informations basiques
Access Token (jeton d’accès)
Unique : N’est valide que pour un utilisateur Limité dans le temps : Un access token n’est valide qu’une heure environ, il se renouvelle / il faut le renouvelerValide dans un certain scope : On a accès qu’à ce qu’on demande à l’utilisateur. Il peut ne pas tout accepter.
Définir le scope : demander les permissions à l’utilisateur
LISTE DES PERMISSIONS
Informations basiquesID, name, first_name, last_name, link, username, gender & locale
Informations liées aux actions Open Graph
Publish actions : Pour publier des actions dans l’Open Graph. Les actions apparaissent dans le ticker, le flux d’actualité et dans une box spécifique sur le profil de la personne.Il est aussi possible de récupérer les informations de l’utilisateur et de ces amis pour tout ce qui a été publié.
Informations Complémentaires
L’ensemble des informations disponibles dans l’onglet À propos de votre profil ou celle de vos amis.
POPUP DE CONNEXION
Fenêtre de connexion
Permissions facultatives
VEILLE AUTOUR DE FACEBOOK ET DES CAMPAGNES
Voir les campagnes mises en avant par Facebookhttp://www.facebook-studio.com
Se tenir informé
Être notifié par mail des nouveautés concernant l’ensemble de la plateforme Facebook
Étude de cas des agences reconnues par Facebookhttp://www.facebook-pmdcenter.com/
Custom actions
PAS À PAS
Créer son app
Configurer ses actions
Configurer ses objets
Créer une/ des agrégation(s)
NB : Il est très probable que Facebook ne vous autorise pas à créer d’applications. Les slides et le code seront en ligne à la fin de la présentation.
CE QUE L’ON VA RÉALISER
Des objets de type « cours » (un objet custom)
Des objets de type « intervenant » (un objet custom)
Des actions de type « donner un cours »
Des actions de type « recevoir un cours » donné par un « intervenant » pour montrer le lien entre les objets pour plus d’interaction encore
Une agrégation de type « intervenants préférés »
Créer son app
Rendez vous sur https://developers.facebook.com/apps
Cliquez sur «Create new app»
NB : Pour créer une application il faut avoir un compte Facebook «certifié».Vous devez soit avoir renseigné votre numéro de téléphone, soit votre numéro de carte de crédit.(Pour les informations de carte de crédit, rien n’est débité)
Informations à renseigner
App name : Le nom de votre application tel qu’il apparaitra sur FacebookApp namespace : Permet d’accéder à votre application sur Facebook, il préfixe également vos objets et vos actions
Créer son app
Configuration
CRÉER SES ACTIONS ET OBJETS OPEN GRAPH
Une première action, un premier objetDepuis la barre latérale, rendez vous dans «Open Graph».Remplissez les champs avec votre verbe d’action ”attend” et votre objet “course”.Laissez les informations telles qu’elles le sont, cliquez sur “save changes and next” jusqu’à arriver à la configuration de votre première agrégation.
Une agrégation
Notre agrégation va reprendre les derniers cours auxquels nous avons assistés. Il faut donc lister par action. On liste les dernières actions de type “Attend”. Renseignez les champs suivants :Data to display : AttendSort by : Most recent
OPEN GRAPH
Configuration
Exemple de code
Les sources
PrésentationCode : https://github.com/synerghetic/Formation-openGraph/Site : http://synerghetic.github.com/Formation-openGraph/
Sources FacebookToute la doc : https://developers.facebook.com/docs/Login : https://developers.facebook.com/docs/howtos/login/getting-started/Open Graph : https://developers.facebook.com/docs/concepts/opengraph/Graph API : https://developers.facebook.com/docs/reference/api/
Pour finir
MERCI DE VOTRE ATTENTION
DES QUESTIONS ?
IL Y AURA D’AUTRES FORMATIONS !
Conception sous Axure : le 14 ou le 15 janvier (date encore à définir)
Le reste des formations Git
Encore plus d’APIs
N’hésitez pas à venir me parler / à envoyer un mail