Formation Open Graph Facebook, custom actions

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 suﬃsent plus

Exemple de code — premiers pas

FACEBOOK UNE MINE D’INFORMATION

Proﬁls (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 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 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_proﬁt, politician, product, public_ﬁgure, 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 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 ﬁche de ﬁlm 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 ﬁlms 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&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ériﬁer 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éﬁnir 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 notiﬁé par mail des nouveautés concernant l’ensemble de la plateforme Facebook

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 «certiﬁé».
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éﬁxe également vos objets et vos
actions

Créer son app

Conﬁguration

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
conﬁguration 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

Récupérez les balises Open Graph de vos objets
Cliquez sur “Get Code” et copiez collez le texte dans votre page.

OPEN GRAPH

Mettre en place le login
En bas de page vous devez inclure :
La balises #fb-root
Inclure le SDK JavaScript Facebook : vous accéderez à l’objet javascript FB, ses attributs, ses méthodes
Et votre script

OPEN GRAPH

Contenu de votre script JS
Seules les grandes étapes sont détaillées ici. Pour plus de détails référez vous aux fichiers disponible en ligne.
1 - FB.init() initialiser l’application Facebook
2 - Créer une fonction qui est appelée quand l’utilisateur est connecté
- Si il est connecté quand il arrive en callback de FB.getLoginStatus()
- Quand il appuie sur le bouton de connexion en callback de FB.getLogin()
3 - Dans cette fonction si l’utilisateur est connecté on récupère ses informations comme son nom, son école et
on les affiche.
4 - On crée une fonction qui est appelée qui est appelée quand l’utilisateur clique sur ”participer” à un des
cours
- Si le post fonctionne, on affiche un lien vers le post Facebook
- Sinon on affiche le message d’erreur.

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/

IL Y AURA D’AUTRES FORMATIONS !

Conception sous Axure : le 14 ou le 15 janvier (date encore à déﬁnir)

Le reste des formations Git

Encore plus d’APIs

N’hésitez pas à venir me parler / à envoyer un mail

formations@synerghetic.net

Formation Open Graph Facebook, custom actions

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Formation Open Graph Facebook, custom actions

Semelhante a Formation Open Graph Facebook, custom actions (20)

Mais de HETIC

Mais de HETIC (20)

Formation Open Graph Facebook, custom actions