Tutoriel: developper une application facebook en 10 etapes

[Ce tutoriel a été écrit par Julian Descottes, contributeur émérite au guide Facebook: On s'y retrouve ! Merci à toi Julian]

Comment développer un application facebook en 10 étapes?

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

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 !

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.

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.

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' />

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

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

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.

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.

Comments

[Rédigé par : Lanaya]

Good words.

[Rédigé par : John.p]

Bonjour
Vous serait-il possible de préciser comment envoyer des invitations à l'usage de son application à ses contacts facebook? c'est une étape qui reste encore assez obscure dans el développement d emon application...
Merci :)

[Rédigé par : Thierno]

Bonjour ! Pouvez vs etre plus detaillé sur l' API! Merci

[Rédigé par : made]

perso facebook, je ne suis pas trop pour, vu le non respect de la vie privée qu'il propose

[Rédigé par : claire]

Bonjour,

J'ai suivi à la lettre votre tuto (très bien fait d'ailleurs) mais lorsque j'insère dans le fichier index.php (à la racine de mon appli) le code source que vous proposer (avec bien évidemment les codes API et Secret mis à jour), rien ne s'affiche sur mon application (à l'url)!

Cela est-il normal? Il y a t-il d'autres manipulations à effectuer?

[Rédigé par : chermou]

ça marche nickel avec moi merci pour cet interessant topic :)

[Rédigé par : Sun Location]

Super ce tuto, merci, !! :)

[Rédigé par : thierry]

Bonsoir et merci poour ce tuto.
Je cherche désespérément quelqu'un pouvant expliquer de façon claire comment faire une application FB et je crois avoir trouvé.
Cependant, étant une vraie "bille " en informatique (mais motivé pour comprendre) je bloque sur la partie concernant la phase 6. Elle est où, la racine???
En fait, je cherche à faire une appli façon "ouija", qui balancent des citations marrantes.

Si tu pouvais m'expliquer plus en détail ce que je dois faire pour y arriver, je t'en serais très reconnaissant.

Merci d'avance et bonne soirée.

[Rédigé par : Sh]

Bonjour, j'aimerais savoir si il faut payer quelque chose et si quelqu'un peut m'aider..

[Rédigé par : A-Games]

Salut tout le monde, je viens actuellement de terminer mon appli facebook en silverlight-php. Si ça intéresse des gens allez voir :
http://apps.facebook.com/a-games-balls

[Rédigé par : yasoft]

super tuto mais j'ai tjrs pas résolu un pti problème
j'ai decouvert leur console de test d'api c'est génial mais comment je fais pour récup comme dans la console???
voisi le code
$facebook->api_client->friends_get('','');
ca renvoi un array , je fais le nécéssaire mais $facebook reste désespérement vide :'(

[Rédigé par : louise]

salut tt le monde
est ce que qqn saurait aller voir les historiques de conversations de son profil facebook
merci !

[Rédigé par : Caro jean-yves]

Quand j'aurai un ordi. Je pourrai suivre et réussir . Mon modeste portable ne fait pas j'affaire. Merci

[Rédigé par : Sebastien]

Je cherche qq un pour developper une application pour fb et pour iphone... C est pour une entreprise - remuneration possible et motivante.

[Rédigé par : Khamar]

Bonjour,

Je développe des applications facebook.

Voici mon adresse mail pour de plus amples informations :

a.khamar@laposte.net

Cordialement,
Mr Khamar

[Rédigé par : Catherine Laplace-Builhe]

Hello !
J'ai créé 3 groupes sur Facebook en rapport avec l'Aérospatiale et l'Astronomie...je souhaite créer une app en rapport avec un des groupes..J'ai déja préparé les icones sur photoshop et je pense trouver un hébergeur cette semaine ..J'ai besoin d'un sérieux coup de mains car je ne connais rien au langage php, java et compagnie...
Même avec le programme en 10 leçons c'est du chinois !
Si vous pensez povoir m'aider à un prix défiant toute concurrence, envoyez moi un mail à catlaplace.builhe@gmail.com
Merci

[Rédigé par : Stremon]

Merci, ce tuto m'a bien aidé à développer ma 1ère application que je vous laisse découvrir ici : http://www.facebook.com/apps/application.php?id=229580487277

[Rédigé par : Julien]

Bonjour,

J'essaye de faire une application qui permet de classer par ordre décroissant les membres facebook qui ont l plus d'amis en commun avec moi, mais je n'y arrive pas. Quelqu'un sait-il comment faire?

Merci

[Rédigé par : Phil lund]

Bonjour,

Je suis sur un serveur Cold Fusion, peut-on me dire si je peux créer mon application

[Rédigé par : florent]

Bonjour,

je développe actuellement une application. Elle est opérationnelle mais je voudrais l'ajouter dans un onglet d'une page fan facebook.

Pour résumer je voudrais intégrer mon appli comme dans l'exemple suivant : http://www.facebook.com/iPadGiveaway

Malheureusement je n'y arrive pas. pour le développement, j'utilise l'API php de facebook

Merci de votre aide

[Rédigé par : Lottie]

Bonjour,

J'ai exactement la même question que Florent : comment faire en sorte qu'une application Facebook prenne en charge l'ajout de l'appli en onglet sur une page fans Facebook ?

Merci.

[Rédigé par : Lottie]

J'ai trouvé la solution à ma propre question. Dans les paramètres de l'application, dans la partie Profils, il suffit de préciser une URL dans "URL de l'onglet". Ca peut être la même page que la page de l'application elle-même (index.php).
Bien sûr dans Authentification, il faut aussi avoir coché "Pages Facebook" dans l'option "Qui peut installer cette application ?".

[Rédigé par : nike shoes]

Votre écriture est très élégant, très vivante et animée, j'ai vraiment comme vous, vous souhaite de continuer à écrire des articles de meilleure qualité, je vais souvent essayer de préoccupation, oh!

[Rédigé par : Ju]

Y a plus qu'à !

[Rédigé par : Diane de la Dev'zone]

Bonjour à tous!

Pour les personnes souhaitant développer des applications communicantes, la SFR Developer Zone (devzone.ateliersfr.fr)
met à votre disposition ses APIs SMS, MMS, Geoloc, Carnet d'adresses etc. L'offre découverte est gratuite.

En illustration vous pouvez aller voir Instant Wall une appli Facebook qui utilise l'API SMS: elle vous envoie par texto les actus de vos amis (sélectionnés).

http://apps.facebook.com/sfrinstantwall/

Le code sera bientôt disponible.

Diane de la Dev'Zone
contactred.red@gmail.com
Twitter: sfrdevzone
Facebook:SFR Dev'Zone