Articles
Créer Une Application Facebook ! C'est Facile ...
1. Ce dont vous avez besoin
Créer une application Facebook peut être simple et rapide, mais requiert d’avoir quelques ressources à sa disposition. La première chose à savoir avant de se lancer est que Facebook n’héberge pas les applications. Pour en créer une, vous devez donc avoir accès à un serveur sur lequel vous pourrez la déposer. Ce serveur doit aussi être capable d’exécuter un des nombreux langages supportés par Facebook : PHP, ASP, Java, Perl… Passé cela, il suffit de quelques notions de développement Web pour réussir !
2. Facebook Developer Application
2. Facebook Developer Application
Avant de commencer la création d’une première application, vous devez ajouter l’application Facebook Developer (http://www.facebook.com/developers/). Elle vous fournira tous les outils pour commencerla création de vos applications. Une fois qu’elle est installée, lancez l’application Facebook Developper pour créer le profil de votre future application.
3. Remplir le formulaire de création
Cliquez sur Set up a new Application pour débuter (voir Figure 05.35) la création de l’application. Pour l’instant, tout ce que la plate-forme Facebook demande pour créer votre application, c’est son nom. Bien qu’optionnels lors de la création, certains champs sont nécessaires au fonctionnement de toute application :
- Callback URL. Cette URL devra correspondre à l’adresse de votre application, sur votre serveur.
- Canvas Page URL. Cette URL sera l’adresse Facebook de votre application. Chaque application doit utiliser une adresse unique, donc à vous de trouver un identifiant original !
- Callback URL. Cette URL devra correspondre à l’adresse de votre application, sur votre serveur.
- Canvas Page URL. Cette URL sera l’adresse Facebook de votre application. Chaque application doit utiliser une adresse unique, donc à vous de trouver un identifiant original !
4. Quelques autres options importantes
- Use FBML/Use iFrame. Choisissez Use FBML, c’est le choix le plus courant et le plus documenté.
- Application type : Website/Desktop. Ici, on développe une application destinée à être utilisée directement sur Facebook,
- Can your application be added on Facebook ? Autrement dit : Est-ce que cette application peut être utilisée sur Facebook ? Choisissez Yes afin d’être en mesure d’ajouter cette application sur votre compte, pour la tester par exemple.
Cette dernière action entraîne l’apparition de deux catégories d’options supplémentaires : Installation Options et Integration Point. Dans l’immédiat, cochez Developer Mode dans Installation Options. Ainsi, personne d’autre que son développeur – vous – ne pourra ajouter l’application pour l’instant. Puis recopiez votre Canvas Page URL dans le champ Side Nav URL de la catégorie Integration Point.
Une description détaillée (en anglais) est disponible à l’adresse : http://www.marketing-ninja.com/?p=55.
Une fois ce profil renseigné, Facebook a enregistré votre application dans sa base de données et va fournir deux précieux renseignements pour la suite des opérations : une API-Key et un Secret. Ces deux éléments seront utilisés dans le code de votre application afin de communiquer avec les services fournis par Facebook. Maintenant que l’application est en règle, il est temps de lui donner vie.
- Application type : Website/Desktop. Ici, on développe une application destinée à être utilisée directement sur Facebook,
- Can your application be added on Facebook ? Autrement dit : Est-ce que cette application peut être utilisée sur Facebook ? Choisissez Yes afin d’être en mesure d’ajouter cette application sur votre compte, pour la tester par exemple.
Cette dernière action entraîne l’apparition de deux catégories d’options supplémentaires : Installation Options et Integration Point. Dans l’immédiat, cochez Developer Mode dans Installation Options. Ainsi, personne d’autre que son développeur – vous – ne pourra ajouter l’application pour l’instant. Puis recopiez votre Canvas Page URL dans le champ Side Nav URL de la catégorie Integration Point.
Une description détaillée (en anglais) est disponible à l’adresse : http://www.marketing-ninja.com/?p=55.
Une fois ce profil renseigné, Facebook a enregistré votre application dans sa base de données et va fournir deux précieux renseignements pour la suite des opérations : une API-Key et un Secret. Ces deux éléments seront utilisés dans le code de votre application afin de communiquer avec les services fournis par Facebook. Maintenant que l’application est en règle, il est temps de lui donner vie.
5. Choisir son langage de programmation
Le développement d’une application Facebook ressemble à celui d’une application Web, allégée de toutes les fonctionnalités prises en charge par Facebook. Ici, du compte d’un utilisateur à la gestion de son réseau social, tout est pris en charge par la plate-forme.
Facebook propose ses API (Application Programming Interface) pour de nombreux langages. Vous pouvez les retrouver et les télécharger à l’adresse suivante : http://wiki.developers.facebook.com/index.php/Main_Page.
Si vous avez déjà une expérience avec le développement d’applications Web, il y a de fortes chances pour que vous retrouviez des langages connus parmi ceux proposés. Si vous débutez complètement en développement Web, PHP 5 est un bon point de départ. Gratuit, il est à la base de la plupart des guides de développement pour applications Facebook.
Facebook propose ses API (Application Programming Interface) pour de nombreux langages. Vous pouvez les retrouver et les télécharger à l’adresse suivante : http://wiki.developers.facebook.com/index.php/Main_Page.
Si vous avez déjà une expérience avec le développement d’applications Web, il y a de fortes chances pour que vous retrouviez des langages connus parmi ceux proposés. Si vous débutez complètement en développement Web, PHP 5 est un bon point de départ. Gratuit, il est à la base de la plupart des guides de développement pour applications Facebook.
6. Un exemple simple avec PHP 5
Commencez par télécharger et décompresser l’API réservée à PHP et déposez-la sur le serveur qui hébergera votre application Facebook. Puis, à la racine de votre application (c’est-à-dire votre Canvas URL), créez le fichier index.php comme suit
<?php
/*On importe l’API de facebook*/
require_once('facebook/client/facebook.php');
/*Grâce aux codes fournis lors de la création de votre
application, créez l’objet “facebook” qui donnera accès
aux fonctions de l’API*/
$facebook = new Facebook(cle_api, code_secret);
/*On demande à l’utilisateur de s’identifier auprès de notre
application. L’objet “utilisateur” contient alors l’identifiant unique
de l’utilisateur */
$utilisateur = $facebook->require_login();
/*Enfin, le cœur de notre application, dire bonjour ! On affiche “Bonjour”, suivi du nom de l’utilisateur.
?>
Bonjour <fb:name uid='<?php echo $fb_user; ?>' useyou='false' possessive='true' />
<?php
/*On importe l’API de facebook*/
require_once('facebook/client/facebook.php');
/*Grâce aux codes fournis lors de la création de votre
application, créez l’objet “facebook” qui donnera accès
aux fonctions de l’API*/
$facebook = new Facebook(cle_api, code_secret);
/*On demande à l’utilisateur de s’identifier auprès de notre
application. L’objet “utilisateur” contient alors l’identifiant unique
de l’utilisateur */
$utilisateur = $facebook->require_login();
/*Enfin, le cœur de notre application, dire bonjour ! On affiche “Bonjour”, suivi du nom de l’utilisateur.
?>
Bonjour <fb:name uid='<?php echo $fb_user; ?>' useyou='false' possessive='true' />
7. Le langage de programmation de Facebook : Facebook Markup Language
Les applications Facebook utilisent un langage sur mesure pour décrire leurs interfaces : le FBML (FaceBook Markup Language). Cette extension du HTML vous permettra d’accéder directement aux ressources clés de Facebook, comme les données sociales, tout en vous assurant que votre application s’intégrera parfaitement dans l’environnement Facebook. Voici quelques exemples d’éléments d’interface bien pensés :
- <fb:name> Déjà rencontré, permet d’afficher le nom d’un utilisateur.
- <fb:comments> Permet d’ajouter un mur de commentaires à votre application.
- <fb:visible-to-owner> Et toutes les déclinaisons Visible to friends, etc., afin de filtrer finement l’affichage de l’application.
En complément de ces éléments spécifiques à Facebook, il reste possible d’utiliser des éléments HTML pour compléter l’interface de votre application. La référence complète du FBML est disponible sur le wiki de développement Facebook :
http://wiki.developers.facebook.com/index.php/FBML
- <fb:name> Déjà rencontré, permet d’afficher le nom d’un utilisateur.
- <fb:comments> Permet d’ajouter un mur de commentaires à votre application.
- <fb:visible-to-owner> Et toutes les déclinaisons Visible to friends, etc., afin de filtrer finement l’affichage de l’application.
En complément de ces éléments spécifiques à Facebook, il reste possible d’utiliser des éléments HTML pour compléter l’interface de votre application. La référence complète du FBML est disponible sur le wiki de développement Facebook :
http://wiki.developers.facebook.com/index.php/FBML
8. Pour aller plus loin
Pour mieux appréhender les possibilités fournies par la plate-forme Facebook, la meilleure solution reste encore de consulter directement les ressources mises à disposition sur le site officiel (uniquement en anglais pour le moment) :
http://developers.facebook.com/
http://developers.facebook.com/documentation.php
http://wiki.developers.facebook.com/index.php/Main_Page
Documentation sur FQL, le langage de requêtes dédié aux applications Facebook :
http://developers.facebook.com/documentation.php?v=1.0&doc=fql
Guide de développement d’une application simple avec PHP et MySQL :
http://developers.facebook.com/step_by_step.php
Enfin, n’attendez pas que votre application soit finie pour réaliser quelques tests. Utilisez les outils fournis dans ce but :
http://developers.facebook.com/tools.php
http://developers.facebook.com/
http://developers.facebook.com/documentation.php
http://wiki.developers.facebook.com/index.php/Main_Page
Documentation sur FQL, le langage de requêtes dédié aux applications Facebook :
http://developers.facebook.com/documentation.php?v=1.0&doc=fql
Guide de développement d’une application simple avec PHP et MySQL :
http://developers.facebook.com/step_by_step.php
Enfin, n’attendez pas que votre application soit finie pour réaliser quelques tests. Utilisez les outils fournis dans ce but :
http://developers.facebook.com/tools.php
9. Finaliser son application
Une fois votre application finie (félicitations !), vous pouvez la diffuser à vos contacts. Pour cela, rendez-vous sur la page recensant toutes vos applications http://www.facebook.com/developers/apps.php et cliquez sur Edit Settings.
Sous la rubrique Installation Options, décochez Developer Mode. Il peut être intéressant de renseigner maintenant quelques autres champs :
- Post-Add URL. Lorsque quelqu’un installe votre application, il est redirigé vers cette URL. Idéalement, recopiez ici la Canvas URL de votre application afin qu’il puisse commencer à utiliser votre application.
- Application Description. Un petit texte pour décrire votre application.
- Post-Remove URL. Après qu’un utilisateur aura supprimé l’application, il sera redirigé vers cette adresse.
- Wide/Narrow. Choisissez ici la colonne dans laquelle l’application sera ajoutée par défaut. Wide (étendue) correspond à la colonne de droite, Narrow (étroite) à celle de gauche.
Enfin, dans les options de base, finalisez votre application en lui associant une icône de 16 ´ 16 pixels. Vous pouvez maintenant donner la fameuse Canvas URL à vos contacts, et elle peut commencer à se diffuser librement sur le réseau.
Sous la rubrique Installation Options, décochez Developer Mode. Il peut être intéressant de renseigner maintenant quelques autres champs :
- Post-Add URL. Lorsque quelqu’un installe votre application, il est redirigé vers cette URL. Idéalement, recopiez ici la Canvas URL de votre application afin qu’il puisse commencer à utiliser votre application.
- Application Description. Un petit texte pour décrire votre application.
- Post-Remove URL. Après qu’un utilisateur aura supprimé l’application, il sera redirigé vers cette adresse.
- Wide/Narrow. Choisissez ici la colonne dans laquelle l’application sera ajoutée par défaut. Wide (étendue) correspond à la colonne de droite, Narrow (étroite) à celle de gauche.
Enfin, dans les options de base, finalisez votre application en lui associant une icône de 16 ´ 16 pixels. Vous pouvez maintenant donner la fameuse Canvas URL à vos contacts, et elle peut commencer à se diffuser librement sur le réseau.
10. Faciliter la diffusion de son application
Pour que votre application puisse apparaître dans le moteur de recherche de Facebook, et donc augmenter ses chances de trouver de nouveaux utilisateurs, il faut l’envoyer au Product Directory de Facebook. Vous trouverez le lien à la page My Apps de votre application Developer. Pour envoyer votre application, il faut que vous ayez défini une icône et qu’elle ait déjà cinq utilisateurs. Pensez aussi à indiquer dans quelle(s) catégorie(s) votre application doit être classée. Vous pouvez la choisir via le lien Edit About Page. Facebook vous invitera alors à choisir une grande icône pour représenter votre application parmi les résultats de recherche. Après avoir été examinée, votre application devrait être incluse dans le moteur de recherche Facebook et accessible à tous.
Partagez Pour Faire Apprendre Plus De Gens !
Partagez Pour Faire Apprendre Plus De Gens !