ACCUEIL > TUTORIAUX SPIP

AFFICHER DES MESSAGES TWITTER SUR SON SITE

[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).


Un message, un commentaire ?
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)