Tutoriel Graph API, JSON et jQuery: afficher un mur Facebook sur votre site

Il y a déjà quelque temps Facebook a lancé une nouvelle API: Graph API, qui permet à tout le monde de récupérer les données de Facebook sous forme de webservice, formatées en JSON.

On peut donc accéder librement aux informations publiques fournies par Facebook, comme les pages Fan par exemple.

Pour ce qui est des informations privées (comme nos profils personnels), il faut passer par une demande d’autorisation et l’utilisation de tokens.

Nous allons donc voir dans ce tutoriel comment récupérer le mur d’une page fan afin de l’afficher sur votre site, via un plugin jQuery très simple.

1. Introduction

Nous allons réaliser un petit widget, qui va afficher un nombre paramétrable d’entrées provenant du mur d’une page fan Facebook.

Nul besoin de PHP, tout se passe via une simple page html et un fichier javascript. Nous avons juste besoin d’un petit bout de code HTML :

<script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"><!--mce:0--></script>
<script src="js/jquery.facebook_feed.js" type="text/javascript"><!--mce:1--></script>
<script src="js/script.js" type="text/javascript"><!--mce:2--></script>

Rentrons maintenant dans le coeur du sujet: le javascript !

2. Script de récupération et d’affichage du flux

Nos deux principaux paramètres seront le flux à afficher ainsi que le nombre d’entrées:

var defaults = {
	nb: 5,
	feed: null
};

Nous allons appeler notre plugin « facebook_feed » dans le fichier script.js

$(document).ready(function(){
	$("#result").facebook_feed({
		feed: 'http://graph.facebook.com/DisneyPixar/feed',
		nb: 5
	});
})

Voyons maintenant comme récupérer un flux et l’exploiter pour afficher ses données correctement:

// Si un flux a bien été renseigné
if(options.feed != null)
	// Nous faisons une requête Ajax de type jsonP sur le flux
	// En limitant le résultat à "nb" entrées
	$.ajax({
		url: options.feed+"?limit="+options.nb,
		dataType: "jsonp",
		// En cas de succès de la requête
		success: function(feed)
		{
			// On créée une liste
			var html = "
<ul>";

			// Pour chaque élément du flux
			$(feed.data).each(function(i, elt){

				// On ajoute une classe pour créer un zébrage CSS
				className = (i%2 == 0)?"odd":"even";

				// On détermine si l'élément est le premier ou le dernier
				borderClass = (i==0)?" first":(i==(options.nb-1))?" last":"";

				// Un peu de traitement sur la date
				date = elt.created_time.substr(0,10).split("-");
				date = date[2]+"/"+date[1]+"/"+date[0];

				// On remplace les adresses trouvées dans le message
				// Par des liens HTML via une Regex
				var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?
				=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
				msg = elt.message.replace(exp,"<a href="$1">$1</a>");

				// On formatte les informations récupérées
				html += "
	<li class="&quot;+className+borderClass+&quot;">";

				// S'il existe une photo associée à l'entrée
				// On l'affiche
				if(elt.picture){
					html += "
<div class="img"><a href="&quot;+elt.link+&quot;">
					<img src="&quot;+elt.picture+&quot;" alt="&quot;+elt.message+&quot;" /></a>"
					 + "

<img title="&quot;+elt.type+&quot;" src="&quot;+elt.icon+&quot;" alt="&quot;+elt.type+&quot;" />
					<small>"+date+"</small></div>
";
				}

				// On affiche le contenu de l'entrée
				// Nom et message
				html += "
<div class="txt">"
					 + "
<h2>"+elt.from.name+"</h2>
"
					 + "
"+msg+"</div>
"
					 + "

"
					 + "</li>
";
			})

			html += "</ul>
";

			// On insère notre liste dans l'élément HTML appelant
			obj.html(html);
		}
	});
// Aucun flux renseigné, on affiche un message d'erreur
else
	obj.html("flux introuvable.");

Explications

Habituellement, il n’est pas possible de faire des requêtes Ajax sur un serveur externe (sans passer par un fichier de traitement intermédiaire type PHP), pour des raisons de sécurité. C’est là qu’intervient JSONP (JSON with Padding). Il s’agit d’une méthode permettant de formater le résultat JSON délivré par le serveur (webservice) pour le client, en prenant en compte un paramètre de callback .

Ici tout ceci est transparent, car jQuery le fait pour nous ! Il suffit donc de définir le type de requête à: jsonp

Vous pouvez avoir des explications complémentaires sur ce site: http://blog.jaysalvat.com/article/comprendre-jsonp-et-acces-de-donnees-a-distance-en-javascript

Ensuite, comme le résultat est décodé, il nous suffit de manipuler des objets. Nous parcourons donc la liste des objets (correspondant à nos différentes entrées) afin d’afficher pour chacun, son titre, son illustration si celle-ci existe et son texte.

Demo et Sources

Vous pouvez élécharger les sources ici: Sources

[EDIT] J’ai supprimé le lien vers la DEMO, car celle-ci ne fonctionnerait dorénavant qu’avec un acces_token, et vous comprendrez bien que je n’ai pas laissé le mien dans le script.