Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Facebook API's par Benjamin Theunen, CTO d'OpenGraphy

834 views

Published on

Conférence FeWeb - 04/06/2103
Louvain-la-Neuve (Belgium)

More info:
http://www.opengraphy.com

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Facebook API's par Benjamin Theunen, CTO d'OpenGraphy

  1. 1. OpenGraphy pour FewebIntégration de Facebook
  2. 2. OpenGraphy 2012 ©Preferred Marketing Developer
  3. 3. OpenGraphy 2012 ©Preferred Marketing Developer2010 2011 2012
  4. 4. OpenGraphy 2012 ©Preferred Marketing Developer…
  5. 5. OpenGraphy 2012 ©Preferred Marketing Developer
  6. 6. OpenGraphy 2012 ©Preferred Marketing Developer
  7. 7. OpenGraphy 2012 ©Preferred Marketing Developer• Le plus gros réseau social ;• Un milliard dutilisateurs ;• Des millions de pages officielles ;• Des millions de publications quotidiennes ;• Des milliards de photos ;• Des millers dapplications ;• Des milliers de sites intégrant le boutons likes ;• Des milliers de sites integrant au moins un plugin social ;• Des milliers de sites integrant un Facebook connect ;• Des applicatifs sur mobiles, consoles, télévisions connectées ;Le deuxième plus gros site mondial, des opportunitésgrandissantes, des outils chaque jour plus étudiés et unacteur décisif du design du futur web.
  8. 8. OpenGraphy 2012 ©Preferred Marketing Developer• Différencier les approches sociales ;• Comprendre le concept de Social Graph ;• Comprendre le concept de Social By Design ;• Créer et exploiter son propre Social Graph ;• Faire un tour rapide des outils offerts parFacebook ;• Créer sa première application et exploiter lesdonnées récoltées ;
  9. 9. OpenGraphy 2012 ©Preferred Marketing DeveloperPremière étape : mettre son site sur Facebook
  10. 10. OpenGraphy 2012 ©Preferred Marketing Developer?Community management = Fans
  11. 11. OpenGraphy 2012 ©Preferred Marketing DeveloperYoursite + …Deuxième étape : mettre facebook sur son site !
  12. 12. OpenGraphy 2012 ©Preferred Marketing Developer+ Amis?
  13. 13. OpenGraphy 2012 ©Preferred Marketing DeveloperImpressionssurFacebookVisitesdepuisFacebookInteractionssocialesInscriptionsutilisateurActionsutilisateursRevenu +SatisfactionFACEBOOK APPLICATION CRM
  14. 14. OpenGraphy 2012 ©Preferred Marketing Developer
  15. 15. OpenGraphy 2012 ©Preferred Marketing Developer• Facebook est une grande carte ;• Composé dutilisateurs, de pages et dobjets en tout genrequi représentent des noeuds (ou des sommets) ;• Composé également dactions qui relient entre eux lesutilisateurs, pages et objets (arcs).-> Il sagit du Social Graph.Facebook détient un des plus grand Social Graph.
  16. 16. OpenGraphy 2012 ©Preferred Marketing Developer
  17. 17. OpenGraphy 2012 ©Preferred Marketing Developer
  18. 18. OpenGraphy 2012 ©Preferred Marketing Developer
  19. 19. OpenGraphy 2012 ©Preferred Marketing Developer
  20. 20. OpenGraphy 2012 ©Preferred Marketing DeveloperPages webObjets richesOpen Graph
  21. 21. OpenGraphy 2012 ©Preferred Marketing Developer
  22. 22. OpenGraphy 2012 ©Preferred Marketing DeveloperRICH OBJECTS
  23. 23. OpenGraphy 2012 ©Preferred Marketing DeveloperL’open graph,clédu référencementsocialWeb PagesRichObjects
  24. 24. OpenGraphy 2012 ©Preferred Marketing DeveloperQuelques balises meta sont nécessaires :
  25. 25. OpenGraphy 2012 ©Preferred Marketing Developer
  26. 26. OpenGraphy 2012 ©Preferred Marketing Developer• Designer votre site de manière à ce quil soitsocial :– Créer une expérience unique pour chaque visiteur ;– Proposer des produits / services en adéquation avecles attentes de linternaute ;– Offrir des fonctionnalités innovantes, des boutonsdactions spécifiques ;– Créer une communauté au sein de son site pourenrichir son Graph Social ;– Viraliser ses contenus ;– …
  27. 27. OpenGraphy 2012 ©Preferred Marketing Developer• Vous avez déjà descommunautés au sein devotre site ;• Vous enregistrez déjà lesactions des utilisateurs ;• Vous travaillez déjà lesactions pour proposer ducontenu adapté ;• Vous disposez alors desdeux couches de base :– Linternaute ;– Le monde.• Facebook vouspermet derajouter unedimensionintermédiaire :LES AMISCe que vous possédez déjà Ce que vous pouvez avoir
  28. 28. OpenGraphy 2012 ©Preferred Marketing DeveloperUserAmisMondeBase de larecommendationsociale
  29. 29. OpenGraphy 2012 ©Preferred Marketing Developer
  30. 30. OpenGraphy 2012 ©Preferred Marketing Developer
  31. 31. OpenGraphy 2012 ©Preferred Marketing Developer• Comment créer des algorithmes pertinents derecommandation ?• Sur quelles informations sappuyer ?• Comment optimiser les processus de calcul ?• Quelles sont les informations immédiatementdisponibles ?• Quelles sont les informations dont le calcul peutêtre délayé ?
  32. 32. OpenGraphy 2012 ©Preferred Marketing Developer• La plateforme pour développeurs :https://developers.facebook.com/
  33. 33. OpenGraphy 2012 ©Preferred Marketing Developer• Uniquement en anglais ;• Mise à jour régulièrement (les dates de mises àjour sont disponibles en bas de page) ;• Assez complète (toujours avoir un oeil sur lesrapports de bugs) ;• Exemples et tutoriels disponibles ;• Formulaires de création et de personalisation pourles plugins sociaux ;• Documentation disponible pour différents type dedevice et langage : PHP, Javascript, IOS, Android,les autres disponibles par des tiers.
  34. 34. OpenGraphy 2012 ©Preferred Marketing DeveloperDocumentation qui nousintéresse aujourdhui.
  35. 35. OpenGraphy 2012 ©Preferred Marketing Developer
  36. 36. OpenGraphy 2012 ©Preferred Marketing Developer• Graph API Explorer :– Permet de parcourir le Social Graph– Arborescence par noeuds– Possibilité de sélectionner les champs de retour, delimiter le nombre de résultats, de choisir des périodesdonnées ;– Permet deffectuer des recherches, de publier etdeffacer des actions.Le Graph API Explorer est un des outils les plus importants et des plus utiles lorsde la phase de développement.
  37. 37. OpenGraphy 2012 ©Preferred Marketing Developer
  38. 38. OpenGraphy 2012 ©Preferred Marketing Developer• Debugger :– Permet debugger une url ou un access token ;– Affiche les erreurs détectées dans un balisage OpenGraph et les solutions possibles pour les corriger ;– Permet davoir le rendu de ce que le scraper deFacebook voit sur votre page ;
  39. 39. OpenGraphy 2012 ©Preferred Marketing Developer
  40. 40. OpenGraphy 2012 ©Preferred Marketing Developer40
  41. 41. OpenGraphy 2012 ©Preferred Marketing Developer• Objectifs– Créer une application Facebook ;– Parcourir les différents écrans de configuration etdéfinir les paramètres de base ;– Récupérer le SDK PHP ;– Initialiser lapplication ;– Définir les permissions nécessaires ;– Connecter un utilisateur ;– Récupérer ses informations en interrogeant la GraphAPI ;
  42. 42. OpenGraphy 2012 ©Preferred Marketing Developer
  43. 43. OpenGraphy 2012 ©Preferred Marketing Developer
  44. 44. OpenGraphy 2012 ©Preferred Marketing Developer
  45. 45. OpenGraphy 2012 ©Preferred Marketing Developer
  46. 46. OpenGraphy 2012 ©Preferred Marketing Developer
  47. 47. OpenGraphy 2012 ©Preferred Marketing Developer
  48. 48. OpenGraphy 2012 ©Preferred Marketing Developer
  49. 49. OpenGraphy 2012 ©Preferred Marketing Developer1. Création des répertoires et de larchitecture de lapplication :2. Structure du répertoire "libraries" :
  50. 50. OpenGraphy 2012 ©Preferred Marketing Developer• Cette application récupèrera ladresse emailde lutilisateur qui sy connecte, sesinformations de base ainsi que ses likes.• Il existe un grand nombre de permissionsdifférentes :
  51. 51. OpenGraphy 2012 ©Preferred Marketing Developer
  52. 52. OpenGraphy 2012 ©Preferred Marketing Developer
  53. 53. OpenGraphy 2012 ©Preferred Marketing Developer
  54. 54. OpenGraphy 2012 ©Preferred Marketing Developer
  55. 55. OpenGraphy 2012 ©Preferred Marketing Developer• Les permissions doivent être sélectionnéesavec soin car :– Elles doivent réellement servir linternaute lorsde son expérience sur votre site ;– Plus le nombre de permissions demandées estimportant, moins les utilisateurs les cèderont.• Il est tout à fait possible de demander despermissions à des moments définis dans unparcours utilisateur.
  56. 56. OpenGraphy 2012 ©Preferred Marketing Developer1. Création du fichier index.php ;2. Instanciation de lobjet Facebook ;
  57. 57. OpenGraphy 2012 ©Preferred Marketing Developer
  58. 58. OpenGraphy 2012 ©Preferred Marketing Developer
  59. 59. OpenGraphy 2012 ©Preferred Marketing Developer
  60. 60. OpenGraphy 2012 ©Preferred Marketing Developer
  61. 61. OpenGraphy 2012 ©Preferred Marketing Developer
  62. 62. OpenGraphy 2012 ©Preferred Marketing Developer
  63. 63. OpenGraphy 2012 ©Preferred Marketing Developer
  64. 64. OpenGraphy 2012 ©Preferred Marketing Developer
  65. 65. OpenGraphy 2012 ©Preferred Marketing Developer
  66. 66. OpenGraphy 2012 ©Preferred Marketing Developer
  67. 67. OpenGraphy 2012 ©Preferred Marketing Developer
  68. 68. OpenGraphy 2012 ©Preferred Marketing Developer
  69. 69. OpenGraphy 2012 ©Preferred Marketing Developer
  70. 70. OpenGraphy 2012 ©Preferred Marketing Developer
  71. 71. OpenGraphy 2012 ©Preferred Marketing Developer
  72. 72. OpenGraphy 2012 ©Preferred Marketing Developer
  73. 73. OpenGraphy 2012 ©Preferred Marketing Developer73Job done !

×