SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

288 Plugins, 197 contribs sur SPIP-Zone, 212 visiteurs en ce moment

Accueil > Interactivité, échanges > Recommandation Sociale > Microblogage > Archives > Publier un fil Twitter avec JQuery

Publier un fil Twitter avec JQuery

23 juillet 2009 – par Robert Sebille – commentaires

8 votes

Ceci est une ARCHIVE, peut-être périmée. Vérifiez bien les compatibilités !

Publier les derniers tweets d’un compte twitter avec du javascript.

Ce plugin reposait sur l’API v1 de Twitter, fermée le 11 juin 2013. Il n’est plus fonctionnel

De quoi s’agit-il ?

Il s’agit d’intégrer dans un squelette Spip 1.9.2 ou 2.0 le « jQuery plugin for Twitter » de Damien du Toit
, disponible ici.

Tout de suite : « les démos, les démos, les démos ! » ;) :
-  sur le site de l’auteur
-  et sur mon blog qui-n’avance-pas-très-vite ;), en bas à gauche.

Creative Commons BY NC Attention, que le code de « jQuery plugin for Twitter » est sous licence Creative Commons Attribution-Non-Commercial et que vous ne pouvez donc pas l’utiliser pour des applications commerciales sans autorisation de l’auteur.

NB : Damien du Toit a appelé son script plugin, pour ne pas confondre avec les plugins de spip, je parlerai de plugin quand il s’agit d’un plugin de Spip, et de « plugin » quand il s’agit du code de Damien du Toit.

Procédure

1. Pour Spip 1.9.2.x uniquement

Spip 2.0, vous pouvez aller directement en 2. Installer et configurer le code.

La librairie jquery utilisée par spip 1.9.2 est la version 1.1, et celle-ci provoque une erreur javascript [1] avec le code du « plugin ». La remplacer « en dur », par une version plus récente, dans les fichiers de votre spip 1.9.2 va, lui, provoquer des problèmes dans l’espace privé qui semble un aficionados de jquery 1.1 [2] ;) Bref, on a besoin d’une version jquery plus récente que la 1.1.

Pour résoudre ces problèmes, on va installer le plugin jquery 1.2.6 pour Spip 1.9.2x de Patrice Vanneufville, disponible ici

Bien. Maintenant que ce plugin est installé [3] et activé, continuons.

2. Installer et configurer le code

A) Téléchargez le « plugin » jQuery pour twitter de Damien du Toit à partir de cette page dejà citée, décompressez, et mettez au frais dans un de vos répertoires locaux.

B) Dans vos squelettes, entre les balises <head> </head> :
-  Insérez un lien vers la feuille de style du « plugin » :


en remplaçant <votre_chemin_vers> par le chemin réel qui existe dans l’architecture de votre site en ligne vers l’endroit où vous chargerez la feuille.
pour exemple, chez moi, c’est « #CHEMIN{styles/normal/jquery.twitter.css} », autrement dit, <dossier_squelette>/style/normal/jquery.twitter.css

-  Insérez ensuite - si ce n’est pas déjà fait - la balise Spip

-  APRES la balise #INSERT_HEAD, insérez le lien vers le code javascript du « plugin », soit :


en remplaçant <votre_chemin_vers> par ... etc.

-  Encore APRES l’insertion précédente, et toujours ENTRE les balises <head> </head>, insérez et configurez le code suivant :

en y remplaçant <votre_login_twitter> par votre vrai login Twitter.
Vous pouvez aussi remplacer « Charge les tweets ... » par « Ouais, ça twiste ... » si ça vous chante, mais attention si vous manipulez les chaînes de caractères du code, à ne pas y mettre de guillemets !

-  Voilà, c’est fini pour le code entre les balises <head> </head>. Pour choisir l’endroit où afficher les tweets, il vous reste à insérer le code

où vous voulez dans le corps (entre les balises <body> </body>) de vos squelettes.

3. Mettre à jour votre site en ligne


-  Chargez sur votre site en ligne les squelettes que vous avez modifiés.
-  Chargez jquery.twitter.js et jquery.twitter.css dans leurs répertoires respectifs, correspondant aux <votre_chemin_vers> expliqués ci-dessus.
-  Chargez l’image loader.gif dans le même répertoire que jquery.twitter.css
-  Videz, fermement mais sans désemparer, tous les caches, Spip et navigateur, rechargez la(es) page(s) de votre site où seront affichés les tweets, et (espérons le ;), admirez.

Il vous reste maintenant sans doute à adapter la présentation des tweets à celle de votre site, ce que vous pourrez faire aisément avec avec la feuille de style jquery.twitter.css.

Tests effectués avec succès

-  Spip : 1.9.2 et 2.0.2 [4].
-  Navigateurs : Firefox 3.0.3 sous Linux. IE6, IE7 et Safari 3.1.2 sous Windows XP (dans une vm).

Bon, vous voilà prêt à lancer le tweet ;)

Notes

[1"Access to restricted URI
denied", autrement dit, cette version de jquery n’accepte pas des requêtes Ajax entre domaines différents, soit ! ;)

[2Les jolis rollovers javascript des menus ne fonctionneront plus.

[3Comment installer un plugin ? Voyez la doc de Spip ici

[4Le principal problème rencontré étant la version trop ancienne de jQuery dans Spip 1.9.2, la version de jQuery de Spip 2.0.2 étant, elle, suffisante, la contrib devrait donc normalement fonctionner pour Spip > 2.0.2

Dernière modification de cette page le 13 juin 2013

Retour en haut de la page

Vos commentaires

  • Le 11 octobre 2010 à 15:04, par filnug En réponse à : Publier un fil Twitter avec JQuery

    dans le même principe, il y a également le tutorial d’Arno sur paris beyrouth.
    Il a l’avantage d’être très simple et de permettre d’utiliser des balises spip !

    http://www.paris-beyrouth.org/tutoriaux-spip/article/afficher-des-messages-twitter-sur

    • Le 7 octobre 2011 à 13:48, par ? En réponse à : Publier un fil Twitter avec JQuery

      Apparement, il n’y a plus les fux rrs sur twitter... Ce qui fait que la propo de Paris-B ne marche plus...

    Répondre à ce message

  • Le 15 janvier 2010 à 11:08, par Djyp En réponse à : J’aime Tweet’n’SPIP

    Bon j’ai voulu tenter le jQuery mais frnachement quand on voit Tweet’n’SPIP c’est beaucoup plus facile ^^ MERCI MERCI MERCI !! Faut intégrer ton plugin à SPIP-Contrib !!

    • Le 15 janvier 2010 à 23:53, par Robert Sebille En réponse à : J’aime Tweet’n’SPIP

      > “Faut intégrer ton plugin à SPIP-Contrib !!”

      Pourquoi, puisque c’est fait ? ;)

      Merci à Dr Abdou de l’avoir fait, je n’en n’espérais pas tant de cette petite contrib ;), et j’espère que son plugin sera publié dans un un article officiel sur spip-contrib.

      bien à toute la communauté de spip-contrib ;)

    Répondre à ce message

  • Le 20 octobre 2009 à 17:05, par Dr Abdou En réponse à : Publier un fil Twitter avec JQuery

    Salut tout le monde

    Découvrant cette contrib et disposant d’une matinée de calme, je l’ai adaptée sous forme de plugin, histoire de faciliter la mise en place.
    En attendant un article officiel sur spip-contrib et la mise à disposition sur la zone, je vous le donne sur un spip tout neuf (on dirait presque que je l’ai monté juste pour ça).
    J’ai appelé le plugin Tweet’n’SPIP.
    La mise en place est simple. Il s’installe comme n’importe quel autre plugin, la config se fait par CFG.
    Reste à intégrer le fil twitter dans vos squelettes a travers la balise #TWEETNSPIP.
    Pour une démo : http://wakzine.com/

    amitiés

    Répondre à ce message

  • Le 17 octobre 2009 à 09:19, par Robert Sebille En réponse à : Publier un fil Twitter avec JQuery

    Vérifiez votre syntaxe de la balise #CHEMIN ?

    #CHEMIN(accolade)paramètres(fin accolade)
    et pas
    (parenthèse)#CHEMINparamètres(fin parenthèse)

    Dans vos exemples :
    href="#CHEMIN{jquery.twitter/jquery.twitter.css}"
    et pas
    href="(#CHEMINjquery.twitter/jquery.twitter.css)"

    href="#CHEMIN{jquery.twitter/jquery.twitter.js}"
    et pas
    href="(#CHEMINjquery.twitter/jquery.twitter.js)"

    Bien à vous.

    • Le 18 octobre 2009 à 19:21, par greg En réponse à : Publier un fil Twitter avec JQuery

      Re-bonjour, effectivement cela marche, mes parenthèses étaient en trop. J’avais bien placé les accolades (mais oublié de le préciser dans mon précédent post), mais j’avais ajouté des parenthèses inutliles.

      Merci à vous !

    Répondre à ce message

  • Le 15 octobre 2009 à 17:00, par greg En réponse à : Publier un fil Twitter avec JQuery

    Salut, je n’arrive pas à faire marcher ce « plugin » moult intéressant.

    Faut-il activer la compression des scripts javascripts dans la configuration ?

    Je suis en version 2.0.8 (en version locale).
    J’ai installé les deux fichiers .css et .js et le gif loader dans le même répertoire jquery.twitter, dans mon répertoire squelettes.
    Dans mon squelette perso « inc-head.html » j’ai écrit ceci :

    (crochets)(signe inférieur)link rel=« stylesheet » href=« (#CHEMINjquery.twitter/jquery.twitter.css) » media=« all » type=« text/css »(signe supérieur)(fin de crochets)

    Et après la balise #INSERT_HEAD, ceci :

    (signe inférieur)script type=« text/javascript » src=« (#CHEMINjquery.twitter/jquery.twitter.js) »signe supérieur)(balise fermeture de /script)

    Cela ne donne rien. J’ai noté aussi que dans la version 2.0.8 Les lignes de liens vers les feuilles de style dans le head se ponctuent par un « pipe » + direction_css .

    Est-ce un problème de chemin, de version, de compactage ?
    Si j’ai bien suivi, il n’y rien a mettre dans le répertoire plugin, pour le versions supérieures à 2.0.8 ?

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Photoswipe

    18 septembre 2016 – 35 commentaires

    Une lightbox javascript responsive. PhotoSwipe est une boîte multimédia — comme la Mediabox installée en série avec SPIP — qui permet de zoomer à la taille réelle des images et qui gère intelligemment les légendes. Le plugin est basé sur la librairie (...)

  • Japibas, squelette responsive

    11 octobre 2013 – 96 commentaires

    Japibas est un squelette responsive, multilingue (français, anglais et espagnol), dont l’habillage conviendrait à un site de type blog ou webzine. Le graphisme est inspiré du template Wordpress Japibas réalisé par Jesper Johansen et distribué sous (...)

  • GIS 4

    11 août 2012 – 1417 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Plugin Domlang : Domaines par secteur de langue

    4 septembre – commentaires

    Domlang est un plugin qui permet d’associer un nom de domaine ou un sous-domaine à un secteur de langue. Ce plugin convient pour un site qui utilise des secteurs de langues. En configuration, pour chaque secteur, vous pourrez définir une URL (...)

  • Menu de langues sous forme de liens

    30 novembre 2009 – 121 commentaires

    Par défaut, le menu de langue de SPIP s’affiche : Sous la forme d’une liste déroulante ; En affichant toutes les langues du site, qu’elles soient utilisées ou non (c’est à même si elles ne sont pas affectées à au moins un article ou une rubrique) ; Sans (...)