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.

54 commentaires

1 2
  1. Specialty Chemicals

    jquery est définitivement le meilleur framework javascript

  2. SmoothDrazik

    Merci beaucoup pour ce tutorial ! et surtout pour les ressources utilisées mises à disposition, pour une première approche c’est parfois difficile de comprendre tout ce dont on a besoin pour faire fonctionner ces bouts de code !

    Encore merci !

  3. adokara

    Hello,

    as tu un exemple pour afficher un fil de discussion privé ?
    Plus précisément, mon souhait est de permettre l’envoi d’un message via l’api FB à partir de mon site et d’afficher le fil de discussion privé.

    merci pour ce tuto
    ++

    • Gui
  4. Eric

    Superbe tutoriel.

    En essayant un autre feed (Facebook, pare exemple), je reçois l’erreur « Result of expression ‘elt.message’ [undefined] is not an object. »

    J’ai remplacé msg = elt.message.replace(exp, »$1« );
    avec msg = elt.message; (ligne 34), ça marche.

    J’ai aussi remarqué que les notes et liens qui sont sur le mur ne sont pas importés. Cette addition parait marcher:
    if (elt.message != null)
    { msg = elt.message; }
    else
    { msg = elt.description; }

    Est-ce qu’il y a moyen d’utiliser cette méthode pour montrer le calendrier (events) sur un autre site?

    Merci!

    • Eric

      Correction. Ceci fonctionne:

      var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
      if (elt.message != null)
      { msg = elt.message.replace(exp, »$1« ); }
      else
      { msg = elt.description.replace(exp, »$1« ); }

      Le problème n’était pas avec le « replace », masi était dû au fait que quelques entrées ne contenaient pas de message. Alors on doit vérifier si il y a un message avant de continuer.

      • Eric

        Je suis tombé sur une situation où il n’y avait pas de description. Une modification de plus:

        var exp = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/i;
        if (elt.message != null)
        { msg = elt.message.replace(exp, »$1« ); }
        else {
        if (elt.description != null)
        { msg = elt.description.replace(exp, »$1« ); }
        }

        Notez que href ext converti en lien ci-dessus. Ne copiez pas le code simplement, mais comparez-le avec le code original de Gui.

  5. Christophe

    Bonjour à tous !

    Je cherche depuis longtemps une application qui pourrait reprendre le flux RSS d’une page Fan facebook pour le publier sur une autre page fan….

    En détails : je gère différentes pages fans et je voudrais que ma page « mère » republie automatiquement les contenus postés sur les pages « filles »… du coup je sais pas si c’est plus clair comme ça ? 🙁

    La question que je me pose : Une page fan a t’elle un flux RSS au quel on peut s’abonner ?

    Merci de votre aide 🙂
    Christophe

  6. Romain

    Hello, Depuis quelques jours, ce script ne marche plus. Facebook n’autorise plus la lecture des feed sans access_token. J’essaye depuis aujourd’hui de faire passer la variable de l’access_token dans le script externe scripts.js. Peux-tu m’aider ? merci bcp.

    • Gui
  7. niten

    Bonjour,

    J’ai aussi le problème, ce superbe script ne marche plus depuis ce matin de mon coté.(merci d’ailleurs pour le script)
    Donc j’ai essayé de récupérer un access_token et l’ajouter au script comme le dit Romain plus haut, et même comme cela, ça ne marche pas.

    Enfin je sais pas si ça ne marche pas, ou si c’est moi qui m’y prend mal.
    Pour l’instant, j’essaie de tester avec mon propre mur, donc j’ai autoriser une page test a accéder aux feed (scope=read_stream ajouté à la chaine d’autorisation…), et j’ai ajouté l’access_token reçu directement au script.

    Problème :
    – quand je vais vérifier directement le flux sur la page :
    https://graph.facebook.com/me/feed?access_token=****

    J’ai effectivement mon mur.

    -Je met ce même lien dans le script : il récupère pas les données du flux.

    Bizarre…enfin si je trouve une solution, je reviendrais la mettre ici.

  8. niten

    Bon bah, j’ai voulu retenter ma chance aujourd’hui, et en faisant la même chose qu’hier, mon test fonctionne.

    Maintenant la souci, c’est que vu que l’access_token est limité dans le temps, il va falloir implémenter une méthode pour le récupérer dynamiquement.

    Je vous tiens au courant si je trouve qq chose.

    niten.

    ps : j’ai remarque que quand il y avait des publication sans message (photos/videos), ça faisait buger le tout.

    J’ai corrigé en faisant ça :
    if(elt.message){
    msg = elt.message.replace(exp, »$1« );
    }else{msg =  » « ;} (ligne 40)

    Et en remplaçant l’attribut « alt » des picture par msg (au lieu de elt.message).

    ++

    • Gui
    • Romain

      En effet, j’avais aussi constater le prob du « non message ».
      Niten, ton acces token fonctionne lorsqu’un autre visiteur que toi visite ton site ? Si tu arrives à récuperer la methode dynamiquement, je suis preneur!! 🙂 Mon site a hâte de retrouver ses news facebook 🙂 (bcwall.com pour infos, quels sont vos sites ?)

      ++
      Romain

  9. marcopitch

    Toute solution m’intéresse aussi !! merci d’avance

  10. Eric

    Il y a un Social plugin de Facebook qui fait presque la même chose. Je ne sais pas si il est neuf mais je ne me souviens pas de l’avoir vu avant:
    http://developers.facebook.com/docs/reference/plugins/like-box/

    • Gui
  11. Narkotik

    Je cherche une solution pour obtenir un access_token à mon lien du style :

    https://graph.facebook.com/MA_PAGE/feed?access_token=****, mais je ne trouve pas comment faire…

    Auriez-vous une solution pour résoudre ce soucis assez récurrent ?

    Merci

    Narkotik

  12. Alexis | Caconcept

    Bonjour à tous.
    Un grand merci pour la v1 de ce widget.
    J’avais commencé à le personnaliser pour mon site html en construction.
    J’attends avec impatience la récupération dynamique du token…

    http://www.caconcept.fr/communication-visuelle-montpellier/creation-graphisme-publicite-internet-accueil.html

    Merci à tous pour votre travail !

  13. Gui
  14. niten

    Bonjour,
    désolé, j’ai pas eu le temps de rebosser la dessus vu qu’au boulot on est passer sur d’autres projets et j’ai pas le temps de me taper toutes les doc sur le dev FB.

    Donc ici, j’ai utilisé une méthode que je qualifierais de « pas très propre », mais qui fonctionne en attendant mieux.

    En fait, pour les pages fan il n’importe quel Token lié à ton application semble fonctionner ( je pense que FB a rajouté cela surtout pour obliger les dev a passer par une application facebook).

    Donc ce que j’ai fait, j’ai obtenu un token illimité pour mon application, et je l’ai mis en dure dans le script.

    Pour obtenir ce dit Token, dans une page ouvrir un lien type :
    « https://graph.facebook.com/oauth/authorize?type=user_agent
    &client_id=APPID
    &redirect_uri=PAGE
    &scope=offline_access,read_stream

    en remplaçant APPID par l’id de votre application, et PAGE par votre page (celle ou vous récupérez le Token).

    Aller sur cette page avec votre compte FB ouvert, autorisez votre Appli, et mettez le token ainsi récupérer(dans la barre navigation de votre page ‘PAGE’) dans le script, comme dans les post au dessus.

    Encore une fois, je trouve ça pas très propre, mais mes délais étaient short, et j’ai plein d’autre projet sur le feu.
    J’espère avoir le temps de revenir dessus au plus vite.

    niten.

  15. Gui
  16. niten

    Eh bah c’est exactement ce que j’ai fais et tenté d’expliquer au dessus. C’est bien plus clair avec ton article : bien vu.

    niten.

  17. Taniss

    OH MON DIEU !

    Un très grand merci a vous ! il me manquait juste ce fameux
    « https://graph.facebook.com/me/feed/?access_token=XXXXX »

    J’ai bien du chercher pendant 8h non-stop sur google pour enfin trouver ce magnifique post!

    Il y a juste une toute petite chose que je ne comprends pas,
    « https://graph.facebook.com/me/feed/?access_token=XXXXX » ne me permet que d’accéder que au feeds de mes informations personnelles, ai-je raté quelque chose ?

    « &scope=read_stream,offline_access », c’est ce scope qui permet de récupérer le flux d’une fan page FB dont on est admin ?

    Taniss

1 2

Laisser une réponse à SmoothDrazik


Post shadow