SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 250 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

  • Adaptive Images

    15 novembre 2013 – 66 commentaires

    Un plugin pour permettre aux sites responsive d’adapter automatiquement les images de la page à l’écran de consultation. Adaptive Images, que l’on pourrait traduire par Images adaptatives, désigne la pratique qui vise à adapter les taille, (...)

  • Métas

    8 août 2009 – 50 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • Brownie

    6 juillet 2012 – 43 commentaires

    Brownie est une adaptation pour Zpip du thème du même nom initialement développé par Egrappler.com. Présentation Brownie est un thème Responsive à deux colonnes. La démonstration ci-dessous utilise la version 2.0.0 de Brownie, la dist de SPIP3 (...)

  • Métas +

    3 décembre – 13 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Acces Restreint 3.0

    11 décembre 2008 – 785 commentaires

    Le plugin accès restreint permet de définir et de gérer des zones de l’espace public en accès restreint. Cette version du plugin a été redévelopée et optimisée tout spécialement pour SPIP 2.0. Il en découle une amélioration des performances sur les gros (...)

Ça spipe par là