Formation : Réaliser et promouvoir un site internet (V1)
Formafion facebook open graph synerg'hetic
1. Facebook Open Graph
Le 11 décembre 2012
Damien CORNU
Facebook Open Graph protocol
La Junior-Entreprise des enfants
du web
2. SOMMAIRE
Open Graph — présentation
Les concepts et les outils — ce qu’on peut faire et comment le mettre en place
Custom Actions — Quand les actions built-ins ne suffisent plus
Exemple de code — premiers pas
4. 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 !
5. 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 »
6. Le Social graph
Les objets internes à Facebook, «limité» en termes d’interactions
7. L’Open Graph
Avec l’Open Graph, Facebook peut intégrer n’importe quelle page
dans le Social Graph
8. 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
9. 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
11. 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
12. 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,
. Objets
movie, musician, non_profit, politician, product, public_figure, restaurant, school, song, sport, sports_league, sports_team, state_province, tv_show, university, website
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 SEO
Une 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)
13. LES BALISES OPEN GRAPH
Les plus
Une description : Une description de l’objet en une ou deux phrases
Le 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.
14. 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="fb:app_id" content="159924594044587">
<meta property="og:video" content="http://www.dailymotion.com/embed/video/xtnunp?logo=0&related=0">
15. 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
16. 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
17. 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
renouveler
Valide 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
18. LISTE DES PERMISSIONS
Informations basiques
ID, 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.
20. VEILLE AUTOUR DE FACEBOOK ET DES CAMPAGNES
Voir les campagnes mises en avant par Facebook
http://www.facebook-studio.com
Étude de cas des agences reconnues par Facebook
http://www.facebook-pmdcenter.com/
Se tenir informé
Être notifié par mail des nouveautés concernant l’ensemble de la plateforme Facebook
22. 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.
23. 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 »
24. 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 Facebook
App namespace : Permet d’accéder à votre application sur Facebook, il préfixe également vos objets et vos
actions
26. CRÉER SES ACTIONS ET OBJETS OPEN GRAPH
Une première action, un premier objet
Depuis 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 : Attend
Sort by : Most recent
29. Les sources
Sources Facebook
Toute 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/
Présentation
Code : https://github.com/synerghetic/Formation-openGraph/
Site : http://synerghetic.github.com/Formation-openGraph/
33. 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
formations@synerghetic.net