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.
38 commentaires
Laisser une réponse

merci pour ce tuto très bien expliquez…
The Candy Smash hack représente renommé tel très recherchée parmi este grand fama de internautes en esprit de
l’aide qu’il leur fournit.
merci pour ce tuto très bien expliquez…
if any time please visit our website.
See: this kind of hack performs more effectively
whenever your mobile color is orange and without sign in established (blank).