SlideShare une entreprise Scribd logo
1  sur  33
Télécharger pour lire hors ligne
Facebook Open Graph
Le 11 décembre 2012
Damien CORNU




                 Facebook Open Graph protocol




                           La Junior-Entreprise des enfants
                                       du web
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
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,
                                                                                                                                                                       . 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)
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.
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&amp;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
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
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.
POPUP DE CONNEXION


Fenêtre de connexion




Permissions facultatives
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
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 Facebook
App 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 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
OPEN GRAPH


Configuration
Exemple de code
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/
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


                 formations@synerghetic.net

Contenu connexe

Similaire à Formafion facebook open graph synerg'hetic

Facebook : Entre Social Graph & Social Shopping
Facebook : Entre Social Graph & Social ShoppingFacebook : Entre Social Graph & Social Shopping
Facebook : Entre Social Graph & Social ShoppingYoung Planneur
 
Facebook : Integration d’applications professionnelles
Facebook : Integration d’applications professionnellesFacebook : Integration d’applications professionnelles
Facebook : Integration d’applications professionnellesE2m Gig
 
Comment utiliser les plugins sociaux de Facebook
Comment utiliser les plugins sociaux de FacebookComment utiliser les plugins sociaux de Facebook
Comment utiliser les plugins sociaux de FacebookFastory
 
Meetic & Match - What's next on mobile
Meetic & Match - What's next on mobileMeetic & Match - What's next on mobile
Meetic & Match - What's next on mobileJuan Guillot Gonzalez
 
Présentation Facebook Developer Garage Toulouse - Etats des lieux de la plat...
Présentation Facebook Developer Garage Toulouse -  Etats des lieux de la plat...Présentation Facebook Developer Garage Toulouse -  Etats des lieux de la plat...
Présentation Facebook Developer Garage Toulouse - Etats des lieux de la plat...X-PRIME GROUPE
 
Comment utiliser les plugins Facebook
Comment utiliser les plugins FacebookComment utiliser les plugins Facebook
Comment utiliser les plugins FacebookMarketingZ
 
La Gazette des Plateformes #5
La Gazette des Plateformes #5La Gazette des Plateformes #5
La Gazette des Plateformes #5LaNetscouade
 
Community manager Facebook en BU
Community manager Facebook en BUCommunity manager Facebook en BU
Community manager Facebook en BUMagalie Le Gall
 
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...Scandola SA
 
Presentation Web 2.0 - ESSEC Geneve
Presentation Web 2.0 - ESSEC GenevePresentation Web 2.0 - ESSEC Geneve
Presentation Web 2.0 - ESSEC GeneveStephane Cheikh
 
Creer sa page facebook pro
Creer sa page facebook proCreer sa page facebook pro
Creer sa page facebook proCOMPETITIC
 
Comment viraliser les contenus de votre site grâce à l'open graph facebook
Comment viraliser les contenus de votre site grâce à l'open graph facebookComment viraliser les contenus de votre site grâce à l'open graph facebook
Comment viraliser les contenus de votre site grâce à l'open graph facebookPlayApp
 
Facebook : Maîtriser l'essentiel - JRCE 2014
Facebook : Maîtriser l'essentiel - JRCE 2014Facebook : Maîtriser l'essentiel - JRCE 2014
Facebook : Maîtriser l'essentiel - JRCE 2014Benjamin Yeurc'h
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Nicolas Morin
 
Google+ nurun 0112
Google+ nurun 0112Google+ nurun 0112
Google+ nurun 0112Numate
 
Web et communication
Web et communicationWeb et communication
Web et communicationlaureno
 
Seo camp day montreal tendances de la recherche - complet
Seo camp day montreal   tendances de la recherche - completSeo camp day montreal   tendances de la recherche - complet
Seo camp day montreal tendances de la recherche - completPriscilleGiani
 

Similaire à Formafion facebook open graph synerg'hetic (20)

Facebook : Entre Social Graph & Social Shopping
Facebook : Entre Social Graph & Social ShoppingFacebook : Entre Social Graph & Social Shopping
Facebook : Entre Social Graph & Social Shopping
 
Facebook : Integration d’applications professionnelles
Facebook : Integration d’applications professionnellesFacebook : Integration d’applications professionnelles
Facebook : Integration d’applications professionnelles
 
Comment utiliser les plugins sociaux de Facebook
Comment utiliser les plugins sociaux de FacebookComment utiliser les plugins sociaux de Facebook
Comment utiliser les plugins sociaux de Facebook
 
Meetic & Match - What's next on mobile
Meetic & Match - What's next on mobileMeetic & Match - What's next on mobile
Meetic & Match - What's next on mobile
 
Présentation Facebook Developer Garage Toulouse - Etats des lieux de la plat...
Présentation Facebook Developer Garage Toulouse -  Etats des lieux de la plat...Présentation Facebook Developer Garage Toulouse -  Etats des lieux de la plat...
Présentation Facebook Developer Garage Toulouse - Etats des lieux de la plat...
 
Comment utiliser les plugins Facebook
Comment utiliser les plugins FacebookComment utiliser les plugins Facebook
Comment utiliser les plugins Facebook
 
La Gazette des Plateformes #5
La Gazette des Plateformes #5La Gazette des Plateformes #5
La Gazette des Plateformes #5
 
Community manager Facebook en BU
Community manager Facebook en BUCommunity manager Facebook en BU
Community manager Facebook en BU
 
2864870.ppt
2864870.ppt2864870.ppt
2864870.ppt
 
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...
Nouveau fil d’actualité et Graph Search Facebook: analyse des enjeux pour les...
 
Open Web
Open WebOpen Web
Open Web
 
Presentation Web 2.0 - ESSEC Geneve
Presentation Web 2.0 - ESSEC GenevePresentation Web 2.0 - ESSEC Geneve
Presentation Web 2.0 - ESSEC Geneve
 
Creer sa page facebook pro
Creer sa page facebook proCreer sa page facebook pro
Creer sa page facebook pro
 
Comment viraliser les contenus de votre site grâce à l'open graph facebook
Comment viraliser les contenus de votre site grâce à l'open graph facebookComment viraliser les contenus de votre site grâce à l'open graph facebook
Comment viraliser les contenus de votre site grâce à l'open graph facebook
 
Facebook : Maîtriser l'essentiel - JRCE 2014
Facebook : Maîtriser l'essentiel - JRCE 2014Facebook : Maîtriser l'essentiel - JRCE 2014
Facebook : Maîtriser l'essentiel - JRCE 2014
 
Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)Drupal en bibliothèque (2008)
Drupal en bibliothèque (2008)
 
Google+ nurun 0112
Google+ nurun 0112Google+ nurun 0112
Google+ nurun 0112
 
Web et communication
Web et communicationWeb et communication
Web et communication
 
Seo camp day montreal tendances de la recherche - complet
Seo camp day montreal   tendances de la recherche - completSeo camp day montreal   tendances de la recherche - complet
Seo camp day montreal tendances de la recherche - complet
 
Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)Du référencement naturel (SEO) au référencement Social (SMO)
Du référencement naturel (SEO) au référencement Social (SMO)
 

Plus de Synerg'hetic

Comment adapter votre offre commerciale en fonction des évolutions du marché ...
Comment adapter votre offre commerciale en fonction des évolutions du marché ...Comment adapter votre offre commerciale en fonction des évolutions du marché ...
Comment adapter votre offre commerciale en fonction des évolutions du marché ...Synerg'hetic
 
Create Your First Chatbot #SynergVivaTech
Create Your First Chatbot #SynergVivaTechCreate Your First Chatbot #SynergVivaTech
Create Your First Chatbot #SynergVivaTechSynerg'hetic
 
Formation communication sur le Web
Formation communication sur le WebFormation communication sur le Web
Formation communication sur le WebSynerg'hetic
 
Formation Google Apps for work
Formation Google Apps for workFormation Google Apps for work
Formation Google Apps for workSynerg'hetic
 
Formation acquisition
Formation acquisitionFormation acquisition
Formation acquisitionSynerg'hetic
 
Formation cnh visibilité web enjeux et pratiques
Formation cnh   visibilité web enjeux et pratiquesFormation cnh   visibilité web enjeux et pratiques
Formation cnh visibilité web enjeux et pratiquesSynerg'hetic
 
Synerghetic-CheatSheet_github
Synerghetic-CheatSheet_githubSynerghetic-CheatSheet_github
Synerghetic-CheatSheet_githubSynerg'hetic
 
Synerghetic-Initiation_Github
Synerghetic-Initiation_GithubSynerghetic-Initiation_Github
Synerghetic-Initiation_GithubSynerg'hetic
 
Formation CNE 2012 : Acquisition et optimisation de trafic
Formation CNE 2012 : Acquisition et optimisation de traficFormation CNE 2012 : Acquisition et optimisation de trafic
Formation CNE 2012 : Acquisition et optimisation de traficSynerg'hetic
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Synerg'hetic
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Synerg'hetic
 
Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)Synerg'hetic
 
Formation : Réaliser et promouvoir un site internet (V1)
Formation : Réaliser et promouvoir un site internet (V1)Formation : Réaliser et promouvoir un site internet (V1)
Formation : Réaliser et promouvoir un site internet (V1)Synerg'hetic
 

Plus de Synerg'hetic (13)

Comment adapter votre offre commerciale en fonction des évolutions du marché ...
Comment adapter votre offre commerciale en fonction des évolutions du marché ...Comment adapter votre offre commerciale en fonction des évolutions du marché ...
Comment adapter votre offre commerciale en fonction des évolutions du marché ...
 
Create Your First Chatbot #SynergVivaTech
Create Your First Chatbot #SynergVivaTechCreate Your First Chatbot #SynergVivaTech
Create Your First Chatbot #SynergVivaTech
 
Formation communication sur le Web
Formation communication sur le WebFormation communication sur le Web
Formation communication sur le Web
 
Formation Google Apps for work
Formation Google Apps for workFormation Google Apps for work
Formation Google Apps for work
 
Formation acquisition
Formation acquisitionFormation acquisition
Formation acquisition
 
Formation cnh visibilité web enjeux et pratiques
Formation cnh   visibilité web enjeux et pratiquesFormation cnh   visibilité web enjeux et pratiques
Formation cnh visibilité web enjeux et pratiques
 
Synerghetic-CheatSheet_github
Synerghetic-CheatSheet_githubSynerghetic-CheatSheet_github
Synerghetic-CheatSheet_github
 
Synerghetic-Initiation_Github
Synerghetic-Initiation_GithubSynerghetic-Initiation_Github
Synerghetic-Initiation_Github
 
Formation CNE 2012 : Acquisition et optimisation de trafic
Formation CNE 2012 : Acquisition et optimisation de traficFormation CNE 2012 : Acquisition et optimisation de trafic
Formation CNE 2012 : Acquisition et optimisation de trafic
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"Formation : "Concevoir et promouvoir son site Internet"
Formation : "Concevoir et promouvoir son site Internet"
 
Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)
 
Formation : Réaliser et promouvoir un site internet (V1)
Formation : Réaliser et promouvoir un site internet (V1)Formation : Réaliser et promouvoir un site internet (V1)
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
  • 10. Les concepts et outils
  • 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&amp;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.
  • 19. POPUP DE CONNEXION Fenêtre de connexion Permissions facultatives
  • 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/
  • 31. MERCI DE VOTRE ATTENTION
  • 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