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

775 views

Published on

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

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
775
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Différencier les approchessociales
  • = inscritsàune news letter -> 16% de visibilitéFans sontanonymes, en tout cas pas moyen de les recontacter.Toutesboites, pas de segmentation.
  • Avantages : gardersesoutils de mesures, analytics, reporting et CRMUtilisateursdeviennentconnus + leursamis.
  • Eh bien, on va faire comme Facebook,créer un social graph au sein de votre site internet !Tracker les actions et offrir du contenuapproprié aux internautesconnectés.
  • Derrière seschiffresimpressionants, facebookestunegrande carte. Une carte oùchaqueutilisateurest un point, reliéàd'autres points.Plus les points ont de connexions, plus ilssontqualifiés.Plus ilssontqualifiés, plus ils "valent".C'est pour celaque Facebook estestiméàplusieurs milliards de dollars, ilsaitsegmenter son audience et adresser des publications aux bonnespersonnes.Nous allonsvoirici comment faire pareilsurvotre site internet.
  • Facebook v1Lesnoeudssont des utilisateursLes arcs sont des relations d'amitié, on qualifietrèspeul'internaute.
  • L'internauteestdécritcomme la somme de sesinterets et deses mentions "Likes"On peutdèslorsluiadresser des messages personnalisés et des recommandationsspécifiques. De plus, on peutanalysercequesesamisaiment et luisuggérer du contenu encore inconnu.
  • Facebook v3-> Amonsens, le vrai web social. L'utilisateurn'est plus simplement la somme de ses likes mais au sens plus large, la somme de ses actions."Je suisceque je fais" et non plus "je suisceque je prétendsêtre".Cette dimension offre aux webmasters uneréelleopportunité de connaitremieuxleur audience et de segmenterleursmembres/clients.De plus, en parcourant le Graph àmoindre mal, on peut proposer des contenuspertinentsàl'internautebasésur les activité de sesamis.
  • Pour faire toutecelasur son site Internet, la première étapeestd'injectersescontenusdans le Graph Social de Facebook.Evidemment, ilfautconscidérersesopportunitéscommeune relation win/win entre votre site internet et Facebook.Vousaurez la possibilité de tirerparti des outils de Facebook et Facebook sera nourri par les actions effectuées par vosutilisateurs.C'estdonnant-donnant.
  • Pourinjectersescontenus, ilfaudrabaliservos pages avec unesérie de meta tags définis par le protocole Open Graph.Initialementconçu par Facebook comme un langage de metadata traditionnel, ilfutviterenduouvert pour offrir un maximum de possibilités aux webmasters et surtout un retour d'expérience plus important.
  • On part d'une page web traditionnelle, on y ajouteunesérie de balisespermettantsatraductiondansl'écosystème social.Facebook récupèresesbalises, les analyse et s'il les comprend, traduit et adapte le rendu de la page sursaplateforme.Il propose alorsàl'internaute un renducomprenantévidemment un lien maisaussi un titre, une description, une image selectionnée et un lien versl'objet.
  • On parled'objets riches car en plus des informationsclassiques, on peut y adjoindreunevidéo (exempleyoutube) ou du son (exemplespotify)
  • Ce ne sont plus les spiders des moteurs de recherche quiparcourentvotre site passant de liens en liens, mais les internautes en accomplissant des actions qui indexentvos pages.Ilsinjectent les objetsdans le Social Graph De Facebook.
  • Dèsquevosobjetssontpresàêtretransfomés en objets riches, vouspouvez commencer àaborder le concept
  • Créer des tests users ! Pas de faux comptes !
  • 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 !

    ×