0
Facebook Open GraphLe 11 décembre 2012Damien CORNU                 Facebook Open Graph protocol                           ...
SOMMAIREOpen Graph — présentationLes concepts et les outils     — ce qu’on peut faire et comment le mettre en placeCustom ...
Open Graph
FACEBOOK UNE MINE D’INFORMATIONProfils (informations basiques) : nom, prénom, âge, adresseGoûts / likesPosts, photos, vidéo...
DES PERSONNES, DES OBJETS ET DES (INTER)ACTIONSFacebook repose sur les relations entre individusLes actions entre individu...
Le Social graphLes objets internes à Facebook, «limité» en termes d’interactions
L’Open GraphAvec l’Open Graph, Facebook peut intégrer n’importe quelle pagedans le Social Graph
OGP, LA PASSERELLE ENTRE LES INFORMATIONS ET FACEBOOKUne page web, n’est qu’une page WebJusqu’à...L’implémentation de bali...
PLUGINS, API ET SDK : INTERAGIR AVEC FACEBOOKPlugins : bouton like, module de commentaire, 16 au totalGraph API : chaque u...
Les concepts et outils
LES BALISES OPEN GRAPHLes balises Open Graph servent à transformer une page web en objet riche dans le socialgraphBalises ...
LES BALISES OPEN GRAPHLes indispensablesLe type : activity, actor, album, article, athlete, author, band, bar, blog, book,...
LES BALISES OPEN GRAPHLes plusUne description : Une description de l’objet en une ou deux phrasesLe nom du site : Le nom d...
CONCRÈTEMENTUne implémentation - CINEMUR<meta property="og:type" content="movie"><meta property="og:title" content="CINEMU...
ENCORE UN PEUL’App ID : votre application sur Facebook + l’accès aux InsightsAdmins : les administrateurs de la page, donn...
GRAPH APIUne URL unique pour chaque élément présent sur FacebookOn y retrouve toutes les informations publiques, celles qu...
OBTENIR PLUS D’INFORMATIONSFacebook ne se limite pas aux informations basiquesAccess Token (jeton d’accès)Unique : N’est v...
LISTE DES PERMISSIONSInformations basiquesID, name, first_name, last_name, link, username, gender & localeInformations liée...
POPUP DE CONNEXIONFenêtre de connexionPermissions facultatives
VEILLE AUTOUR DE FACEBOOK ET DES CAMPAGNESVoir les campagnes mises en avant par Facebookhttp://www.facebook-studio.comÉtud...
Custom actions
PAS À PASCréer son appConfigurer ses actionsConfigurer ses objetsCréer une/ des agrégation(s)NB : Il est très probable que F...
CE QUE L’ON VA RÉALISERDes objets de type « cours » (un objet custom)Des objets de type « intervenant » (un objet custom)D...
Créer son appRendez vous sur https://developers.facebook.com/appsCliquez sur «Create new app»NB : Pour créer une applicati...
Créer son appConfiguration
CRÉER SES ACTIONS ET OBJETS OPEN GRAPHUne première action, un premier objetDepuis la barre latérale, rendez vous dans «Ope...
OPEN GRAPHConfiguration
Exemple de code
Les sourcesSources FacebookToute la doc : https://developers.facebook.com/docs/Login : https://developers.facebook.com/doc...
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 formation...
Upcoming SlideShare
Loading in...5
×

Formafion facebook open graph synerg'hetic

421

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
421
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Formafion facebook open graph synerg'hetic"

  1. 1. Facebook Open GraphLe 11 décembre 2012Damien CORNU Facebook Open Graph protocol La Junior-Entreprise des enfants du web
  2. 2. SOMMAIREOpen Graph — présentationLes concepts et les outils — ce qu’on peut faire et comment le mettre en placeCustom Actions — Quand les actions built-ins ne suffisent plusExemple de code — premiers pas
  3. 3. Open Graph
  4. 4. FACEBOOK UNE MINE D’INFORMATIONProfils (informations basiques) : nom, prénom, âge, adresseGoûts / likesPosts, photos, vidéosPleins d’autres choses encoreEt vos amis !
  5. 5. DES PERSONNES, DES OBJETS ET DES (INTER)ACTIONSFacebook repose sur les relations entre individusLes actions entre individus : posts, likes, commentairesLes actions des utilisateurs avec des pagesEt depuis peu (un an) : vos actions sur de plus en plus d’applicationsL’ensemble forme le « social graph »
  6. 6. Le Social graphLes objets internes à Facebook, «limité» en termes d’interactions
  7. 7. L’Open GraphAvec l’Open Graph, Facebook peut intégrer n’importe quelle pagedans le Social Graph
  8. 8. OGP, LA PASSERELLE ENTRE LES INFORMATIONS ET FACEBOOKUne page web, n’est qu’une page WebJusqu’à...L’implémentation de balises MetaPlus particulièrement les balises de l’Open Graph protocolElles transforment une page web en objet riche dans le social graph
  9. 9. PLUGINS, API ET SDK : INTERAGIR AVEC FACEBOOKPlugins : bouton like, module de commentaire, 16 au totalGraph API : chaque utilisateur, page, post, photo, bref tout à sa page correspondantedans l’APISDKs Android, iOS, JavaScript et PHP : boites à outils prêtes à l’emploiPlus d’informations et de possibilités avec un Access TokenDes outils pour commencer de suite et les moyens d’aller plus loin
  10. 10. Les concepts et outils
  11. 11. LES BALISES OPEN GRAPHLes balises Open Graph servent à transformer une page web en objet riche dans le socialgraphBalises <meta>, elles se placent donc dans le <head> de votre HTMLSans ces balises Facebook pourra lire votre URL mais ne saura pas la référencercorrectement, elle ne sera pas mise en avant sur le site
  12. 12. LES BALISES OPEN GRAPHLes indispensablesLe type : activity, actor, album, article, athlete, author, band, bar, blog, book, cafe, cause, city, company, country, director, drink, food, game, government, hotel, landmark, . Objetsmovie, musician, non_profit, politician, product, public_figure, restaurant, school, song, sport, sports_league, sports_team, state_province, tv_show, university, websiteprêts à l’emploi, il en existe d’autres pour complémenter ceux là. Vous pouvez aussi créer les vôtresLe 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. Lelogo 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 / attributsqui pourraient la parasiter. (sans les paramètres GETs non nécessaires)
  13. 13. LES BALISES OPEN GRAPHLes plusUne 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 IMDbDes informations complémentaires (certains types d’objets)Certains objets peuvent s’accompagner de plus d’informations comme les objets de type Movie pour lesquelson peut par exemple rajouter une liste d’acteurs, le réalisateur, etc. Les Books ont un auteur, la liste estlongue.Une liste détaillée des propriétés disponible pour chaque objet est disponible dans la documentationFacebook.
  14. 14. CONCRÈTEMENTUne 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, lesbandes-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. 15. ENCORE UN PEUL’App ID : votre application sur Facebook + l’accès aux InsightsAdmins : les administrateurs de la page, donne l’accès à l’administration des pluginsprésentsFacebook Debugger : Vérifier que votre page est correctement paramétréeEt maintenant il ne reste plus qu’à intégrer le bouton like à votre page
  16. 16. GRAPH APIUne URL unique pour chaque élément présent sur FacebookOn y retrouve toutes les informations publiques, celles qui sont accessibles sans êtreconnecté à FacebookExemple : Mark ZuckerbergLe Graph API Explorer permet de plus facilement naviguer entre les objets et obtenir pusd’informations
  17. 17. OBTENIR PLUS D’INFORMATIONSFacebook ne se limite pas aux informations basiquesAccess Token (jeton d’accès)Unique : N’est valide que pour un utilisateurLimité dans le temps : Un access token n’est valide qu’une heure environ, il se renouvelle / il faut lerenouvelerValide dans un certain scope : On a accès qu’à ce qu’on demande à l’utilisateur. Il peut ne pas toutaccepter.Définir le scope : demander les permissions à l’utilisateur
  18. 18. LISTE DES PERMISSIONSInformations basiquesID, name, first_name, last_name, link, username, gender & localeInformations liées aux actions Open GraphPublish actions : Pour publier des actions dans l’Open Graph. Les actions apparaissent dans le ticker, le fluxd’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émentairesL’ensemble des informations disponibles dans l’onglet À propos de votre profil ou celle de vos amis.
  19. 19. POPUP DE CONNEXIONFenêtre de connexionPermissions facultatives
  20. 20. VEILLE AUTOUR DE FACEBOOK ET DES CAMPAGNESVoir les campagnes mises en avant par Facebookhttp://www.facebook-studio.comÉtude de cas des agences reconnues par Facebookhttp://www.facebook-pmdcenter.com/Se tenir informéÊtre notifié par mail des nouveautés concernant l’ensemble de la plateforme Facebook
  21. 21. Custom actions
  22. 22. PAS À PASCréer son appConfigurer ses actionsConfigurer ses objetsCréer une/ des agrégation(s)NB : Il est très probable que Facebook ne vous autorise pas à créer d’applications. Lesslides et le code seront en ligne à la fin de la présentation.
  23. 23. CE QUE L’ON VA RÉALISERDes 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 lelien entre les objets pour plus d’interaction encoreUne agrégation de type « intervenants préférés »
  24. 24. Créer son appRendez vous sur https://developers.facebook.com/appsCliquez 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 à renseignerApp 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 vosactions
  25. 25. Créer son appConfiguration
  26. 26. CRÉER SES ACTIONS ET OBJETS OPEN GRAPHUne 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 à laconfiguration de votre première agrégation.Une agrégationNotre 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
  27. 27. OPEN GRAPHConfiguration
  28. 28. Exemple de code
  29. 29. Les sourcesSources 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/PrésentationCode : https://github.com/synerghetic/Formation-openGraph/Site : http://synerghetic.github.com/Formation-openGraph/
  30. 30. Pour finir
  31. 31. MERCI DE VOTRE ATTENTION
  32. 32. DES QUESTIONS ?
  33. 33. IL Y AURA D’AUTRES FORMATIONS !Conception sous Axure : le 14 ou le 15 janvier (date encore à définir)Le reste des formations GitEncore plus d’APIsN’hésitez pas à venir me parler / à envoyer un mail formations@synerghetic.net
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×