Créer une nouvelle application Facebook

Comment fonctionne une application Facebook ?



Commençons par un peu de théorie, et comprendre comment fonctionne une application Facebook.


Tout d'abord, le type d'application Facebook, il y'en a deux:

• Application Facebook Canvas
  
• Application Facebook iFrame
  

Application Facebook Canvas







Le premier type "Canvas" permet l'utilisation du langage Facebook, le FBML (et n'a rien avoir avec la balise HTML5 Canvas).


L'application est située sur vos serveurs, mais au lieu d'être
directement intégrée dans une iframe, Facebook va lire le résultat
HTML/FBML de vos pages et interpréter le code FBML présent pour le
remplacer (fb:name sera remplacé par le nom de l'utilisateur par
exemple).


La liste des tags FBML est assez longue, je vous laisse consulter la documentation officielle.

• Avantages: Des widgets plus évolués grâce au FBML, identification simplifiée.
  
• Inconvénients:
  L'interprétation du FBML prend plus de temps qu'une application iFrame,
  impossible d'utiliser des librairies Javascript comme jQuery.
  

Application Facebook iFrame







Dans une application en iFrame, votre site est intégré directement dans une iFrame dans le canevas de votre application.

Il n'interprète pas le FBML, mais il est possible d'utiliser du XFBML avec du Javascript.

Au lieu d'utiliser du FBML, il suffit d'utiliser l'API de Facebook
pour récupérer les noms de vos visiteurs, leurs infos ... s'ils ont
autorisé votre application à le faire !

• Avantages: Meilleures performances, utilisation possible des frameworks JS.
  
• Inconvénients:
  iFrame assez pénible (scrollbar parfois assez pénible si mal
  redimensionnée...), XFBML limité en nombre de widgets par rapport au
  FBML.
  

Pour notre application, nous choisirons le mode iFrame qui permet un
meilleur contrôle de l'application, de meilleures performances (si bien
optimisée) .


Globalement ce type est plus utilisé et conseillé, comme le montre ce billet
(d'où sont issus les schémas). A prendre avec des pincettes toutefois,
car il y'a eu pas mal de changement depuis que cet article a été écrit.


Mais la raison la plus importante du choix d'une application de type iFrame:



Facebook n'autorisera plus la création d'applications Canvas à partir du premier trimestre 2011. (Voir le calendrier)


Pour faire simple: comment ça marche une application Facebook iFrame ?

Et bien elle fonctionne comme un site classique que l'on va intégrer
dans une iFrame, dans une page spécifique de Facebook, votre canevas
(exemple: https://apps.facebook.com/sondages-amis/). La particularité de
ce site sera qu'il va utiliser directement l'API Facebook pour
fonctionner à l'intérieur du géant social !


C'est plus clair à présent ?





Créer et configurer l'application sur Facebook



Commençons maintenant la pratique. Nous allons déclarer notre nouvelle application sur Facebook.

Rendez-vous sur la page développeur Facebook, puis cliquez sur le bouton "Créer une application"





Entrez le nom de votre application Facebook:





Validez, entrez le captcha de sécurité puis vous devriez tomber sur la page de configuration de l'application Facebook:


Onglet "A propos de"







Si l'interface Facebook n'a pas changé depuis (ils ont une fâcheuse
tendance à changer les interfaces assez régulièrement...), cliquez sur
l'onglet "A propos de" et remplissez les champs:

• Nom de l'application: Le nom que vous souhaitez donner à votre application, c'est aussi par ce nom qu'elle sera retrouvée dans l'annuaire.
  
• Description: Un texte que vos utilisateurs pourront lire dans l'annuaire, leur liste d'applications etc.
  
• Icône et Logo: Uploadez l'image qui va caractériser votre application.
  
• Adresses électroniques: Remplissez les adresses électroniques de contact et d'assistance.
  
• URL de votre politique de confidentialité:
  Une page de votre site où l'on pourra consulter les mentions légales et
  règles de confidentialité de votre application (Pensez à le faire, la
  team FB le vérifie quand vous commencez à avoir des utilisateurs !)
  
• URL des conditions de service: Vos CGU ...
  

Si vous souhaitez travailler à plusieurs sur le développement de
l'application, vous pouvez ajouter un développeur en bas. Ce dernier
doit posséder un compte Facebook vérifié, il recevra une invitation:






Onglet "Site Internet"







Sur cet onglet, vous trouverez deux informations importantes:

• Votre ID d'application
  
• Votre clé secrète (A conserver précieusement)
  

Cette page ne nous concerne pas car nous n'aurons pas à utiliser Facebook Connect.



Onglet "Intégration à Facebook"







Comme son nom l'indique, c'est dans cet onglet que nous allons configurer l'intégration de notre application à Facebook.

Là encore, nous retrouvons nos identifiants d'application: Le client_id et le client_secret.

• Page de Canevas: Il s'agit de l'URL qu'aura la page de votre application sur Facebook.
  
• URL du Canevas: Entrez l'URL ou l'IP du serveur
  pointant sur votre application. Exemple: http://sondages.novaway.fr/
  (N'oubliez pas le slash / de fin)
  
• Type de cadre de pages: Choisissez iFrame
  
• Découverte sociale:
  Laissez activé, il s'agit d'un équivalent du Like, il publie un message
  sur le mur de l'utilisateur pour faire connaître l'application.
  
• Onglets de page: Pas besoin pour le moment
  

Paramètres avancés







Et dans le dernier onglet, vous trouverez divers paramètres avancés comme:

• URL appelée après retrait d’autorisation: L'url qui pointe vers votre application suivi de /unsubscribe.php (fichier que l'on créera par la suite)
  
• Mode bac à sable:
  Activez le mode bac à sable pour que personne ne puisse accéder à votre
  application pendant son développement sauf les développeurs ajoutés
  (dans "A propos de").
  

Laissez le reste des paramètres avec leurs valeurs par défaut.


Enregistrez les modification ! Il se peut que vous ayez une erreur
si vous avez oublié un / à la fin d'une des URL ou si le nom de votre
canevas est déjà pris (Ça arrive souvent, c'est comme les domaines ...).





Voilà pour la configuration, maintenant testons !


Créez un fichier index.php à la racine de votre répertoire web (Celui sur lequel pointe l'URL renseignée dans "Page de Canevas".

Code html:

1.Hello les fermiers ! 2. 3. 4.

Et voilà le résultat une fois que vous appelez votre application:












SDK PHP Facebook: Graph API



Facebook met à disposition plusieurs SDK permettant d'utiliser leur API.

Nous allons télécharger la classe PHP qui utilisera la Graph API Facebook.


Téléchargez le SDK PHP





Dans l'archive téléchargée, vous pouvez tout de suite extraire les deux fichiers dans le répertoire src:

• facebook.php
  
• fb_ca_chain_bundle.crt
  

Mettez les dans un dossier lib/ dans le répertoire de votre projet.


Dans l'archive, vous trouverez aussi un fichier d'exemple
d'utilisation et un fichier de test unitaire. Vous pouvez y jeter un œil
par curiosité, mais nous n'en aurons pas besoin.



Comment fonctionne la Graph API Facebook ?




Facebook dispose de deux types d'API, la OLD Rest API qui n'est plus à utiliser aujourd'hui (mais toujours présente pour les anciennes applications), et la Graph API, celle que nous utiliserons.


Rendez-vous sur la documentation de l'API que vous pouvez bookmarker au passage car vous allez y passer du temps





Le principe est relativement simple, vous appelez une certaine URL
pour récupérer des données sur un utilisateur, un évènement, un groupe
...


Par exemple, si l'on veut récupérer les informations la page Fan Facebook de Coca cola, il nous suffit d'appeler l'URL: https://graph.facebook.com/cocacola

Code xml:

01.{ 02."id": "40796308305", 03."name": "Coca-Cola", 04."picture": "http://profile.ak.fbcdn.net/hprofile-ak-snc4/hs236.ash2/50516_40796308305_7651_s.jpg", 05."link": "https://www.facebook.com/coca-cola", 06."category": "Company", 07."website": "http://www.coca-cola.com", 08."username": "coca-cola", 09."products": "Coca-Cola is the most popular and biggest-selling soft drink in history, as well as the best-known product in the world.nnCreated in Atlanta, Georgia, by Dr. John S. Pemberton, Coca-Cola was first offered as a fountain beverage by mixing Coca-Cola syrup with carbonated water. Coca-Cola was introduced in 1886, patented in 1887, registered as a trademark in 1893 and by 1895 it was being sold in every state and territory in the United States. In 1899, The Coca-Cola Company began franchised bottling operations in the United States.nnCoca-Cola might owe its origins to the United States, but its popularity has made it truly universal. Today, you can find Coca-Cola in virtually every part of the world.", 10."likes": 20896023 11.}

Nous obtenons un JSON que l'on pourra traiter ensuite.


Même chose, si l'on veut des infos sur une photo de Coca Cola, on appelle l'URL https://graph.facebook.com/98423808305, avec 98423808305 qui correspond à l'ID de la photo.





Si vous souhaitez récupérer l'avatar miniature d'un utilisateur, vous pouvez appeler:

https://graph.facebook.com/freelanceweb/picture ou freelanceweb correspond à l'ID ou le raccourci URL de l'utilisateur.


Vous saisissez un peu le principe ?


Le SDK PHP va nous permettre, via cURL d'appeler
toutes ces différente méthodes, de passer directement les tokens
d'identification, nécessaires pour certains appels comme la liste des
amis de telle ou telle personne ... Et le résultat JSON sera
automatiquement transformé en un tableau PHP traitable dans notre
application.





Voilà pour ce premier chapitre! Dans le prochain, nous définirons notre projet et commencerons la pratique.


Si vous souhaitez faire réaliser votre application Facebook, n'hésitez pas à faire une demande de devis auprès de http://www.novaway.fr/, spécialistes en développement Facebook.