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

Publié par Gui dans Facebook, jQuery, Tutoriels

Facile

Facebook API, jQuery, html, css

N’hésitez pas à consulter le nouveau tutoriel ainsi que la documentation de Facebook, qui change régulièrement (notamment par rapport à l’access_token et aux permissions (offline_access)).

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.

Ces articles peuvent aussi vous intéresser :

54 commentaires

1 2
  1. Hyurst
    19 juin 2011

    Bonjour,

    Je n’arrive pas à faire ce module avec l’acces_token et le compte développeur et le scripts je ne comprends pas, pouvez-vous m’aider ?

    Répondre
  2. Nicolas
    12 octobre 2011

    Bonjour,

    Est-il possible de limiter l’affichage aux publications du propriétaire de la page Facebook comme c’est le cas avec la « Like Box » ?

    Un Grand merci à toi Gui, ce tutoriel est très clair !

    Répondre
    • Gui
      13 octobre 2011

      Hello Nicolas,
      C’est bien, ta question me rappelle que j’avais amélioré ce script, en y ajoutant des fonctionnalités, notamment celle dont tu as besoin, mais c’est pas encore finalisé. Si tu veux ma version « alpha », contacte moi par mail et je t’enverrai un zip en l’état 😉

      Répondre
      • Matgrafijs
        28 janvier 2012

        Salut Gui,
        Excellent tuto ! Très bien expliqué. Finalement, la partie la plus complexe reste de remplir les bons champs lors de la création de l’app Facebook pour obtenir l’access_token… bref

        Juste un petit souci. Je ne sais pas si tu as remarqué cela. Je récupère bien le stream d’une fan page sur un ordi. Or, quand je cherche à afficher cette même page web sur un navigateur mobile (Iphone en l’occurence), cela ne m’affiche plus rien…
        Qu’en penses-tu ?
        Merci
        Mat

  3. BORDET Marc-Antoine
    29 octobre 2011

    Bonjour à toi,

    Merci pour ce tuto de grande qualité qui se font rare sur le web.
    J’ai réussi à l’intégrer avec l’access_token. Tout marche super.

    Mais j’ai une question, je voudrais l’intégrer dans un slide, car je souhaiterais placer mon mur dans le footer et que le slide charge le mur.
    Ainsi dans chacune des slide il y aurait un post.

    Mais en essayant avec de multiples slide en jquery, je n’y arrive pas.
    Pourrais tu m’aider ?

    Merci d’avance

    Répondre
  4. coco
    14 janvier 2012

    il me semble que l’access_token est limité dans le temps!

    Répondre
  5. sylvaing
    29 mai 2012

    Voilà, j’ai donc balancé les fichiers sur un hébergement, après avoir indiqué l’adresse du profil FB (entre ‘…’ après feed) et l’access_token (entre « … ») dans le script.js, mais je n’obtiens que la boîte avec un « Chargement du mur… » qui ne me semble rien charger du tout. Pouvez-vous me dire s’il y a d’autres choses à remplacer dans les codes svp ? Une réponse serait vraiment la bienvenue, grand merci d’avance.

    Répondre
  6. Matgrafiks
    30 mai 2012

    Facebook a fait beaucoup de changements dernièrement, notamment au niveau des access token. Regarde ce lien : http://developers.facebook.com/docs/authentication/ Tu verras que début mai la méthode a changé.
    Mat

    Répondre
    • sylvaing
      31 mai 2012

      Merci pour la réponse. Désolé mais pour moi c’est du chinois (du cantonais, en plus), mais franchement ça l’aurait été aussi en français je suppose : je suis une bille, tout juste bon à bidouiller des scripts prémâchés. ça signifie qu’il n’est plus possible, pour le moment, d’afficher un mur facebook sur son site ? Est-ce que la science se penche sur la question ? Nos valeureux experts ici présents bûchent le sujet ? (Je désespère, j’ai trouvé plein de scripts et autres plugins, sur le web francophone comme sur l’anglophone, et je n’arrive à en faire fonctionner aucun…

      Répondre
  7. Topheur
    30 octobre 2012

    Bonjour merci pour cet excellent tuto.
    Juste une remarque : pour que cela fonctionne il faut mettre un S au http du feed sinon erreur 😉

    Répondre
  8. Topheur
    8 novembre 2012

    Comment faire quand ont écrit un « articles » pour afficher les N premières caractères dans la partie description ?

    Répondre
    • Topheur
      8 novembre 2012

      Je me répond 😉
      if(elt.message)
      msg = elt.message.replace(exp, »$1« );
      else if(elt.description)
      msg = elt.description;
      else
      msg = «  »;

      Par contre j’ai remarqué le le Nb de poste a affiché n’est pas pris en compte. Dans mon cas j’ai mis deux et ils sont tous afficher.
      Il faut mettre la limite en dur dans l’url a la ligne 21 pour que ça marche.

      Au problème quand on a pas assez de poste a afficher par rapport a la limite (limite a 5, Nb de poste sur FB 2) la dernière ligne contiens uniquement le « elt.from.name » ce qui n’est pas très jolie.

      comment corriger ça ?
      merci

      Répondre
    • Gui
      18 mars 2013

      Tu peux faire une fonction JS pour raccourcir cette description (méthode la plus simple).

      Répondre
  9. Sean GooGoo
    29 avril 2013

    La façon dont on génère un access token est devenue plus compliquée et j’ai rencontré toutes les difficultés du monde pour faire ça.
    Je vous livre ma méthode pour vous faire éviter des nuits de recherches :

    METHODE POUR GENERER UN ACCESS_TOKEN VALABLE À VIE :
    1/ Entrer l’url suivante dans un navigateur :
    https://graph.facebook.com/oauth/authorize?type=user_agent&client_id=ID_APPLICATION&redirect_uri=URL_SITE&scope=read_stream,offline_access,manage_pages
    =
    http://URL_SITE/#access_token=XXXXXXXX&expires_in=7125
    … On récupère le access_token à courte durée de vie (2h) en fin d’URL et on le colle dans l’URL de la partie 2/

    2/
    https://graph.facebook.com/oauth/access_token?client_id=APP_ID&amp; client_secret=APP_SECRET& grant_type=fb_exchange_token& fb_exchange_token=SHORT_LIFE_ACCESS_TOKEN
    On se rend à cette URL dans un navigateur qui nous retourne un nouvelle access-token de ce type :
    access_token=XXXXXXXXXXXXXXXX&expires=5184000
    Celui-ci à maintenant une longue durée de vie : 2 mois.
    3/
    On se rend ici : http://developers.facebook.com/tools/explorer/
    On copie/colle son nouveau access_token dans le champs « jeton d’accès et dans le champs à droite du GET, on tape : me/accounts puis on appuie sur le bouton envoyer
    Ensuite on se rend sur https://developers.facebook.com/tools/debug afin de vérifier la durée de vie du access_token en le collant dans le champs de debug.
    En principe, il retourne : Expiration : Jamais
    celui est valable à vie !

    Répondre
  10. nes
    7 juin 2013

    Bonjour, j’ai copié le code mais rien ne s’affiche… Est ce normal?
    Merci :)

    Répondre
  11. BAH
    26 juin 2015

    Merci beaucoup tu m’a sauvé la vie

    Répondre
  12. Anonyme
    15 avril 2017

    Tenho certeza que isso pedaçߋ de escrita tocou em toda a internet visitantes, sua realmente boa n. na construçãⲟ de novos weblog . http://www.maestroteca.com/user_detail.php?u=keeleyhass

    Répondre
  13. buy villas
    10 mai 2017

    tous simplement un grand tutoriel , et un ex travail bon courage pour la suite ….

    Répondre
1 2

Laisser une réponse à Topheur

Cliquez ici pour annuler la réponse.

Post shadow
←
→