[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.
Très bon tutoriel ! Simple et efficace ^^
Rédigé par : JE-GALERE | 09/04/2010 à 12H10
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 : aos | 27/04/2010 à 19H33
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 : abysse | 22/05/2010 à 00H32
doyos éseque tu a oui ou non
Rédigé par : evann | 26/05/2010 à 16H00
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 : Romain | 25/06/2010 à 16H33
j'arrive pas à telecharger le PHP5 client library...pouvez vous m'aider ?
Rédigé par : zak | 12/07/2010 à 21H11
Bonjour,
développeur web disponible pour nimporte quel projet d'application.
contact : j.fuertes@hotmail.fr
Bonne journée
Rédigé par : Fuerty | 18/07/2010 à 15H36
vas faire ta pub ailleurs Diane !
Rédigé par : Olivier | 16/08/2010 à 23H16
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 : JBrey33 | 20/09/2010 à 16H54
il y a des gens qui disent vraiment n'importe quoi!
Rédigé par : lk | 26/09/2010 à 19H57
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 | 29/09/2010 à 14H23
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 : gerald | 29/09/2010 à 14H51
c trop complique jy arrive pas, pffff
Rédigé par : Suzy | 25/10/2010 à 11H31
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 : cg | 02/11/2010 à 12H00
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 : sam | 05/11/2010 à 11H36
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 : john | 08/11/2010 à 08H42
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 : g6k | 14/01/2011 à 17H16
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 : Romain Suard | 25/01/2011 à 18H47
bravo un ecellent blog et une bonne idee!
Rédigé par : muondo | 02/02/2011 à 21H46
Tutoriel mis à jour: http://www.lafermeduweb.net/tutorial/creer-une-application-facebook-en-php-39.html
Rédigé par : Pablo | 11/02/2011 à 14H28
Salut,
Juste pour remercier l'auteur
Je crois que beaucoup de développeurs en ont besoin
merci
Rédigé par : Abel K. | 12/03/2011 à 19H29
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 : devquentin | 20/03/2011 à 15H00
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 : Julien barallini | 12/04/2011 à 18H34
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 : nana | 19/04/2011 à 16H44
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 :)
Rédigé par : Kevin | 20/04/2011 à 14H33