Creative-atoms Logo

Développer une application Facebook : premiers pas

Développer une application Facebook : premiers pas

Lors de la coupe du monde de football, 13pixels a offert l’application Choisis ton camp à la communauté Facebook. Avec un objectif simple et ludique, l’application permet à chacun d’afficher les couleurs de son équipe préférée sur sa photo de couverture et sa photo de profil. Nous avons relevé ce défi avec succès et nous partageons maintenant avec vous un petit retour d’expérience sous la forme d’un tutoriel. Le développement de votre première application Facebook : mode d’emploi.

Configurer son application Facebook

Dès que toutes vos idées et maquettes sont posées sur papier, la première chose à faire est d’accéder au portail Facebook pour les développeurs (Facebook Developers). C’est ici que vous aurez accès au panneau de configuration de vos applications, à la documentation de l’API Facebook ainsi qu’à une panoplie d’outils utiles au développeur Facebook. Pour y accéder, il est indispensable d’avoir un compte Facebook valide.

Une petite remarque en passant : la quasi-totalité de l’interface et de la documentation disponible sur Facebook Developers est rédigée en anglais.

A partir de Facebook Developers, créez votre application (Menu App > Create New app), complétez les infos demandées puis validez (attention, contrôle captcha). Les deux informations importantes ici sont le nom “humain” de votre application et le namespace, correspondant à l’identifiant unique de celle-ci.

Vous voici maintenant dans le panneau de configuration de votre application, sur la page tableau de bord. Rendez-vous maintenant dans l’onglet Settings pour configurer notre application.

Dans le cas de notre application Choisis ton camp, nous avons opté pour une application de typeCanvas. Ce type d’application permet d’intégrer parfaitement dans l’interface de Facebook une application web hébergée sur vos serveurs par le biais d’un iframe. Vous pouvez donc construire votre application avec le trio classique pour l’affichage (HTML, CSS, javascript) et votre langage préféré côté serveur. Dans notre cas : PHP.

Pour créer une application, ajoutez donc une plateforme de type Canvas dans la page Settings et complétez les paramètres de Canvas dans le nouveau formulaire qui s’affiche. Les paramètres les plus importants sont les 2 URL (non sécurisée et sécurisée) qui définissent la page vers laquelle pointera le canvas.

Attention, si vous souhaitez rendre disponible votre application au public à un moment où à un autre, vous serez obligé d’avoir un certificat SSL valide sur le domaine renseigné pour le canvas. En effet, Facebook n’autorise plus d’intégrer du contenu non sécurisé. Renseignez-vous auprès de votre hébergeur pour la mise en place d’un certificat SSL signé.

Vous remarquerez aussi qu’en premier lieu, dans les paramètres de votre canvas, est affichée l’URL de votre application. Si vous allez y faire un tour maintenant, vous verrez une page blanche. Si vous déployez une simple page d’index à l’adresse renseignée comme URL de canvas, le contenu de cette page sera affiché dans votre application.

Votre application est maintenant correctement configurée, vous pouvez maintenant concevoir et déployer sur votre serveur l’application proprement dite.

Petite remarque avant de passer aux choses sérieuses : tant que vous ne le spécifiez pas explicitement. Votre application n’est pas disponible au public. Seul vous pouvez l’utiliser.

Identification et permissions

Comme la plupart des applications Facebook, la nôtre va avoir besoin de certaines informations de l’utilisateur pour offrir une expérience riche, sur mesure. Pour pouvoir accéder aux informations d’un utilisateur, il faut que ce dernier soit identifié non seulement sur Facebook, mais également à notre application.

Une application demandera plus ou moins de permissions en fonction de ses besoins. Une règle importante à retenir : au moins de permissions, au mieux. En effet, un public averti rechigne naturellement à donner accès à un large panel de ses données personnelles. Par ailleurs, si votre application requiert des permissions spécifiques comme le droit de poster des statuts sur la timeline de l’utilisateur, votre application devra subir une validation de Facebook avant d’être accessible au public.

Dans notre cas, l’application ne devra accéder qu’à la photo de profil ainsi qu’à la photo de couverture de l’utilisateur. Ces informations sont accessibles avec la permission profil public, accessible par défaut au même titre que les permissions e-mail et amis de l’utilisateur. Notre application ne devra donc pas demander de permissions spécifiques. L’utilisateur devra toutefois s’identifier à notre application lors de sa première visite.

Un peu de code

Pour mettre en place la procédure de login, il nous faut tout d’abord le SDK PHP de Facebook. Dans notre cas, nous utilisons la version 3.2.3 pour des raisons de compatibilité avec notre serveur. Téléchargez le SDK et mettez en place la structure de votre projet comme suit :

./index.php<br /> ./lib/facebook/base_facebook.php<br /> ./lib/facebook/facebook.php<br /> ./lib/facebook/fb_ca_chain_bundle.crt

Nous allons maintenant écrire le code PHP dans index.php pour offrir à l’utilisateur :

  • Un bouton d’authentification s’il n’est pas authentifié
  • Un bouton de déconnexion s’il est autentifié
  • L’affichage de ses informations de publiques s’il est autentifié

Voici ce que cela donne dans index.php

  < ?php
   
  // On importe bien le SDK Facebook
  require lib/facebook/facebook.php ;
   
  // Vous devez impérativement créer une instance d’application en y
  // paramétrant votre AppID et votre clé secrète disponible
  // dans le tableau de bord de votre application
  $facebook = new Facebook(array(
  appId => 265759206947518,
  secret => VOTRE_CLE_SECRETE,
  )) ;
   
  // On essaye ensuite de récupérer l’utilisateur identifié au moyen de
  // la méthode getUser()
  $user = $facebook->getUser() ;
   
  // Si l’objet $user est défini, cela veut dire que l’utilisateur est
  // bien identifié sur facebook, reste à déterminer s’il est identifié
  // sur notre application
   
  if ($user)
  try
  // On va tenter de récupérer les données de l’utilisateur au moyen
  // de la méthode api()
  // Les données publiques
  $user_profile = $facebook->api(/me) ;
  // La photo de profil
  $user_picture = $facebook->api(/me/picture ?redirect=false&height=128&type=normal&width=128) ;
  // La photo de couverture
  $user_cover = $facebook->api(/me ?fields=cover) ;
  catch (FacebookApiException $e)
  // Si l’utilisateur n’est pas authentifié sur notre application,
  // une exception est remontée.
  error_log($e) ;
  $user = null ;
 
 
   
  // En fonction du statut de connexion de l’utilisateur, on récupère
  // une URL de connexion ou de déconnexion
  if ($user)
  // On passe en paramètre l’URL absolue de la page vers laquelle
  // l’utilisateur est redirigé après déconnexion, arbitrairement
  // l’accueil de Facebook
  $logoutUrl = $facebook->getLogoutUrl(array(
  next => https://www.facebook.com
  )) ;
  else
  // On passe en paramètre l’URL absolue de la page vers laquelle
  // l’utilisateur est redirigé après connexion, ici notre app
  $loginUrl = $facebook->getLoginUrl(array(
  redirect_uri => https://apps.facebook.com/demotreizepixels/
  )) ;
 
   ?>
   
  < !doctype html>
  <html>
  <head>
  <title>Ma première application Facebook</title>
  <meta charset="UTF-8">
  </head>
  <body>
   
  < ?php if ($user) :  ?>
  <div>
  < !— On affiche les informations de l’utilisateur —>
  <h1>Vos informations publiques</h1>
  <table>
  <thead>
  <tr>
  <th>Paramètre</th>
  <th>Valeur</th>
  </tr>
  </thead>
  <tbody>
  <tr>
  <td>ID</td>
  <td>< ?php echo $user_profile[id] ;  ?></td>
  </tr>
  <tr>
  <td>Prénom</td>
  <td>< ?php echo $user_profile[first_name] ;  ?></td>
  </tr>
  <tr>
  <td>Nom</td>
  <td>
  < ?php echo $user_profile[last_name] ;  ?>
  </td>
  </tr>
  <tr>
  <td>Photo de profil</td>
  <td>
  <img src="< ?php echo $user_picture[data][url]  ?>" />
  </td>
  </tr>
  <tr>
  <td>Photo de couverture</td>
  <td>
  <img src="< ?php echo $user_cover[cover][source]  ?>" />
  </td>
  </tr>
  </tbody>
  </table>
  </div>
  < ?php endif  ?>
   
  <div style="margin-top:20px ;">
  < ?php if ($user) :  ?>
  < !— Bouton de déconnexion de l’application ET facebook —>
  < !—
  Pour éviter des problèmes liés à la sécurité des iframes,
  n’oubliez pas l’attribut target="_top"
  sur les liens de redirection.
  —>
  <a target="_top" href="< ?php echo $logoutUrl ;  ?>">Déconnexion</a>
  < ?php else :  ?>
  < !— Bouton de connexion à l’application —>
  < !—
  Pour éviter des problèmes liés à la sécurité des iframes,
  n’oubliez pas l’attribut target="_top"
  sur les liens de redirection.
  —>
  <a target="_top" href="< ?php echo $loginUrl ;  ?>">Connexion</a>
  < ?php endif  ?>
  </div>
   
  </body>
  </html>
view rawindex.php hosted with ❤ by GitHub

Voici le résultat avant et après connexion à l’application :



Vous pouvez également tester le résultat en ligne ici.

Nous allons maintenant passer en revue plus en profondeur les méthodes utilisées pour comprendre ce que nous avons fait.

Connexion et déconnexion

Comme nous l’avons dit plus haut. Il faut que l’utilisateur soit connecté à Facebook et à notre application pour que nous ayons accès à ses données publiques. La méthode $facebook-&gt;getUser() retourne l’ID de l’utilisateur connecté ou NULL si aucun utilisateur n’est connecté à notre application. Le résultat permet de déterminer le reste du comportement.

Soit aucun n’utilisateur n’est connecté. Nous proposons alors un lien vers une URL de connexion que nous fourni Facebook grâce à la méthode
$facebook-&gt;getLoginUrl()
. Nous pouvons spécifier à la méthode plusieurs paramètres, dont l’URL de redirection après connexion (notre app) mais aussi le panel de permissions requises par l’application.

Dans le cas où l’utilisateur est authentifié, nous allons récupérer ses données pour affichage et proposer un lien de déconnexion, construit de manière similaire grâce à la méthode $facebook-&gt;getLogoutUrl() en lui spécifiant également une URL de redirection post-déconnexion.

Récupération des données

Il ne nous reste plus maintenant qu’à récupérer les données de l’utilisateur grâce à la méthode $facebook-&gt;api() à laquelle nous allons passer des paramètres nous permettant de puiser les informations nécessaires via la Graph API.

C’est quoi la Graph API ? C’est une interface HTTP qui permet d’accéder aux informations de Facebook qui sont composées de :

  • Noeuds (nodes) : Les différentes “choses” de Facebook comme les personnes, les événements les photos, etc.
  • Liens (edges) : Les relations entre les noeuds (ex : Une photo apparaît sur un commentaire)
  • Champs (fields) : Les infos relatives aux noeuds, comme la date d’anniversaire d’une personne.

En fonction des champs et des objets que nous voulons récupérer, nous devrons consulter le document de référence de la Graph API pour en déterminer le chemin d’appel. Le chemin d’appel aura la structure d’une URL classique telle que /chemin/du/noeud?param&egrave;tre=mon_param&egrave;tre&amp;autre_param&egrave;tre=mon_autre_param&egrave;tre

Les requêtes que nous avons utilisé dans notre code sont les suivantes :

$facebook-&gt;api('/me')
Ce chemin permet de récupérer le profil public de l’utilisateur connecté sous forme de tableau.

$facebook-&gt;api('/me/picture?redirect=false&amp;height=128&amp;type=normal&amp;width=128')
Ce chemin permet de récupérer la photo de profil de l’utilisateur connecté. Nous lui passons des paramètres qui permettent d’en modifier les dimensions.

$facebook-&gt;api('/me?fields=cover')
Ce chemin permet de récupérer le champ représentant la photo de couverture.

Tous ces chemins sont déterminés de manière arbitraire par la Graph API. Pour obtenir d’autres données, il n’y a pas de secret : il faut potasser la doc. Soyez conscient que l’accès à certaines informations nécessite des permissions spécifiques.

Enfin, Facebook pour les développeurs propose un outil permettant de tester les chemins Graph API : le Graph API Explorer.

Pour terminer notre petit projet, il ne nous reste plus qu’à afficher les informations récupérées dans nos variables. La méthode api renvoie les données au format JSON que l’on traitera comme des tableaux associatifs en PHP.

Déploiement

Maintenant que notre application est terminée, il ne nous reste plus qu’à la rendre publique. Rendez-vous dans le tableau de bord de l’application, onglet Status & Review pour activer le commutateur en haut à droite.

Vous pouvez être fier de vous. Votre première application Facebook est maintenant en ligne, accessible à tous.

Aller plus loin

En espérant que cet article introductif vous a plus, nous allons nous arrêtez là pour cette fois mais sachez que Facebook offre aux développeurs un panel d’outils et d’interfaces très vaste permettant de répondre à des besoins variés.

Au niveau des plateformes, vous pouvez développer des applications intégrées à Facebook mais également sur votre site, des appareils mobiles, voire des consoles de jeux.

D’un point de vue technique, nous avons intégré l’application en PHP mais en fonction de vos besoins et de vos ressources, vous pouvez opter pour les SDK IOS, Android, Javascript et bien d’autres.

Enfin, au niveau des applications, vous avez potentiellement accès à une mine presque infinie de données à condition d’obtenir les permissions requises de la part de vos utilisateurs. Chez 13pixels.be, tout ceci nous laisse penser que Facebook offre un bel outil aux intégrateurs de tous horizons et que la seule barrière entre vous et une application remarquable est votre imagination.

Liens utiles

Il n’est pas toujours simple de trouver facilement son chemin dans la documentation Facebook. Voici une liste de liens qui vous aideront dans vos développements :

Si vous avez besoin de notre expertise pour la réalisation d’une application facdebook spécifique, vous pouvez nous contacter en passant par notre formulaire de contact.

Vous aimez cet article, laissez un message sur un de nos réseaux sociaux en suivant les liens sociaux ! et partagez-le autour de vous.

Article précédent
Article suivant
Retour

Contactez-nous !

Creative Atoms Des startups peuvent éclore en province de Luxembourg, Creative Atoms les accompagne dans leurs défis techniques : application web, mobile, optimisation SEO, etc.
Rue Claude Berg Weyler, Luxembourg
Phone: 0032497169499
Awwwards