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

Publié par Gui dans Facebook, jQuery, Tutoriels

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

1 2
  1. BORDET Marc-Antoine

    Encore bravo, pour cette nouvelle version !

    Mais on ne peut pas récupérer les sources. Petit bug ?

    Cordialement

  2. BORDET Marc-Antoine

    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

  3. FredoZ

    Merci également, très bon travail !

  4. Sylvain

    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 ?

  5. Atef

    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 .

  6. Rémi

    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.

    • Rémi

      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…

    • Gui
  7. Rémi

    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….

    • Gui
      • Rémi

        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 ?

  8. Rémi

    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 ?

  9. sylvaing

    Bonsoir, veuillez pardonner mon inculture…
    J’ai enfin réussi à obtenir le fameux access_token, non sans mal (il semble que certains points du tuto diffère de la réalité, ou inversement 😉 Mais maintenant… Je les colle où dans les fichiers, le token et l’ID ? Et j’en fais quoi, des fichiers html, js et css ?
    Je les ai balancés sur mon site dans les dossiers adéquats, j’ai naïvement créé un module Joomla contenant le code html, dans l’espoir que ça m’ouvre une belle boîte de statuts FB à l’endroit voulu, mais ça ne fait que m’afficher la boîte où il faut rentrer l’ID et le token… Un peu d’aide serait vraiment la bienvenue.

  10. sylvaing

    Désolé, veuillez considérer mon commentaire précédent comme nul et non avenu (s’il y a moyen de le supprimer, n’hésitez pas). J’obtiens en effet le résultat voulu… Sauf que c’est ce module-là qui m’intéresse : http://www.guillaumevoisin.fr/jquery/tutoriel-graph-api-json-et-jquery-afficher-un-mur-facebook-sur-votre-site.
    J’ai des problème aussi le concernant, mais je suppose que je doive aller poser mes questions sur le bon topic, du moins si quelqu’un daigne se pencher sur mon triste sort.

  11. sylvaing

    J’enrage. J’arrive parfaitement à faire fonctionner ce widget, mais c’est de l’autre dont j’ai besoin : celui où il ne semble pas nécessaire d’entrer manuellement ID et token pour faire apparaître un mur facebook… Je n’obtiens qu’un triste et infini « Chargement du mur… » comme vous pouvez le constater : http://www.syl-20.net/jquery.facebook_feed/index.html.
    Grand merci pour votre aide !

    • Gui
  12. sylvaing

    Merci, voilà une réponse encourageante, qui semble signifier que tout n’est donc pas perdu !
    J’ai renseigné la bonne adresse de flux, et le « Chargement du mur… » a enfin disparu, mais ça ne semble pas suffire pour autant…

    http://www.syl-20.net/jquery.facebook_feed/index.html

    Pour l’erreur que tu as obtenu ça paraît normal, puisque dans mes vaines tentatives j’ai supprimé et recréé l’application FB au moins 265 fois 🙂 Par contre, la dernière a l’air de fonctionner mais je ne vois nulle part dans tes codes d’endroit où préciser les infos de l’application (app ID, app secret, etc.). Donc je fais quoi concernant l’app, je redemande un access_token ?

  13. sylvaing

    Génial, grand merci. En attendant j’avais réussi à mettre un module Joomla, mais ton plugin a beaucoup plus de gueule. Je vais te remercier officiellement sur mon site. Merci encore.

  14. sylvaing

    Voilà le résultat (je modifierai le nombre de posts plus tard) : http://www.syl-20.net/

    Quelques questions :

    – Y aurait-il moyen d’afficher une miniature de la vidéo quand c’est une vidéo qui est partagée ? (Voir 4ème résultat de mon mur.) Si non, une image de mon cru ? Là ça montre un minuscule carré et faut pas être myope pour le cliquer…

    – Y a-t-il moyen de faire apparaître le titre de l’album (+ lien) dans lequel a été postée une photo/vidéo ?

    – En cas de partage à partir d’un site externe, peut-on afficher le titre de la page + lien ?

    – Le 3ème résultat (vide), c’est un message posté sur l’un de mes groupes Facebook. Y a-t-il moyen de le faire apparaître, ou de supprimer carrément ce genre de résultats si c’est pas possible ?

    – Comment afficher une date + icône (comme sous les photos et vidéos) sous un simple statut texte ?

    – Comment changer la cible des liens ? (_blank au lieu de _self en l’occurrence.)

    – Enfin, comment ajouter au nom du membre un lien vers son profile FB ?

    J’en demande beaucoup sans doute…

  15. kevdu26

    Bonjour quel paramètre faut il mettre dans l’url pour n’afficher que les posts de l’auteur.

    Vous évoquez la variable « allowOtherPosts ».

    Est il possible d’écrire :
    https://graph.facebook.com/me/feed/?access_token=monAccesToken&allowOtherPosts=false

    • Gui
  16. Nicolas

    Bonjour,

    Merci beaucoup pour ce tutoriel, ça fonctionne super bien !

    J’ai une petite question : Comment peut-on faire pour récupérer une variable facebook ?

    J’ai essayer d’en appeler simplement une avec :
    document.write(« « );

    Mais ça ne fonctionne pas 🙁

    • Gui
      • Nicolas

        Oui, je voulais récupérer la photo de la page et son nom grâce aux variables du feed, mais je n’ai pas réussi et j’ai fait autrement avec la likebox de facebook.

        Suis-je le seul dont le feed ne fonctionne plus depuis un ou deux jour ?

  17. jcb

    Merci pour ce script et ce tuto.
    J’aimerais ajouter sur chaque post affiché un bouton « j’aime » comme sur un mur classique.
    Je ne trouve rien nul part la dessus.
    As-tu une idée ?

  18. kdj2

    Bravo pour cette réalisation, Un concurrent digne des rares modèles actuels payant disponible sur la toile. Toute les bases y sont.

    J’en profite pour répondre à jcb, il s’agit ici d’un module gratuit, le propriétaire n’est pas payés pour ajouter à la demande les différentes fonctionnalités demandées 😉 Cependant, en te basant sur la fonction like box proposée par Facebook, tu peux aisément ajouter le lien d’un bouton like dans le script JS qui génère chacun des articles. Tu n’aura plus qu’a traiter son positionnement en CSS.

    J’en profite également pour informer les futurs utilisateurs que la solution proposée pour générer un acces token, ne permet de générer qu’un jeton temporaire. Quelques recherches s’avèreront nécessaire pour obtenir votre jeton longue durée.

    Bonne continuation !

  19. kdj2

    Pour ceux qui peinerais à obtenir un access token longue durée (2mois au lieu d’une heure) : Voici une solution :

    https://graph.facebook.com/oauth/access_token?client_id=APP-ID&amp; client_secret=APP-SECRET& grant_type=fb_exchange_token& fb_exchange_token=Accestokencourtedurée

    Saisissez l’id de votre application la clé secrète et l’access token courte durée que vous obtenez avec la solution expliquée par GUI.

    Vous pourrez également automatiser la génération bimensuel de cet access token en PHP en utilisant les variable GET retournée par l’OPEN Graph.

    Bonne journée!

  20. Rolland

    Grands bravo et merci pour ce tutoriel ! Simple clair, qui évite les sdk ou autres https et me soulage de 4 jours de galère…
    Et justement parce que gratuité, principe de base du Web qui paradoxalement semble s’amenuiser en même temps que la croissance des réseaux sociaux, participons.

    Pour le access_token, celui que j’utilise a été généré il y a plusieurs mois et ne semble donc pas subir de contrainte de durée.
    Une fois l’appli créée, sans autre renseignement que le nom (Display Name), pour obtenir un APP_ID et un APP_SECRET,
    ces éléments ont été renseignés à la page https://graph.facebook.com/oauth/access_token?grant_type=client_credentials&client_id=APP_ID&client_secret=APP_SECRET
    Peut-être le grant_type qui fait la différence ?

    J’utilise le partage de liens
    http://www.facebook.com/sharer.php?s=100&p%5Btitle%5D=TITRE&p%5Burl%5D=URL&p%5Bimages%5D%5B0%5D=IMAGE&p%5Bsummary%5D=DESCRIPTION arrivé en 2012 qui permet de mieux gérer les informations à partager : titre, url, images, description différents de ceux de la page en cours entre autres (attention les image doivent avoir des dimensions minimales 250×250 il me semble ?).
    Dans ce tutoriel génial seules l’image 1 + l’url sont retenues et si il n’y a pas de message joint, ça fait un peu vide.
    Pour afficher les autres datas, name et description, il suffit de les récupérer dans le graph
    var data = {};

    data.picture = elt.picture;
    data.name = elt.name; //title
    data.description = elt.description; //summary

    if(elt.to)

    Et de les inclure dans variable markup
    markup: « {{if picture}}{{/if}}${from.name}${link}{{if description}}{{html description}}{{/if}}{{if name}}{{html name}}{{/if}}{{if type!=’status’}} {{/if}}${date}{{if likes}} ${likes[1]}{{/if}} »,
    qui n’est peut-être plus dans l’ordre original…

    Un lien utile utilisé dans le script
    https://graph.facebook.com/MA_PAGE/feed/?access_token=ACCESS_TOKEN&limit=NOMBRE_A_AFFICHER
    Il permet de voir l’ensemble des éléments du mur du compte ou de la page et donc de mieux comprendre le fonctionnement du script.

    J’espère avoir été clair et que ça pourra aider.

    Merci encore

1 2

Laisser une réponse


Post shadow