Tutoriel Graph API, JSON et jQuery: afficher un mur Facebook sur votre site
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=""+className+borderClass+"">";
// S'il existe une photo associée à l'entrée
// On l'affiche
if(elt.picture){
html += "
<div class="img"><a href=""+elt.link+"">
<img src=""+elt.picture+"" alt=""+elt.message+"" /></a>"
+ "
<img title=""+elt.type+"" src=""+elt.icon+"" alt=""+elt.type+"" />
<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
Aaaah d’accord, excuse moi! Je n’avais pas vu cette ligne dans ton tuto !
Encore un grand merci !
Tout marche parfaitement !!!
Un grand merci à vous deux les gars !
Désormais je suivrai ce blog de près.
Bonjour,
Je ne comprends pas quand je clique sur le lien de démo je ne vois rien s’afficher… Je ne comprends pas pourquoi ? :/
Il faut à présent télécharger les sources et uliser un access_token pour faire fonctionner le script.
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 ?
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 !
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 😉
Et voilà ! http://wp.me/pWdn8-q8 😉
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
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
Oui c ‘est possible, mais il va falloir que tu l’implémentes ! 🙂
mousa
My brolther recommended I might like this blog. He
was totally right. This put up actually made my day.
You can not consider simply how so much time I had spent for this information! Thank you!
il me semble que l’access_token est limité dans le temps!
Je n’ai pas vu de limite à ce niveau là, mais sinon, il faudra juste en régénérer un autre.
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.
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
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…
Bonjour merci pour cet excellent tuto.
Juste une remarque : pour que cela fonctionne il faut mettre un S au http du feed sinon erreur 😉
Comment faire quand ont écrit un « articles » pour afficher les N premières caractères dans la partie description ?
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
Tu peux faire une fonction JS pour raccourcir cette description (méthode la plus simple).
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& 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 !
Bonjour, j’ai copié le code mais rien ne s’affiche… Est ce normal?
Merci 🙂
Merci beaucoup tu m’a sauvé la vie
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
tous simplement un grand tutoriel , et un ex travail bon courage pour la suite ….