1

Afficher des messages Twitter sur son site

23 octobre 2009
par ARNO*

[Niveau : facile] Afficher automatiquement les messages d’un compte Twitter sur son site SPIP est particulièrement facile : il suffit d’utiliser cette (extrêmement) ancienne technologie baptisée « flux RSS ». De la même façon qu’on utilise les flux RSS pour « syndiquer » d’autres sites, on peut parfaitement les utiliser pour afficher les derniers messages d’un compte Twitter.

Pour l’affichage sur le site public, les boucles fournies par SPIP fonctionnent très bien, mais nous allons tout de même les modifier pour obtenir une présentation plus adaptée.

Commençons par activer la gestion des flux RSS sur notre site SPIP :

Dans la page « Configuration du site », dans le pavé « Référencement de sites et syndication », j’active « Gérer un annuaire de sites Web » et je vérifie que « Utiliser la syndication automatique » est bien sélectionné. Avec ces réglages, mon site est prêt à récupérer automatiquement les dernières publications de sites Web (et donc, de Twitter) à partir de leurs flux RSS.

Je me rends maintenant sur le compte Twitter que je souhaite récupérer :

Dans la colonne de droite (ici entouré en rouge), je trouve le lien « RSS feed for XXX’s tweets ». Je récupère l’URL de ce lien. Par exemple: :

Je me rends dans mon espace privé (de SPIP), je me place dans la bonne rubrique, et je « référence un nouveau site » :

Je recopie l’adresse du flux RSS dans « Référencement automatisé d’un site » ; je clique une première fois sur « Ajouter », les champs suivants doivent se remplir automatiquement avec les informations en provenance du compte Twitter. Je ne modifie que le « Nom du site », notamment en supprimant la mention « Twitter » qui s’y trouve (et qui me semble superfétatoire).

Une fois ces informations enregistrées, le compte Twitter est récupéré automatiquement par mon site SPIP. Je pense évidemment à modifier le statut de ce site syndiqué en « Publié » pour qu’il apparaisse sur le site public.

Les squelettes par défaut de SPIP affichent déjà les derniers messages. Mais la présentation ne me plaît pas beaucoup : le message contient pour chaque entrée le nom du compte Twitter (suivi de deux points), et le lien hypertexte couvre tout le message, et ne prend pas en compte les éventuels liens insérés dans le message (pourtant l’un des intérêts principaux de Twitter).

Je vais commencer par modifier la boucle de sommaire.html, qui affiche les derniers messages de tous les sites syndiqués. Je veux obtenir ceci :

Je recherche la <BOUCLE_syndic>, et je la remplace par les deux boucles suivantes :

  1. <B_twitter>
  2. <div class="menu">
  3. <h2>Sur Twitter</h2>
  4. <ul>
  5. <BOUCLE_twitter(SYNDIC_ARTICLES) {age<180} {par date}{inverse} {0,6} {url==^http://twitter\.com}>
  6. <li>
  7. <a href="#URL_ARTICLE">#NOM_SITE</a> &ndash;
  8. [(#TITRE|replace{^.*\:}|propre|ptobr)]
  9. </li>
  10. </BOUCLE_twitter>
  11. </ul>
  12. </div>
  13. </B_twitter>
  14.  
  15.  
  16. [(#REM) Sur le Web ]
  17. <B_syndic>
  18. <div class="menu">
  19. <h2><:nouveautes_web:></h2>
  20. <ul>
  21. <BOUCLE_syndic(SYNDIC_ARTICLES) {age<180} {par date}{inverse} {0,6} {url!==^http://twitter\.com}>
  22. <li>[(#DATE|affdate_jourcourt) &ndash; ]<a href="#URL_ARTICLE"[ title="(#NOM_SITE|attribut_html|couper{80})"] class="spip_out">#TITRE</a></li>
  23. </BOUCLE_syndic>
  24. </ul>
  25. </div>
  26. </B_syndic>

Télécharger

La <BOUCLE_syndic> ne change presque pas : j’ajoute simplement un critère lui interdisant d’affiche les messages dont l’adresse d’origine commence par http://twitter.com. La <BOUCLE_twitter> est une nouvelle boucle, très similaire, qui se contente d’afficher différemment les messages :
— j’affiche le nom du site, avec un lien vers le message spécifique ;
— j’affiche ensuite le #TITRE du message (le titre ou le texte, ils sont identiques dans le flux RSS), que je filtre pour supprimer le début (je supprime tout jusqu’aux premiers deux-points), puis je lui applique |propre (jolie typo et, surtout, transformation des URL en véritables liens hypertextes).

Dans rubrique.html, traitement similaire, mais en remplaçant la <BOUCLE_sites>, en cherchant à obtenir une présentation légèrement différente :

Le nouveau code est :

  1. [(#REM) Twitters de la rubrique ]
  2. <B_twitter>
  3. <div class="menu">
  4. <h2>Sur Twitter</h2>
  5. <ul>
  6. <BOUCLE_twitter(SITES) {id_rubrique} {par nom_site} {url_site==^http://twitter\.com}>
  7. <li>
  8. <a href="#URL_SITE">#NOM_SITE</a>
  9. <B_syndic_twitter>
  10. <ul>
  11. <BOUCLE_syndic_twitter(SYNDIC_ARTICLES) {id_syndic} {age<180} {par date}{inverse} {0,6}>
  12. <li>
  13. [(#TITRE|replace{^.*\:}|propre|ptobr)]
  14. </li>
  15. </BOUCLE_syndic_twitter>
  16. </ul>
  17. </B_syndic_twitter>
  18. </li>
  19. </BOUCLE_twitter>
  20. </ul>
  21. </div>
  22. </B_twitter>
  23.  
  24.  
  25.  
  26. [(#REM) Sites de la rubrique ]
  27. <B_sites>
  28. <div class="menu">
  29. <h2><:sur_web:></h2>
  30. <ul>
  31. <BOUCLE_sites(SITES) {id_rubrique} {par nom_site} {url_site!==^http://twitter\.com}>
  32. <li>
  33. <a href="[(#ID_SYNDIC|generer_url_entite{site,'','',#CONNECT})]">#NOM_SITE</a>
  34. <B_syndic>
  35. <ul>
  36. <BOUCLE_syndic(SYNDIC_ARTICLES) {id_syndic} {age<180} {par date}{inverse} {0,3}>
  37. <li><a href="#URL_ARTICLE" class="spip_out">#TITRE</a></li>
  38. </BOUCLE_syndic>
  39. </ul>
  40. </B_syndic>
  41. </li>
  42. </BOUCLE_sites>
  43. </ul>
  44. </div>
  45. </B_sites>

Télécharger

Ici, on présente les messages en les groupant flux RSS par flux RSS (alors que sur la page d’accueil, on mélange les messages des différents flux RSS).

  • filnug
    Octobre 2010

    Bonjour !

    Merci pour ce tuto vraiment excellent.

    J’ai un souci avec 2 flux rss enregistrés qui génèrent 2 listes distinctes.

    Y a t il un moyen de mélanger les tweets de différents flux ?

    Merci !

  • frth
    Mars 2011

    Merci ! Pour filnug, relis le dernier paragraphe, tu auras la réponse à ta question il me semble...

  • blomki
    Août 2011

    Hélas, depuis que Twitter a remanié son interface, les flux RSS ont disparu.

    En essayant de le recréer, le flux n’est pas reconnu par SPIP : http://api.twitter.com/1/statuses/user_timeline.rss?screen_name=nom_ecran

    Pour l’instant, à part un plugin PHP, je ne vois pas trop comment faire...

  • atchoum
    Mai 2012

    SPIP 3 le fait avec la boucle DATA et même le fait finement : http://spip3.quejai.me/rss-afficher-les-resultats-d-une-recherche-twitter

  • Spipnaute
    Octobre 2012

    Bonjour, Je répète ce que dit blomki : "Hélas, depuis que Twitter a remanié son interface, les flux RSS ont disparu."

    Quelle solution proposez vous avec la nouvelle interface de Twitter ? Je travaille avec Spip 2.0.9

    Merci d’avance.

  • Valéry
    Avril 2015

    Il existe un plugin twitter dont les modèle sont basés sur la boucle DATA : http://contrib.spip.net/Twitter-4393

  • Sophie
    Mai 2015

    J’aimerais énormément en savoir plus sur ce thème.

    tee shirt mode homme t shirt a la mode tee shirt fashion homme tee shirt tunique

    top femme pas cher robe tee shirt haut bustier femme tshirt homme tee shirt noir homme haut habillé tee shirt jack and jones tee shirt homme fashion tee shirts femme mot avec t haut cache coeur polo manche courte homme pour femme

  • Emmanuel
    Mai 2015

    J’ai bien l’impression que je ne lis pas ce propos pour la première fois. Est-ce que vous postez dans un journal ? Dans tous les cas, je trouve que votre démonstration est vraiment très bien faite. :-)

    defiscalisation loi scellier plafond de loyer loi Pinel immobilier Pinel 2015 loi Pinel immobilier ancien

    loi Pinel principe zones Pinel programme immobilier loi Pinel loi Pinel site officiel logement loi Pinel Pinel loi logement nouvelle loi Pinel http://www.simulation-immobilier-pinel.com logements Pinel loi Pinel sur le logement zones Pinel locatif Pinel loi sur les logements simulateur Pinel

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.