Créer une application Facebook en Java

[EDIT]

Facebook abandonne le langage FBML. Dorénavant, toutes les applications devront être écrites selon les standards du web (HTML/CSS/JavaScript) et être intégrées à Facebook grâce aux iFrames. Ce tutoriel est donc devenu en grande partie obsolète.

[/EDIT]

Je vous propose un tutoriel pour créer votre première application Facebook. Il existe deux APIs standards, l’une en PHP, l’autre en Java. Nous allons étudier la seconde. Notre application s’appellera yafba (Yet Another Facebook Application).

Nota : Certaines lignes de code sont trop longues et ne s’affichent pas entièrement. Dans ce cas, faites un copier-coller dans un éditeur de texte.

Prérequis

Vous devez posséder un compte sur Facebook et ajouter l’application developers. Cette application va vous permettre d’obtenir une clé d’API pour votre application et vous permettre d’accéder à la documentation en ligne.

Vous devez également avoir un hébergement Java. En effet, bien que les utilisateurs accédent à votre application par l’intermédiaire de Facebook, vous hébergez vous-même l’application et les données que vous recueillez. Ce qui est important, c’est que le serveur qui héberge votre application doit être accessible publiquement par une URL. Il n’est pas nécessaire d’acquérir un nom de domaine, vous pouvez utiliser l’URL fournie par votre hébergeur.

L’environnement de développement

Vous devez télécharger l’API Facebook. Celle-ci est disponible via l’application developers :

L’archive contient le code source de la librairie à partir duquel vous pourrez générer la javadoc. Vous trouverez également la librairie compilée sous la forme d’une archive facebook.jar que vous devez importer dans votre projet.

Notez qu’il n’est pas possible de tester une application Facebook en localhost. Pour être testée, l’application doit être déployée sur le serveur que vous avez déclaré dans l’adresse de callback. Il existe néanmoins un émulateur accessible en ligne qui permet de tester son code FBML ou de tester l’API Facebook.

L’architecture

Nous n’aborderons pas la structure d’une application Facebook en détail, celle-ci est constituée de plusieurs composants dont la plupart sont générés automatiquement par les serveurs de Facebook. Nous nous intéresserons uniquement à la génération de la page d’accueil.

Pour faire fonctionner notre application, nous utiliserons un simple conteneur de Servlet, par exemple Tomcat. L’application reposera sur les Servlets et les JSPs. Les Servlets auront la responsabilité d’extraire les informations de l’API Facebook, et les JSPs serviront à générer la couche présentation au format FBML (FaceBook Markup Langage). Nous utiliserons accessoirement la librairie JSTL.

Référencement de l’application sur Facebook

Avant de développer notre application, nous allons commencer par la référencer sur Facebook. Pour cela, vous devez demander une clé d’API par le biais de l’application developers.

Les informations importantes à fournir sont le nom de votre application et l’URL de callback. Cette dernière doit correspondre à l’URL de votre serveur suivi du répertoire dans lequel vous avez l’intention de placer votre application. Elle est de la forme http://serveur.com/yafba/.

Vous pouvez également définir une URL pour le canvas qui correspond au cadre de votre application. Celle-ci est de la forme http://apps.facebook.com/yafba/. Ainsi, lorsque votre serveur contient un fichier http://serveur.com/yafba/index.jsp, celui-ci est accessible à travers Facebook par l’url http://apps.facebook.com/yafba/index.jsp.

Demandez enfin à ce que votre application puisse être intégrée à Facebook, cela permettra aux utilisateurs de l’ajouter à leur profil sous la forme d’un widget. Vous verrez alors apparaître des options supplémentaires. Parmi celles-ci, l’URL Post-Add correspond à l’URL « frontale » vers laquelle sont dirigés les utilisateurs qui cliquent sur le lien de votre application.

Toutes ces opérations se font à partir de l’application developers.

Connexion

Maintenant que notre application est référencée sur Facebook et que notre environnement de développement est correctement configuré, nous allons commencer à coder.

Nous allons écrire une Servlet « test » qui traitera les requêtes en provenance de Facebook :

<servlet>
	<servlet-name>test</servlet-name>
	<servlet-class>fr.hadf.yafba.servlets.Test</servlet-class>
</servlet>
<servlet-mapping>
	<servlet-name>test</servlet-name>
	<url-pattern>/test</url-pattern>
</servlet-mapping>

La classe centrale de l’API est FacebookRestClient. Il s’agit d’une classe abstraite qui est héritée par deux sous-classes qu’on choisi selon le protocole qu’on veut utiliser, XML ou Jason. Nous allons utiliser le protocole XML.

La première chose que nous faisons est d’extraire le champ « fb_sig_session_key » de la requête entrante. Si ce champ est vide, nous redirigeons l’utilisateur vers la page de login dont l’URL est construite avec la clé d’API. Lorsque l’utilisateur aura été authentifié, il sera à nouveau redirigé vers notre Servlet, mais cette fois avec un champ « fb_sig_session_key » renseigné :

private void connection(HttpServletRequest req, HttpServletResponse res)
throws ServletException, IOException, FacebookException {
	String sessionKey = req.getParameter("fb_sig_session_key");
	if(sessionKey == null) {//on redirige l'utilisateur vers la page de login
		String url = "http://www.facebook.com/login.php?api_key="+api_key+"&v=1.0&canvas&next=test";
		res.getWriter().println("<fb:redirect url='"+url+"' />");
		return;
	}
	else {//l'utilisateur est maintenant authentifié
		FacebookXmlRestClient client = new FacebookXmlRestClient(api_key, secret, sessionKey);
		loginSuccessfull(client, req, res);
	}
}

Utilisation de l’API Facebook

Nous allons maintenant utiliser l’API Facebook pour extraire la liste des amis de l’utilisateur courant :

protected void loginSuccessfull(FacebookRestClient client, HttpServletRequest req, HttpServletResponse res)
throws IOException, FacebookException, ServletException {
	Document root = (Document)client.friends_get();
	NodeList list = root.getElementsByTagName("uid");
	ArrayList friends = new ArrayList();
	for(int i=0; i<list.getLength(); ++i) {
		String uid = list.item(i).getTextContent();
		friends.add(uid);
	}

	req.setAttribute("friends", friends);
	getServletContext().getRequestDispatcher("/test.jsp").forward(req, res);
}

Nous utilisons simplement la fonction FacebookRestClient.friends_get(). Cette méthode retourne un objet diffèrent selon qu’on utilise le protocole XML ou Jason. Dans notre cas, nous récupérons un objet de type org.w3c.dom.Document. Pour connaître le format de la réponse, il suffit d’interroger la console de test disponible sur Facebook :

<?xml version="1.0" encoding="UTF-8"?>
<friends_get_response 	xmlns="http://api.facebook.com/1.0/"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd"
	list="true">

	<uid>1</uid>
	<uid>2</uid>
	<uid>3</uid>

</friends_get_response>

Nous extrayons alors le champ uid et utilisons l’objet request pour passer la liste des valeurs à la JSP.

Nous n’utilisons pas cette fonction, mais sachez que l’API permet également d’interroger la base d’utilisateur de Facebook grâce au langage FQL :

Document root = (Document)client.fql_query("SELECT name FROM user WHERE uid=" + uid;

Couche présentation

Nous commençons par écrire une page index.jsp qui nous servira d’URL « frontale », celle déclarée en URL Post-Add. Elle sollicite l’utilisateur pour envoyer une série d’invitations à ses amis afin d’ajouter notre application à leur profil :

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<fb:fbml>
	<fb:request-form type="yafba"
		action="test"
		content="Je vous invite à ajouter l'application yafba">
		<fb:multi-friend-selector actiontext="Selectionnez les amis auxquels vous voulez adresser une invitation"/>
	</fb:request-form>
</fb:fbml>

Notre application est ensuite très simple, elle se contente d’afficher une liste d’amis (test.jsp). Rappelons que cette liste a été extraite à partir de la Servlet « test » qui est appelée après validation du formulaire d’invitation. Nous utilisons la librairie JSTL pour garder propre la couche présentation :

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<fb:fbml>
	<c:forEach items="${requestScope['friends']}" var="uid">
		<fb:name uid="${uid}"/><br>
	</c:forEach>
</fb:fbml>

Conclusion

Vous venez d’écrire votre première application Facebook. Elle est accessible à partir du cadre « My Application » dans l’application developers.

Il ne s’agit que d’une présentation très modeste de ce qu’il est possible de faire. Ce tutoriel vous a surtout permis de comprendre l’architecture d’une application Facebook. A vous maintenant d’explorer la documentation si vous voulez aller plus loin.

Bonne continuation 😉

Remerciements

Je remercie Michael Bagur pour son aide précieuse, en particulier pour la phase de connexion à l’API, et pour sa relecture.

Publicités

28 Responses to “Créer une application Facebook en Java”


  1. 1 StaGzer février 19, 2008 à 4:27

    Bonjour,
    je n’arrive pas à reproduire toute la manipulation à effectuer pour parvenir à afficher la liste des amis dans une application Facebook. Pouvez vous plus détailler toute la procédure svp?

  2. 2 hadf février 20, 2008 à 12:30

    Pour commencer, vérifiez que votre application est correctement référencée sur Facebook. Pour cela, il suffit de créer un simple fichier texte qu’on place dans Tomcat et auquel on accède par l’URL http://apps.facebook.com/votreapplication/fichier. Le contenu du fichier doit s’afficher dans le canvas. Si ce n’est pas le cas, c’est que vous n’avez pas correctement défini l’URL de callback. L’erreur peut aussi venir de l’adresse de redirection.

    Quels sont les messages d’erreur que vous obtenez ?

  3. 3 StaGzer février 21, 2008 à 10:42

    L’application est correctement référencée dans Facebook. Je peux afficher une servlet simple mais pas votre code.
    J’ai cette erreur lorsque je tente d’afficher la servlet :
    java.lang.NoSuchMethodError: org.w3c.dom.Document.normalizeDocument()V

    Quels jars utilisez vous pour le projet et tomcat ?

  4. 4 hadf février 21, 2008 à 4:53

    J’utilise simplement l’archive facebook.jar avec le JDK 1.5. Après quelques recherches, il semblerait que le problème vienne de l’archive xml-apis.jar, et peut-être aussi de xercesImpl.jar.

    Quel serveur d’application utilisez-vous ?

  5. 5 wanwan mai 20, 2008 à 1:51

    Bonjour,

    J’ai créé une application facebook mais je ne parviens pas à la publier dans l’annuaire des applications.
    En effet, lorsque je tape un des mots compris dans le titre dans le moteur de recherche de FB, je ne la trouve pas…
    Pourriez vous m’aider?
    Merci d’avance

  6. 6 hadf mai 20, 2008 à 6:21

    Je ne maîtrise pas bien cet aspect de Facebook. Je sais seulement qu’il existe un lien advertise your application qui permet de faire la publicité de son application.

  7. 7 Pauline août 1, 2008 à 8:39

    Bonjour,

    Je cherche les couts de réalisation de module Facebook par une agence. Pourriez-vous m’indiquer le temps de réalisation de ce type de module ?

    Connaissez-vous des frees qui pour réaliser ce type de module ?
    Par avance, merci pour votre réponse.

    Pauline

  8. 8 Poupoul octobre 10, 2008 à 8:59

    Bonjour,

    Est-ce possible d’avoir le code complet ?
    Je n’arrive pas à démarrer.
    Merci

  9. 9 io décembre 9, 2008 à 11:43

    Bonjour,

    Je cherche à faire une application sur facebook. Je ne suis pas programmeur. L’application que je souhaite faire est simpliste. Je souhaite faire un top 5 des chansons préférées d’un artiste et qu’au fil des choix des gens que le pourcentage de choix d’une chanson augmente.
    Comment puis-je m’y prendre ??
    Merci d’avance pour votr aide.

  10. 10 G décembre 11, 2008 à 8:55

    Bonjour

    Je souhaite déposer une idée de création d’application pour facebook et de même leur vendre…

    Est ce possible?

  11. 11 lestyle.be janvier 13, 2009 à 5:41

    Mr io vous avez besoin de ce genre d’applications je peux t’aider mais c’est payent contact moi par mail / infoATlestyleDOTbe bien à vous.

  12. 12 marcbat janvier 17, 2009 à 10:15

    Merci pour ce tutoriel! ça m’a super aidé. J’ai simplement utilisé struts. ça marche sans problème.

  13. 13 rom mars 13, 2009 à 12:36

    je n arrive pas a creer mon adresse Callback.
    pourriez vous m aidez.
    merci

  14. 14 Carole mars 18, 2009 à 11:59

    Bonjour à tous ! Merci pour cette aide mais j’ai toujours du mal à comprendre…
    Je voudrais mettre sur ma page une search box qui renverrait à une page de mon site (comme sur la page de gumtree). Ma search box est déjà prete et cela semble assez simple dans l’ensemble (pas d’interaction sociale au final).

    Est ce que vous auriez une marche à suivre à me donner pour installer cette search box ? Quelqu’un connaitrais une application existante que je pourrais réutiliser simplement ?

    Merci beaucoup pour votre aide !

  15. 15 natoine juillet 24, 2009 à 8:45

    J’ai refait toute la maneuvre et l’application ne marche pas.
    Quand j’appelle la servlet par son url :
    http://www.monDomaine.fr:8180/facebook_tutorial/test

    J’obtiens le retour suivant :

    Et quand je teste l’application dans Facebook j’ai un message d’erreur facebook :
    Code d’erreur HTTP 400 reçu lors du chargement de http://www.natoine.fr:8180/facebook_tutorialtest

    Appelé par : http://apps.facebook.com/yafanatoine/test

  16. 16 hamza mars 27, 2010 à 4:48

    je pas bien comprie
    svp vous pouver faireune explication
    de a jusq ‘à z
    avec des image ou seq vidéo??
    et merci bien dans tous les cas

  17. 17 mimi mai 11, 2011 à 5:54

    salut a tous le monde je besoin un code conserné la gestion d’un compte bancaire par utilisation servelet en java
    merci d’avant 😀

  18. 18 Sylvain octobre 8, 2011 à 1:30

    Lorsque je suis le lien enfin de telecharger l’API, sur la page facebook apparait « Aucune Information à cette page »

  19. 19 fedel octobre 24, 2011 à 7:38

    bonsoir a tous, je viens de penser a un petit concept d’appli:
    il faudrait créer une application permettant de voir nos photos que nos amis ont choisi pour leur(s) photo de profil.
    merci à tous ceux qui tenteront le défi!


  1. 1 web hosting uk blog Rétrolien sur mai 15, 2014 à 7:45
  2. 2 best Woocommerce themes Rétrolien sur juillet 9, 2014 à 4:11
  3. 3 Themes Woocommerce Rétrolien sur juillet 21, 2014 à 4:18
  4. 4 hostgator discount coupon Rétrolien sur septembre 2, 2014 à 8:58
  5. 5 Atlants.000a.biz Rétrolien sur septembre 3, 2014 à 3:40
  6. 6 The Easy Way to Set Up Your Website Rétrolien sur septembre 10, 2014 à 6:22
  7. 7 autosonics.com Rétrolien sur septembre 30, 2014 à 12:38
  8. 8 gardening tips for September Rétrolien sur octobre 3, 2014 à 7:15
  9. 9 Hostgator Code Rétrolien sur avril 19, 2015 à 6:04

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s





%d blogueurs aiment cette page :