Afficher un mur Facebook sur votre site avec jQuery – Nouvelle version
Intermédiaire
jQuery, Facebook API
Voilà bientôt un an que j’ai publié un tutoriel sur la graph API de Facebook, je vous propose une nouvelle version qui apporte quelques fonctionnalités supplémentaires.
J’ai donc créé un widget, qui permet d’afficher le mur d’une page fan ou de l’un de vos amis (ceux ayant choisi de partager des informations avec vous).
Jquery & Templates
Ce widget repose toujours sur jQuery, il n’y a aucunement besoin de PHP ou d’un autre langage serveur. Il utilise les templates jQuery (version Beta). Ainsi il est facile de modifier l’affichage des informations sans compromettre l’intégrité de celles-ci.
<li class='${borderClass} {{if picture}}withpic{{/if}}'>
<div class='author'>
<a href='${from.link}' title='${from.name}'>
<img class='avatar' src='${from.picture}' alt='${from.name}' />
</a>
</div>
<div class='entry'>
{{if picture}}<div class='img'><a href='${link}'><img src='${picture}' alt='' /></a></div>{{/if}}
<div class='txt'>
<h2><a href='${from.link}' title='${from.name}'>${from.name}</a></h2>
{{if msg}}<p>{{html msg}}</p>{{/if}}
</div>
<div class='clear'>
</div>
<p class='metas'>{{if type!='status'}} <img src='${icon}' alt='${type}' title='${type}' /> {{/if}}<small>${date}</small>{{if likes}} <img src='img/thumb-up.png' alt='likes' /> <small>${likes[1]}</small></p>{{/if}}</div>
<div class='clear'></div>
</li>
Nous pouvons donc vérifier {{ if }} que certaines informations sont disponibles avant de les afficher et ajuster librement le code html et donc le css pour créer votre propre affichage.
Configuration & Options
Voici la liste des options permettant de configurer l’affichage du mur Facebook :
var defaults = {
nb: 5, // Nombre d'infos
profile: null, // Identifiant Facebook
markup: "<li class='${borderClass} ..." // HTML
loadmore: true, // Charger davantage d'infos
replaceMore: false, // Remplacer le contenu actuel
dateFormat: "d/m/Y", // Formatage de la date
allowOtherPosts: true, // Ne pas afficher uniquement les posts de l'auteur mais aussi celles des autres
access_token: null, // L'access token indispensable
messages:{ // Les messages affichés
nodata: "No data available.",
notmore: "No more posts.",
loadmore: "load more",
notfound: "Feed not found"
}
};
Au rayon des nouveautés, il y a maintenant en plus de pouvoir personnaliser le code html, la possibilité de :
- Charger plus d’informations en cliquant sur un bouton
- Choisir de remplacer ou non le contenu déjà affiché par les nouvelles informations
- Choisir d’afficher les posts de l’auteur et celle des autres
- Traduire les messages
A venir
Si le widget vous plait, je vais tâcher de rendre le widget disponible sur WordPress. Alors n’hésitez pas à commenter cet article ! 
Démo & Téléchargement
Pour voir le script en action, munissez-vous de votre access_token et rendez-vous ici : Affichage d’un mur Facebook.
Récupérez les sources.
Ces articles peuvent aussi vous intéresser :
13 commentaires
Laisser une réponse
Encore bravo, pour cette nouvelle version !
Mais on ne peut pas récupérer les sources. Petit bug ?
Cordialement
C’est corrigé ! Merci de l’avoir souligné
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
Merci également, très bon travail !
Si je veux utiliser ce widget pour afficher sur mon site les derniers statuts de mon mur FB, il faut nécessairement que les visiteurs de mon site aient un access token pour visualiser le contenu ?
Bonjour,
Je te félicite pour ce tuto, ça marche parfaitement.
Une petite question:
avez vous une idée si c’est possible de répondre aux messages reçu sur le mur directement via ce widget?
Très bon travail .
Bonjour,
Merci pour ce tuto qui est vraiment bien fait !
En revanche, j’ai un petit soucis… je pense que cela va vous paraitre minime :
- j’ai un compte Facebook avec des infos personnelles
- j’ai une fan page professionnelle où je mets des actus dessus dont je suis l’administrateur avec mon compte Facebook
Le problème, c’est qu’avec le tuto, j’arrive parfaitement à afficher le mur personnel, lié au compte Facebbok, mais je ne comprends pas comment aller chercher non pas le mur du compte, mais le mur de la fan page.
Cela fait un bon petit moment que je cherche, et il y a vraiment quelque chose qui m’échappe, mais je ne sais pas à quel niveau… à la création même de l’application ?
Un grand merci d’avance pour votre aide.
Bon et bien j’ai finalement réussi, en utilisant non pas le nom de la page (comme Disneypixar dans l’exemple) mais l’ID de la page.
Avec son nom, ça ne fonctionne pas…
Oui ça dépend des comptes, certains ont un identifiant numérique et d’autres utilisent un nom, je pense qu’avec l’ID numérique, cela marche tout le temps.
Merci pour la réponse…
Et sinon, je me posais une petite question concernant l’access_token :
si on l’utilise en paramètre pour afficher le mur d’une fan page, cela sous-entend que n’importe qui en grattant un minimum dans le code JavaScript peut disposer de ce code, et du coup le réutiliser pour récupérer les infos du mur sur n’importe quel autre site ?
Est-ce que je me trompe ?
Si non, il y a-t-il un moyen pour protéger l’accès au code JS, ou bien pour ne pas donner de visibilité à la variable access_token ?
Parce que cela me pose quand même une question de sécurité, à savoir que quelqu’un de mal intentionné peut à volonté utiliser les données Facebook inhérentes au compte en question….
Oui tout à fait, cela dit, l’accès est définit à de la lecture seule, donc aucune modification ne peut être effectuée.
Après tu peux modifier le code pour utiliser un hash (un genre de base64) pour encoder l’access_token.
Salut Gui !
OK, oui si ce n’est que de la lecture seule, c’est vrai que ça limite quand même les possibilités de personnes malveillantes…
Sinon, si on veut vraiment sécuriser au mieux, peut-être mettre l’access_token en base de données, et aller le récupérer en Ajax via un script PHP…
Qu’en penses-tu ?
Et sinon, as-tu des nouvelles quant à cette question de l’access_token qui serait limité dans le temps ?
Re !
Bon… j’ai fait un petit essai en passant mon access_token en BDD et en allant le récupérer en Ajax avant de la passer en paramètre du graph de Facebook !
Et ça fonctionne bien ! Au moins l’acess_token n’est pas visible et il faut quand même pas mal bidouiller pour pouvoir le récupérer…
Et puis en +, ça permet de facilement mettre à jour ce fameux code s’il est amené à changer (dans l’attente de ta réponse par rapport à mon post précédent) via un backoffice !
Un avis ? Une remarque là-dessus ?