SlideShare uma empresa Scribd logo
1 de 73
OpenGraphy pour Feweb
Intégration de Facebook
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
2010 2011 2012
OpenGraphy 2012 ©
Preferred Marketing Developer
…
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Le plus gros réseau social ;
• Un milliard d'utilisateurs ;
• Des millions de pages officielles ;
• Des millions de publications quotidiennes ;
• Des milliards de photos ;
• Des millers d'applications ;
• 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és
grandissantes, des outils chaque jour plus étudiés et un
acteur décisif du design du futur web.
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 par
Facebook ;
• Créer sa première application et exploiter les
données récoltées ;
OpenGraphy 2012 ©
Preferred Marketing Developer
Première étape : mettre son site sur Facebook
OpenGraphy 2012 ©
Preferred Marketing Developer
?
Community management = Fans
OpenGraphy 2012 ©
Preferred Marketing Developer
Your
site + …
Deuxième étape : mettre facebook sur son site !
OpenGraphy 2012 ©
Preferred Marketing Developer
+ Amis
?
OpenGraphy 2012 ©
Preferred Marketing Developer
Impressions
sur
Facebook
Visites
depuis
Facebook
Interactions
sociales
Inscriptions
utilisateur
Actions
utilisateurs
Revenu +
Satisfaction
FACEBOOK APPLICATION CRM
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Facebook est une grande carte ;
• Composé d'utilisateurs, de pages et d'objets en tout genre
qui représentent des noeuds (ou des sommets) ;
• Composé également d'actions qui relient entre eux les
utilisateurs, pages et objets (arcs).
-> Il s'agit du Social Graph.
Facebook détient un des plus grand Social Graph.
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
Pages web
Objets riches
Open Graph
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
RICH OBJECTS
OpenGraphy 2012 ©
Preferred Marketing Developer
L’open graph,
clé
du référencement
social
Web Pages
Rich
Objects
OpenGraphy 2012 ©
Preferred Marketing Developer
Quelques balises meta sont nécessaires :
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Designer votre site de manière à ce qu'il soit
social :
– Créer une expérience unique pour chaque visiteur ;
– Proposer des produits / services en adéquation avec
les attentes de l'internaute ;
– Offrir des fonctionnalités innovantes, des boutons
d'actions spécifiques ;
– Créer une communauté au sein de son site pour
enrichir son Graph Social ;
– Viraliser ses contenus ;
– …
OpenGraphy 2012 ©
Preferred Marketing Developer
• Vous avez déjà des
communautés au sein de
votre site ;
• Vous enregistrez déjà les
actions des utilisateurs ;
• Vous travaillez déjà les
actions pour proposer du
contenu adapté ;
• Vous disposez alors des
deux couches de base :
– L'internaute ;
– Le monde.
• Facebook vous
permet de
rajouter une
dimension
intermédiaire :
LES AMIS
Ce que vous possédez déjà Ce que vous pouvez avoir
OpenGraphy 2012 ©
Preferred Marketing Developer
User
Amis
Monde
Base de la
recommendation
sociale
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Comment créer des algorithmes pertinents de
recommandation ?
• Sur quelles informations s'appuyer ?
• Comment optimiser les processus de calcul ?
• Quelles sont les informations immédiatement
disponibles ?
• Quelles sont les informations dont le calcul peut
être délayé ?
OpenGraphy 2012 ©
Preferred Marketing Developer
• La plateforme pour développeurs :
https://developers.facebook.com/
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 les
rapports de bugs) ;
• Exemples et tutoriels disponibles ;
• Formulaires de création et de personalisation pour
les plugins sociaux ;
• Documentation disponible pour différents type de
device et langage : PHP, Javascript, IOS, Android,
les autres disponibles par des tiers.
OpenGraphy 2012 ©
Preferred Marketing Developer
Documentation qui nous
intéresse aujourd'hui.
OpenGraphy 2012 ©
Preferred Marketing Developer
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, de
limiter le nombre de résultats, de choisir des périodes
données ;
– Permet d'effectuer des recherches, de publier et
d'effacer des actions.
Le Graph API Explorer est un des outils les plus importants et des plus utiles lors
de la phase de développement.
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Debugger :
– Permet debugger une url ou un access token ;
– Affiche les erreurs détectées dans un balisage Open
Graph et les solutions possibles pour les corriger ;
– Permet d'avoir le rendu de ce que le scraper de
Facebook voit sur votre page ;
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
40
OpenGraphy 2012 ©
Preferred Marketing Developer
• Objectifs
– Créer une application Facebook ;
– Parcourir les différents écrans de configuration et
définir les paramètres de base ;
– Récupérer le SDK PHP ;
– Initialiser l'application ;
– Définir les permissions nécessaires ;
– Connecter un utilisateur ;
– Récupérer ses informations en interrogeant la Graph
API ;
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
1. Création des répertoires et de l'architecture de l'application :
2. Structure du répertoire "libraries" :
OpenGraphy 2012 ©
Preferred Marketing Developer
• Cette application récupèrera l'adresse email
de l'utilisateur qui s'y connecte, ses
informations de base ainsi que ses likes.
• Il existe un grand nombre de permissions
différentes :
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
• Les permissions doivent être sélectionnées
avec soin car :
– Elles doivent réellement servir l'internaute lors
de son expérience sur votre site ;
– Plus le nombre de permissions demandées est
important, moins les utilisateurs les cèderont.
• Il est tout à fait possible de demander des
permissions à des moments définis dans un
parcours utilisateur.
OpenGraphy 2012 ©
Preferred Marketing Developer
1. Création du fichier index.php ;
2. Instanciation de l'objet Facebook ;
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
OpenGraphy 2012 ©
Preferred Marketing Developer
73
Job done !

Mais conteúdo relacionado

Destaque

Story board - Visão sobre a costa
Story board - Visão sobre a costaStory board - Visão sobre a costa
Story board - Visão sobre a costaPasadinhas
 
Luminárias _ Bella 2012
Luminárias _ Bella 2012Luminárias _ Bella 2012
Luminárias _ Bella 2012LojaLumina
 
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...Come posizionare un Brand, a livello globale, anche attraverso i Social Media...
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...David Arcifa
 
Visual Studio Summit 2012 - Novidades do Windows Azure
Visual Studio Summit 2012 - Novidades do Windows AzureVisual Studio Summit 2012 - Novidades do Windows Azure
Visual Studio Summit 2012 - Novidades do Windows AzureLuciano Condé
 
Ex posicionbiologiaHistologia
Ex posicionbiologiaHistologiaEx posicionbiologiaHistologia
Ex posicionbiologiaHistologiaPriscilla Ojeda
 
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasiva
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasivaLeticia del Mar Díaz Suárez - Cirugía mínimamente invasiva
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasivaCDyTE
 
Webquest na aula de POSTIC
Webquest na aula de POSTICWebquest na aula de POSTIC
Webquest na aula de POSTICFlaviana Coimbra
 
Tp 2 computacion july
Tp 2 computacion julyTp 2 computacion july
Tp 2 computacion julyfernando
 
Presentacion lipidos y proteinas
Presentacion lipidos y proteinasPresentacion lipidos y proteinas
Presentacion lipidos y proteinasraher31
 
L'autoestima adolescent
L'autoestima adolescentL'autoestima adolescent
L'autoestima adolescentaaarizb8
 
Presentacion abby alexander2
Presentacion abby alexander2Presentacion abby alexander2
Presentacion abby alexander2abbyalexander
 
Productos
ProductosProductos
Productosmadminb
 
Premio Joven Empresari@ 2011 - Bases y Anexo
Premio Joven Empresari@ 2011 - Bases y AnexoPremio Joven Empresari@ 2011 - Bases y Anexo
Premio Joven Empresari@ 2011 - Bases y AnexoMadrid Emprende
 
homen da cavernar
homen da cavernarhomen da cavernar
homen da cavernarlivia6789
 
Nativos e inmigrantes digitales
Nativos e inmigrantes digitalesNativos e inmigrantes digitales
Nativos e inmigrantes digitalesVanessa Delgado
 

Destaque (20)

Thomazcosta2
Thomazcosta2Thomazcosta2
Thomazcosta2
 
Story board - Visão sobre a costa
Story board - Visão sobre a costaStory board - Visão sobre a costa
Story board - Visão sobre a costa
 
6° allende ed
6° allende ed6° allende ed
6° allende ed
 
Luminárias _ Bella 2012
Luminárias _ Bella 2012Luminárias _ Bella 2012
Luminárias _ Bella 2012
 
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...Come posizionare un Brand, a livello globale, anche attraverso i Social Media...
Come posizionare un Brand, a livello globale, anche attraverso i Social Media...
 
Visual Studio Summit 2012 - Novidades do Windows Azure
Visual Studio Summit 2012 - Novidades do Windows AzureVisual Studio Summit 2012 - Novidades do Windows Azure
Visual Studio Summit 2012 - Novidades do Windows Azure
 
Thomaz1
Thomaz1Thomaz1
Thomaz1
 
Ex posicionbiologiaHistologia
Ex posicionbiologiaHistologiaEx posicionbiologiaHistologia
Ex posicionbiologiaHistologia
 
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasiva
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasivaLeticia del Mar Díaz Suárez - Cirugía mínimamente invasiva
Leticia del Mar Díaz Suárez - Cirugía mínimamente invasiva
 
Webquest na aula de POSTIC
Webquest na aula de POSTICWebquest na aula de POSTIC
Webquest na aula de POSTIC
 
Tp 2 computacion july
Tp 2 computacion julyTp 2 computacion july
Tp 2 computacion july
 
Presentación Curso Community Manager
Presentación Curso Community ManagerPresentación Curso Community Manager
Presentación Curso Community Manager
 
Presentacion lipidos y proteinas
Presentacion lipidos y proteinasPresentacion lipidos y proteinas
Presentacion lipidos y proteinas
 
L'autoestima adolescent
L'autoestima adolescentL'autoestima adolescent
L'autoestima adolescent
 
Presentacion abby alexander2
Presentacion abby alexander2Presentacion abby alexander2
Presentacion abby alexander2
 
Productos
ProductosProductos
Productos
 
Premio Joven Empresari@ 2011 - Bases y Anexo
Premio Joven Empresari@ 2011 - Bases y AnexoPremio Joven Empresari@ 2011 - Bases y Anexo
Premio Joven Empresari@ 2011 - Bases y Anexo
 
homen da cavernar
homen da cavernarhomen da cavernar
homen da cavernar
 
Inglês em Vancouver
Inglês em VancouverInglês em Vancouver
Inglês em Vancouver
 
Nativos e inmigrantes digitales
Nativos e inmigrantes digitalesNativos e inmigrantes digitales
Nativos e inmigrantes digitales
 

Mais de La FeWeb

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objectsLa FeWeb
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxLa FeWeb
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolLa FeWeb
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedLa FeWeb
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICLa FeWeb
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICLa FeWeb
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikLa FeWeb
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyLa FeWeb
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLa FeWeb
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsLa FeWeb
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartLa FeWeb
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier EloyLa FeWeb
 

Mais de La FeWeb (12)

jQuery deffered objects
jQuery deffered objectsjQuery deffered objects
jQuery deffered objects
 
Introduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolboxIntroduction to sketch - the designer's toolbox
Introduction to sketch - the designer's toolbox
 
Introduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design toolIntroduction to Antetype - Web UX design tool
Introduction to Antetype - Web UX design tool
 
NoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learnedNoSQL into E-Commerce: lessons learned
NoSQL into E-Commerce: lessons learned
 
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETICNoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
NoSQL: Quoi, quand et pour qui par Orlando Cassano du CETIC
 
That's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETICThat's (g)it! par Sébastien Dawans CETIC
That's (g)it! par Sébastien Dawans CETIC
 
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder RubbikUsability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
Usability & Wireframe par Nathalie Gouzée - Co-Founder Rubbik
 
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmilyIntroduction to Emolytics par David Hachez, Co-Founder GetSmily
Introduction to Emolytics par David Hachez, Co-Founder GetSmily
 
Le community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise MatonLe community management pour les nuls par Louise Maton
Le community management pour les nuls par Louise Maton
 
RWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben PieraertsRWD - Back to Basics par Ruben Pieraerts
RWD - Back to Basics par Ruben Pieraerts
 
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric DussartTwitter Bootstrap par Antoine Guédès et Cédric Dussart
Twitter Bootstrap par Antoine Guédès et Cédric Dussart
 
Less CSS by Gauthier Eloy
Less CSS by Gauthier EloyLess CSS by Gauthier Eloy
Less CSS by Gauthier Eloy
 

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

Notas do Editor

  1. Différencier les approchessociales
  2. = inscritsàune news letter -> 16% de visibilitéFans sontanonymes, en tout cas pas moyen de les recontacter.Toutesboites, pas de segmentation.
  3. Avantages : gardersesoutils de mesures, analytics, reporting et CRMUtilisateursdeviennentconnus + leursamis.
  4. 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.
  5. 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.
  6. Facebook v1Lesnoeudssont des utilisateursLes arcs sont des relations d'amitié, on qualifietrèspeul'internaute.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. On parled'objets riches car en plus des informationsclassiques, on peut y adjoindreunevidéo (exempleyoutube) ou du son (exemplespotify)
  13. 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.
  14. Dèsquevosobjetssontpresàêtretransfomés en objets riches, vouspouvez commencer àaborder le concept
  15. Créer des tests users ! Pas de faux comptes !