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 : JE-GALERE]

Très bon tutoriel ! Simple et efficace ^^

[Rédigé par : aos]

Voici mon site qui pourrait intéresser ceux qui ont lu cette articles ;)
Tutorial Facebook (thèmes, fond d'écran, music, astuces...) http://anofsh.e-monsite.com/

[Rédigé par : abysse]

Vous pouvez apprendre en profondeur grâce à ce lien http://www.abysse-tech.com/?p=584

Tout est la !! Valable pour débutants et développeurs

Cordialement

[Rédigé par : evann]

doyos éseque tu a oui ou non

[Rédigé par : Romain]

Hello,

je viens de découvrir une nouvelle appli géniale pour partager sur mon mur mes photos. BannerZest Fun Pics. J'ai pu poster mes photos, les animer et c'est gratuit. Juste génial

[Rédigé par : zak]

j'arrive pas à telecharger le PHP5 client library...pouvez vous m'aider ?

[Rédigé par : Fuerty]

Bonjour,

développeur web disponible pour nimporte quel projet d'application.

contact : j.fuertes@hotmail.fr

Bonne journée

[Rédigé par : Olivier]

vas faire ta pub ailleurs Diane !

[Rédigé par : JBrey33]

Bonjour,
moi pour créer une application FB me demande mon num de portable pour m'envoyer un code d'identification... Le problème c'est que je ne reçois jamais ce code!!!
Quelqu'un a eu ce problème ?

[Rédigé par : lk]

il y a des gens qui disent vraiment n'importe quoi!

[Rédigé par : gerald]

Salut,

J’essaye d’utiliser l’api facebook.
Je ne reçoit toujours pas mon code d’identification sur mon n° de portable.
Pourtant j’ai rentré mon le bon n° de Portable.
J’ai testé en enlevant le premier zero du N°, mais rien a faire, je ne reçois toujours pas ce fameux code.
J’ai fait la manip proposée en cas de non réception du code, toujours idem.

Si quelqu’un a une idée ???

Merci d’avance !

[Rédigé par : gerald]

Salut,

J’essaye d’utiliser l’api facebook.
Je ne reçoit toujours pas mon code d’identification sur mon n° de portable.
Pourtant j’ai rentré mon le bon n° de Portable.
J’ai testé en enlevant le premier zero du N°, mais rien a faire, je ne reçois toujours pas ce fameux code.
J’ai fait la manip proposée en cas de non réception du code, toujours idem.

Si quelqu’un a eu le mme probleme ou une idée ???

Merci d'avance !

[Rédigé par : Suzy]

c trop complique jy arrive pas, pffff

[Rédigé par : cg]

bonjour,

moi j'ai un petit problème pour ce qui est de la diffusion de l'appli... quand je me connecte avec le compte d'un pote avec le lien du profil de l'appli, on ne peut pas y accéder (il revient sur la page principale de Facebook) alors qu'avec mon compte, je peux y accéder...

est-ce normal ?

[Rédigé par : sam]

salut j'ai reussi a faire mon appli mais un truc je ne comprend pas
quand je tappe le nom de mon appli sur fb il me demande pas d'autorisation avant de l'utiliser c'est direct je pense j'ai du loupé qqch a qqun a une idee svp

jai utiliser une fb iframe

et je veux que mon app les gens utiliser que depuis fb pas connecte depuis mon site

merci

[Rédigé par : john]

Bonjour,
cela aurai été bien de mettre le lien vers l'api a télécharger car pour si retrouvé sur facebook pas evident en plus beaucoup d'anglais.

[Rédigé par : g6k]

Bonjour,
MOi je voulais créer une application mais je n'y arrive pas il me demande de vérifier mon compte en entrant le code de confirmation envoyé sur mon téléphone... mais je ne reçois rien...
Comment faire ? ??

[Rédigé par : Romain Suard]

Bonjour,
Je cherche à mettre en lien un site wordpress avec une page facebook à l'adire du plucin sfc , j'ai donc pour cela du créer une application .

Hors je ne veux pas faire d'application, mais seulement que l'onglet de l'app donne sur le profil de l'application, comment faire ? et que dans cette page, on puisse accéder au site via le "aller à l'application"?

je suis un peu perdu du coup, merci de m'aider,

Romain
Vous pouvez me répondre ici : legrdschtroumpf@neuf.fr

Merci !

[Rédigé par : muondo]

bravo un ecellent blog et une bonne idee!

[Rédigé par : Pablo]

Tutoriel mis à jour: http://www.lafermeduweb.net/tutorial/creer-une-application-facebook-en-php-39.html

[Rédigé par : Abel K.]

Salut,
Juste pour remercier l'auteur
Je crois que beaucoup de développeurs en ont besoin
merci

[Rédigé par : devquentin]

Bonjour.
J'ai un problème. J'héberge ma page sur free.fr et lorsque je met accéder à mon application, facebook me renvoie : "Afin de vous assurer que les utilisateurs puissent voir votre application à partir d’une connexion sécurisée (https), veuillez visiter la console développeur pour mettre à jour votre URL de rappel.".
Est-il obligatoire d'avoir un certificat sur ma page?
Sinon quel est le problème?

Merci beaucoup!!

[Rédigé par : Julien barallini]

Bonjour,
je suis encours de développement d'une application et je m'interroge sur le délai de validation de l'application ?
Ce point est précisé dans le point 10 mais sans indication de délais: Faciliter la diffusion de son application : Après avoir été examinée, votre application devrait être incluse dans le moteur de recherche Facebook et accessible à tous.

[Rédigé par : nana]

Bonjour,

g6k, moi aussi je voulais créer une application mais je n'y arrive pas il me demande de vérifier mon compte en entrant le code de confirmation envoyé sur mon téléphone... mais je ne reçois rien...
Comment faire ? ?? SVP est ce que quelle qu'un a une solution? c'est très urgent
Merci d'avance.

[Rédigé par : Kevin]

Puis-je choisir entre une largeur de 760 pixels et une largeur de 520 pixels pour mon application? Je ne vois jamais d'application en 520 pixels alors que Facebook indique qu'on a le choix entre les 2 (si j'ai bien compris)

Merci :)