Afficher un mur Facebook sur votre site avec jQuery – Nouvelle version

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.