Appli FacebookCréez une application intégrée à facebook…

Sommaire•Création de l’application dans facebook•Langages pour facebook (PHP, FBML,

FQL)•Includes (img, script, css)•Envoi de mail/notification•Statistiques•Consoles de test•Liens

Intro•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.▫Application codée en PHP▫Pages imbriquées dans l’interface de facebook,

appelées canevas

•Première étape : créer l’application dans facebook

Activer le mode développeur•Pour la première application :

▫http://www.facebook.com/developers/

Création de l’application• http://www.facebook.com/developers/ ->

Champs indispensables• Configuration -> Onglet :

• Canvas Page URL : correspond a l’url permettant aux utilisateurs d’accéder à l’application.

• 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.

Récapitulatif des applis

• Cette page permet de gérer toutes les applications qui ont été créées.

Langages pour facebook

• PHP : Code classique pour générer le code HTML + classes spécifiques pour accéder à l’API facebook

• FBML : Balises type HTML pour la mise en page• FQL : Requêtes type SQL pour accéder aux tables

mises à disposition par facebook

• Non traités dans ce document :▫XFBML▫FBJS

PHP•Code PHP classique dans lequel on peut

appeler des fonctions propres à facebook afin d’accéder à des données sur les utilisateurs

•Deux dossiers à placer dans le site (par ex : dans /include/) :▫php▫footprints

•Un fichier à inclure dans le code PHP :▫require_once('include/php/facebook.php');

PHP•Créer l’objet facebook permettant

d’accéder aux fonction de l’API•Pré requis :

▫Clé API▫Clé secrète

Fournis sur la page de l’application : http://www.facebook.com/developers/apps.php

PHP

• Création de l’objet :▫$facebook = new Facebook($cleAPI,$cleSecrete);

• Cet objet facebook est nécessaire sur toutes les pages où l’on souhaite accéder à des données du site

• Utilisation de $facebook, exemple :▫$fb_user = $facebook->require_login();

(force l’utilisateur à être loggé pour accéder à la page, et renvoi son id)

FBML•Balises de type HTML interprétées par

facebook afin d’afficher des éléments de design sur facebook. Exemples :▫<fb:name uid="$tagger" />

Affiche le prénom et le nom de l’utilisateur possedant l’id, dans un lien redirigeant vers son profil personnel

▫Onglets intégrés au design :▫ <fb:tabs>

<fb:tab-item href="myphotos.php" title="My Photos" selected="true"/> <fb:tab-item href="recentalbums.php" title="Recent Albums" />

▫ </fb:tabs>

FBML•Catégories de tag FBML fournis par

facebook pour le design de l’application :

User/Groups Platform Internationalization

Message Attachments Page Navigation

Profile-specific Tools Status Messages Notifications and Requests

Visibility on Profile Misc Editor Display Dialog

Embedded Media Forms Additional Permissions Wall

FQL•Langage de requêtes sur les tables de

facebook

•Principales différences avec MySQL :▫« SELECT * » interdit -> lister tous les

champs▫Pas de jointure, toujours une seule table

dans le FROM (utiliser IN)▫Pas de : JOIN, ORDER BY, GROUP BY,

LIMIT

FQL•Tables accessibles :

album friend_request note standard_user_info

comment friendlist page status

cookies friendlist_member page_admin stream

connection group page_fan stream_filter

event group_member permissions user

event_member link photo

friend metrics photo_tag

FQL•Champs accessibles pour l’utilisateur (table user)

uid ID de l’user

first_name Prénomlast_name Nom de famillename Nom complet

pic_small URL de l’image du profil (50x150 max)

pic_square URL de l’image du profil (50x50 max)

pic URL de l’image du profil (100x300 max)

affiliations Les réseaux de l’userprofile_update_time

Temps écoulé depuis la dernière mise à jour du profil (0 si >3 jours)

timezone Timezone de l’userreligion Religion de l’userbirthday Anniversaire (format affichage)birthday_date Anniversaire (format machine)

sex Sexehometown_location

Lieu de naissance (tableau [ville, région, pays])

meeting_sex Sexe recherché pour des rencontres

meeting_for Raison de la recherche de rencontres

relationship_status

Situation familiale

significant_other_id

ID du partenaire

political Tendances politiquescurrent_location

Lieu d’habitation actuel (tableau [ville, région, pays])

activities Activitésinterests Centres d’intérêtis_app_user Indique si l’utilisateur utilise

actuellement l’application

music Goûts musicaux

tv Séries et émissions favoritesmovies Films favorisbooks Livres favoris

quotes Citations favorites

hs_info Lycées fréquentéseducation_history

Établissement d'enseignement supérieur fréquentés

work_history Historique des emploisnotes_count Nombre de notes écrites par l’userwall_count Nombre de post sur le murstatus Status courantonline_presence

En ligne, Absent, Hors ligne, ou Erreur

FQL•Champs accessibles pour l’utilisateur (table user)

locale Pays duquel l’utilisateur accède à l’appli

proxied_email

Email crypté accessible que par l’appli

profile_url URL du profilemail_hashes

Série d’emails crypté en crc32 et md5

pic_small_with_logo

Idem pic_small avec logo facebook

pic_big_with_logo

Image du profil (200x600px max) avec logo facebook

pic_square_with_logo

Idem pic_square avec logo facebook

allowed_restrictions

Types de restrictions appliqués a l’utilisateur (ex : alcool)

verified Indique si Facebook a vérifié l’utilisateur

profile_blurb Brève description affichée sous l’image du profil

FQL

•Exemple d’éxécution d’une requête FQL avec PHP

$uid = $facebook->require_login();$req = "SELECT first_name FROM user WHERE uid=$uid";$res = $facebook->api_client->fql_query($req);$user_name = $res[0]["first_name"];

Accès aux données• Lors de la première visite de l’utilisateur sur

l’application facebook, cette fenêtre apparait :

• 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

Includes•Insertion d’images :

▫Chemin relatif interdit : mettre le chemin complet sur l’adresse du serveur <img src="http://172.22.224.222/sondages/img/site/bar.png"

/>

•Insertion de script :▫Chemin complet également :

<script src="http://foo.com/bar.js"></script>▫ Versionning nécessaire à cause de la mise en cache

automatique (voir slide suivant)

Includes•Insertion de Feuille de style CSS :

▫ Peut être fait avec un link html : <link rel="stylesheet" type="text/css" media="screen"

href="http://yourapp.com/stylesheets/style.css?v=1.0" /> Cette solution nécessite de changer la version à chaque changement

à cause de la mise en cache. Peut être fait automatiquement avec : $ts = filemtime("bar.js"); print "<script src=\"http://foo.com/bar.js?ts=$ts\"></script>";

▫ Sinon, inclure avec PHP : echo "<style>"; echo htmlentities(file_get_contents('style/facebook.css', true)); echo "</style>";

• (http://wiki.developers.facebook.com/index.php/Include_files)

Envoi de mail

•Il est impossible d’obtenir l’adresse email de l’utilisateur

•Il est cependant possible d’envoyer un mail à l’utilisateur via l’application.

Envoi de mail$head = "Entête du mail";$bodytext = "Corps simple utilisé si les balises ne fonctionnent pas";$bodyfbml = "<b>Corps</b> utilisant les balises HTML et/ou FBML";$result = $facebook->api_client->notifications_sendEmail($fb_uid,$head,$bodytext,

$bodyfbml);echo "Email envoyé";

• $fb_uid est l’id de l’utilisateur ou un liste d’id séparé par des virgules• 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.

Envoi de notifications•Les notifications sont des petits messages

qui peuvent être envoyés à n’importe quel utilisateur sans qu’il ai nécessairement ajouté et autorisé l’application.

•Elles apparaissent en bas à droite de l’écran de l’utilisateur et dans sa page de notifications

Envoi de notifications

•Les notifications peuvent être envoyé à n’importe quel utilisateur de facebook, les envois effectués par l’application sont donc contrôlés par le spam control de facebook, dont le calcul est décrit ici : ▫ http://www.facebook.com/topic.php?

uid=2205007948&topic=13262&start=30&hash=0ce1d00dde55ae7fc1d6f206621bdfc4#post71908

Envoi de notifications

•Méthode :

▫ $text = "L’application X vous envoie une <b>invitation</b>";▫ $type = "app_to_user";▫ $result = $facebook->api_client->notifications_send($fb_uid,

$text,$type);

Mails / Notifications

•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 :▫Admin.getAllocation

Propagation de l’application•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

• Code FBML sur le slide suivant

Propagation de l’application<fb:request-form

action="index.php" method="POST" invite="true" type="YOUR APP NAME" content="Your text goes here.

<?php echo htmlentities("<fb:req-choice url=\"YOUR CANVAS URL\" label=\"Authorize My Application\"") ?>" >

<fb:multi-friend-selector showborder="false" actiontext="Invite your friends to use YOUR APP

NAME."> </fb:request-form>

Statistiques

•Facebook fournit des statistiques de fréquentation, de performance et d’interaction avec les utilisateur pour chaque application.

Statistiques•Statistiques fournies par facebook

▫Exemple de graphique (Pages visionnées)

Statistiques proposéesUtilisationUtilisateurs actifs (engagement)

Utilisateurs actifs (API)

Nombre de pages vues de canevas

Format de page unique

Temps moyen pour une requête HTTP pour les pages de canevas (ms)Temps d’affichage moyen des pages FBML de démo (ms)Blocage / Déblocage unique

Appels API / Appels API uniques

FonctionnalitésPage Canevas : Voir / Erreur

Email : EnvoyéRapport : Rapport d’abus de confidentialitéAutoriser l’application à envoyer des emails : S’abonner / Se désinscrireRequête Traité : Accepter / Ignorer / BloquerDialogue libre (ami) : Ignorer / ConfirmerSignets : Ajouter / Supprimer

Onglets : Ajouter / Supprimer

Autres statistiques•Liste des requêtes HTTP :

• Attributions basées sur l'interaction avec les utilisateurs :

Autres statistiques•Réactions des utilisateurs

Consoles de test

•Facebook fournit deux consoles permettant de tester les fonctions de l’API ou les balises FBML.

Consoles•Console de test

d’API

Consoles•Console de test

FBML

Liens• Librairie client facebook :

▫ http://svn.facebook.com/svnroot/platform/clients/packages/facebook-platform.tar.gz • Récapitulatif des applications :

▫ http://www.facebook.com/developers/apps.php • Wiki Documentation :

▫ http://wiki.developers.facebook.com/index.php/Main_Page • Tables FQL :

▫ http://wiki.developers.facebook.com/index.php/FQL_Tables • Descriptions données statistiques :

▫ http://wiki.developers.facebook.com/index.php/Application_Metrics_-_Feature_Events • Console de test :

▫ http://developers.facebook.com/tools.php

• Description de l’anatomie d’une application :▫ http://developers.facebook.com/get_started.php?tab=anatomy

• Principes de base▫ http://developers.facebook.com/get_started.php?tab=principles

• Librairie .NET :▫ http://facebook.codeplex.com/