SlideShare une entreprise Scribd logo
1  sur  38
Télécharger pour lire hors ligne
Appli Facebook,[object Object],Créez une application intégrée à facebook…,[object Object]
Sommaire,[object Object],Création de l’application dans facebook,[object Object],Langages pour facebook (PHP, FBML, FQL),[object Object],Includes (img, script, css),[object Object],Envoi de mail/notification,[object Object],Statistiques,[object Object],Consoles de test,[object Object],Liens,[object Object]
Intro,[object Object],Objectif : créer une application intégrée au site de facebook, accessible depuis le catalogue par les utilisateurs identifiés et accédant à leur profil.,[object Object],Application codée en PHP,[object Object],Pages imbriquées dans l’interface de facebook, appelées canevas,[object Object],Première étape : créer l’application dans facebook,[object Object]
Activer le mode développeur,[object Object],Pour la première application :,[object Object],http://www.facebook.com/developers/,[object Object]
Création de l’application,[object Object],http://www.facebook.com/developers/ -> ,[object Object]
Champs indispensables,[object Object],Configuration -> Onglet : ,[object Object],[object Object]
Canvas Callback URL : adresse du serveur où sont placés les fichier PHP (ex : http://212.157.202.137/facebook/). Important : Terminer par un slash « / », sinon on aura http://212.157.202.137/facebookindex.php par exemple.,[object Object],[object Object]
PHP,[object Object],Code PHP classique dans lequel on peut appeler des fonctions propres à facebook afin d’accéder à des données sur les utilisateurs ,[object Object],Deux dossiers à placer dans le site (par ex : dans /include/) :,[object Object],php,[object Object],footprints,[object Object],Un fichier à inclure dans le code PHP :,[object Object],require_once('include/php/facebook.php');,[object Object]
PHP,[object Object],Créer l’objet facebook permettant d’accéder aux fonction de l’API,[object Object],Pré requis :,[object Object],Clé API,[object Object],Clé secrète,[object Object],Fournis sur la page de l’application :  http://www.facebook.com/developers/apps.php,[object Object]
PHP,[object Object],Création de l’objet :,[object Object],$facebook = new Facebook($cleAPI,$cleSecrete);,[object Object],Cet objet facebook est nécessaire sur toutes les pages où l’on souhaite accéder à des données du site,[object Object],Utilisation de $facebook, exemple :,[object Object],$fb_user = $facebook->require_login();,[object Object],(force l’utilisateur à être loggé pour accéder à la page, et renvoi son id),[object Object]
FBML,[object Object],Balises de type HTML interprétées par facebook afin d’afficher des éléments de design sur facebook. Exemples :,[object Object],<fb:nameuid="$tagger" />,[object Object],Affiche le prénom et le nom de l’utilisateurpossedantl’id, dans un lien redirigeantvers son profil personnel,[object Object],Ongletsintégrés au design :,[object Object],<fb:tabs>,[object Object],<fb:tab-itemhref="myphotos.php" title="My Photos" selected="true"/>,[object Object],<fb:tab-itemhref="recentalbums.php" title="Recent Albums" />,[object Object],</fb:tabs>,[object Object]
FBML,[object Object],Catégories de tag FBML fournis par facebook pour le design de l’application :,[object Object]
FQL,[object Object],Langage de requêtes sur les tables de facebook,[object Object],Principales différences avec MySQL :,[object Object],« SELECT * » interdit -> lister tous les champs,[object Object],Pas de jointure, toujours une seule table dans le FROM (utiliser IN),[object Object],Pas de : JOIN, ORDER BY, GROUP BY, LIMIT,[object Object]
FQL,[object Object],Tables accessibles :,[object Object]
FQL,[object Object],Champs accessibles pour l’utilisateur (table user),[object Object]
FQL,[object Object],Champs accessibles pour l’utilisateur (table user),[object Object]
FQL,[object Object],Exemple d’éxécution d’une requête FQL avec PHP,[object Object],$uid = $facebook->require_login();,[object Object],$req = "SELECT first_nameFROM user WHERE uid=$uid";,[object Object],$res = $facebook->api_client->fql_query($req);,[object Object],$user_name = $res[0]["first_name"];,[object Object]
Accès aux données,[object Object],Lors de la première visite de l’utilisateur sur l’application facebook, cette fenêtre apparait :,[object Object],C’est seulement après avoir cliqué sur « Autoriser » que l’on pourra accéder aux données par les méthodes décrites précédemment,[object Object]
Includes,[object Object],Insertion d’images :,[object Object],Chemin relatif interdit : mettre le chemin complet sur l’adresse du serveur,[object Object],<imgsrc="http://172.22.224.222/sondages/img/site/bar.png" />,[object Object],Insertion de script :,[object Object],Chemin complet également :,[object Object],<script src="http://foo.com/bar.js"></script>,[object Object],Versionning nécessaire à cause de la mise en cache automatique (voir slide suivant),[object Object]
Includes,[object Object],Insertion de Feuille de style CSS :,[object Object],Peut être fait avec un link html :,[object Object],<link rel="stylesheet" type="text/css" media="screen" href="http://yourapp.com/stylesheets/style.css?v=1.0" /> ,[object Object],Cette solution nécessite de changer la version à chaquechangement à cause de la mise en cache. Peutêtre fait automatiquement avec :,[object Object],$ts = filemtime("bar.js"); ,[object Object],print "<script src=quot;http://foo.com/bar.js?ts=$tsquot;></script>"; ,[object Object],Sinon, inclure avec PHP :,[object Object],echo "<style>";,[object Object],echohtmlentities(file_get_contents('style/facebook.css', true));,[object Object],echo "</style>";,[object Object],(http://wiki.developers.facebook.com/index.php/Include_files) ,[object Object]
Envoi de mail,[object Object],Il est impossible d’obtenir l’adresse email de l’utilisateur,[object Object],Il est cependant possible d’envoyer un mail à l’utilisateur via l’application.,[object Object]
Envoi de mail,[object Object],$head = "Entête du mail";,[object Object],$bodytext = "Corps simple utilisé si les balises ne fonctionnent pas";,[object Object],$bodyfbml = "<b>Corps</b> utilisant les balises HTML et/ou FBML";,[object Object],$result = $facebook->api_client->notifications_sendEmail($fb_uid,$head,$bodytext,$bodyfbml);,[object Object],echo "Email envoyé";,[object Object],[object Object]
Il faut que l’utilisateur ai autorisé l’application et l’envoi de mail par l’application pour recevoir les emails envoyés par cette méthode
On peut lui permettre facilement d’accepter l’envoi de mail grace à :
<fb:prompt-permission perms='email'>Accepter</fb:prompt-permission>
En cliquant sur le lien généré par cette balise, une pop-up permet à l’utilisateur d’accepter ou de refuser l’envoi de mail par l’application, une fois cette action effectué, le lien n’apparaitra plus.,[object Object],[object Object]
Envoi de notifications,[object Object],Méthode :,[object Object],$text = "L’application X vous envoie une <b>invitation</b>";,[object Object],$type = "app_to_user";,[object Object],$result = $facebook->api_client->notifications_send($fb_uid,$text,$type);,[object Object]
Mails / Notifications,[object Object],Le nombre d’envoi de mails et de notifications par jour par application est limité. Il est possible de connaitre ces limites grâce à la méthode de l’API :,[object Object],Admin.getAllocation,[object Object]
Propagation de l’application,[object Object],Il est très simple d’insérer l’interface d’invitation à une invitation. Avec 2 balises FBML, on affiche la liste des amis de l’utilisateur dans laquelle il peut sélectionner ceux avec qui il souhaite partager l’application, puis envoyer automatiquement l’invitation,[object Object], Code FBML sur le slide suivant,[object Object]
Propagation de l’application,[object Object],<fb:request-form,[object Object],action="index.php" ,[object Object],method="POST" ,[object Object],invite="true" ,[object Object],type="YOUR APP NAME" ,[object Object],content="Yourtextgoeshere. ,[object Object],<?phpechohtmlentities("<fb:req-choice url=quot;YOUR CANVAS URLquot; label=quot;AuthorizeMy Applicationquot;")?>" >,[object Object],<fb:multi-friend-selector,[object Object],showborder="false" ,[object Object],actiontext="Invite yourfriends to use YOUR APP NAME."> </fb:request-form> ,[object Object]
Statistiques,[object Object],Facebook fournit des statistiques de fréquentation, de performance et d’interaction avec les utilisateur pour chaque application.,[object Object]
Statistiques,[object Object],Statistiques fournies par facebook,[object Object],Exemple de graphique (Pages visionnées),[object Object]
Statistiques proposées,[object Object]
Autres statistiques,[object Object],Liste des requêtes HTTP :,[object Object],Attributions basées sur l'interaction avec les utilisateurs :,[object Object]
Autres statistiques,[object Object],Réactions des utilisateurs,[object Object]
Consoles de test,[object Object],Facebook fournit deux consoles permettant de tester les fonctions de l’API ou les balises FBML.,[object Object]
Consoles,[object Object],Console de test d’API,[object Object]
Consoles,[object Object],Console de test FBML,[object Object]

Contenu connexe

Tendances

Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...
Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...
Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...GeniusContacts
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaMahdi Ben Alaya
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces webDavid Desrousseaux
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...MOHAMMED MOURADI
 
26 avril 2011 - Facebook Developer Garage Paris by 909c
26 avril 2011 - Facebook Developer Garage Paris by 909c26 avril 2011 - Facebook Developer Garage Paris by 909c
26 avril 2011 - Facebook Developer Garage Paris by 909cWNP 909
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPressIZZA Samir
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPressChi Nacim
 

Tendances (8)

Tutorial android
Tutorial androidTutorial android
Tutorial android
 
Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...
Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...
Comment intégrer un formulaire de contact dans WordPress avec le plugin offic...
 
PHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben AlayaPHP (Partie I) Par Mahdi Ben Alaya
PHP (Partie I) Par Mahdi Ben Alaya
 
Développement d'interfaces web
Développement d'interfaces webDéveloppement d'interfaces web
Développement d'interfaces web
 
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
Rapport application web (Spring BOOT,angular4) et mobile(ionc3) gestion des a...
 
26 avril 2011 - Facebook Developer Garage Paris by 909c
26 avril 2011 - Facebook Developer Garage Paris by 909c26 avril 2011 - Facebook Developer Garage Paris by 909c
26 avril 2011 - Facebook Developer Garage Paris by 909c
 
Dévelopement extensions WordPress
Dévelopement extensions WordPressDévelopement extensions WordPress
Dévelopement extensions WordPress
 
Développement d’extensions WordPress
Développement d’extensions WordPressDéveloppement d’extensions WordPress
Développement d’extensions WordPress
 

En vedette

Baleines en danger
Baleines en dangerBaleines en danger
Baleines en dangerourbothy
 
Scrum aux frontières de la psychologie sociale scrum day 2012 slide share
Scrum aux frontières de la psychologie sociale scrum day 2012 slide shareScrum aux frontières de la psychologie sociale scrum day 2012 slide share
Scrum aux frontières de la psychologie sociale scrum day 2012 slide shareThierry Montulé
 
EDOMA Présentation 2009
EDOMA Présentation 2009EDOMA Présentation 2009
EDOMA Présentation 2009huntziger
 
Propuesta de intervencion
Propuesta de intervencionPropuesta de intervencion
Propuesta de intervencionDEXY ROJAS
 
2 bimestre
2 bimestre2 bimestre
2 bimestremtavo159
 
Orchidees_du_vietnam
Orchidees_du_vietnamOrchidees_du_vietnam
Orchidees_du_vietnamourbothy
 
3 niveles de ataque del diablo...
3 niveles de ataque del diablo...3 niveles de ataque del diablo...
3 niveles de ataque del diablo...liubingquintero
 
Carrera de comunicacion social
Carrera de comunicacion socialCarrera de comunicacion social
Carrera de comunicacion socialJohifers
 
Rapport d'activités ATD13 2011
Rapport d'activités ATD13 2011Rapport d'activités ATD13 2011
Rapport d'activités ATD13 2011ATD13
 
Presentacion del 4to Grado de Primaria
Presentacion del 4to Grado de Primaria Presentacion del 4to Grado de Primaria
Presentacion del 4to Grado de Primaria promo2020
 
Cuadernillo de repaso para el verano, sexto.
Cuadernillo de repaso para el verano, sexto.Cuadernillo de repaso para el verano, sexto.
Cuadernillo de repaso para el verano, sexto.chema
 
La vie a_2
La vie a_2La vie a_2
La vie a_2ourbothy
 

En vedette (20)

Baleines en danger
Baleines en dangerBaleines en danger
Baleines en danger
 
Scrum aux frontières de la psychologie sociale scrum day 2012 slide share
Scrum aux frontières de la psychologie sociale scrum day 2012 slide shareScrum aux frontières de la psychologie sociale scrum day 2012 slide share
Scrum aux frontières de la psychologie sociale scrum day 2012 slide share
 
Abraham
AbrahamAbraham
Abraham
 
EDOMA Présentation 2009
EDOMA Présentation 2009EDOMA Présentation 2009
EDOMA Présentation 2009
 
Colegio los pinos
Colegio los pinosColegio los pinos
Colegio los pinos
 
Propuesta de intervencion
Propuesta de intervencionPropuesta de intervencion
Propuesta de intervencion
 
Ginnacio
GinnacioGinnacio
Ginnacio
 
Abraham
AbrahamAbraham
Abraham
 
2 bimestre
2 bimestre2 bimestre
2 bimestre
 
Orchidees_du_vietnam
Orchidees_du_vietnamOrchidees_du_vietnam
Orchidees_du_vietnam
 
3 niveles de ataque del diablo...
3 niveles de ataque del diablo...3 niveles de ataque del diablo...
3 niveles de ataque del diablo...
 
Info sacu
Info sacuInfo sacu
Info sacu
 
Biodiversidad
BiodiversidadBiodiversidad
Biodiversidad
 
Portafolio
PortafolioPortafolio
Portafolio
 
Carrera de comunicacion social
Carrera de comunicacion socialCarrera de comunicacion social
Carrera de comunicacion social
 
Rapport d'activités ATD13 2011
Rapport d'activités ATD13 2011Rapport d'activités ATD13 2011
Rapport d'activités ATD13 2011
 
Colegio los pinos
Colegio los pinosColegio los pinos
Colegio los pinos
 
Presentacion del 4to Grado de Primaria
Presentacion del 4to Grado de Primaria Presentacion del 4to Grado de Primaria
Presentacion del 4to Grado de Primaria
 
Cuadernillo de repaso para el verano, sexto.
Cuadernillo de repaso para el verano, sexto.Cuadernillo de repaso para el verano, sexto.
Cuadernillo de repaso para el verano, sexto.
 
La vie a_2
La vie a_2La vie a_2
La vie a_2
 

Similaire à Intro appli facebook_v1.1

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressIZZA Samir
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel phpKhadim Mbacké
 
C2i Web
C2i WebC2i Web
C2i Webc2i
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Mickael Perraud
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5chaudavid
 
PHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaPHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaMahdi Ben Alaya
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSYannick Pavard
 
Remarketing Facebook avancé avec Google Tag Manager sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager  sur WordpressRemarketing Facebook avancé avec Google Tag Manager  sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager sur WordpressBruno Guyot
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaverdavidbx
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Netvibes
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentationjulien pauli
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdfHeartKing10
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesConFoo
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressYannick Pavard
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptxlaabid1
 

Similaire à Intro appli facebook_v1.1 (20)

Atelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPressAtelier WordPress: Création d&rsquo;extension WordPress
Atelier WordPress: Création d&rsquo;extension WordPress
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Mini projet individuel php
Mini projet individuel phpMini projet individuel php
Mini projet individuel php
 
C2i Web
C2i WebC2i Web
C2i Web
 
Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?Quoi de neuf dans Zend Framework 1.10 ?
Quoi de neuf dans Zend Framework 1.10 ?
 
Jump Camp - HTML5
Jump Camp - HTML5Jump Camp - HTML5
Jump Camp - HTML5
 
PHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben AlayaPHP (Partie II) Par Mahdi Ben Alaya
PHP (Partie II) Par Mahdi Ben Alaya
 
RMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMSRMLL 2011 - L'accessibilité Web des CMS
RMLL 2011 - L'accessibilité Web des CMS
 
Remarketing Facebook avancé avec Google Tag Manager sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager  sur WordpressRemarketing Facebook avancé avec Google Tag Manager  sur Wordpress
Remarketing Facebook avancé avec Google Tag Manager sur Wordpress
 
Conception Web Avec Dreamweaver
Conception Web Avec DreamweaverConception Web Avec Dreamweaver
Conception Web Avec Dreamweaver
 
Cours Php
Cours PhpCours Php
Cours Php
 
Cours Php
Cours PhpCours Php
Cours Php
 
test
testtest
test
 
JsPhDDefense
JsPhDDefenseJsPhDDefense
JsPhDDefense
 
Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007Atelier autour de UWA à ParisWeb 2007
Atelier autour de UWA à ParisWeb 2007
 
ZendFramework2 - Présentation
ZendFramework2 - PrésentationZendFramework2 - Présentation
ZendFramework2 - Présentation
 
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
laravel.sillo.org-Cours Laravel 10  les bases  la validation.pdflaravel.sillo.org-Cours Laravel 10  les bases  la validation.pdf
laravel.sillo.org-Cours Laravel 10 les bases la validation.pdf
 
Rendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapesRendre son CMS conforme au SGQRI 008 en 20 étapes
Rendre son CMS conforme au SGQRI 008 en 20 étapes
 
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et WordpressL'accessibilité en 20 étapes pour TYPO3 et Wordpress
L'accessibilité en 20 étapes pour TYPO3 et Wordpress
 
1-Introduction JQuery.pptx
1-Introduction JQuery.pptx1-Introduction JQuery.pptx
1-Introduction JQuery.pptx
 

Intro appli facebook_v1.1