Publier un fil Twitter avec JQuery

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
licence Creative Commons Attribution-Non-Commercial Unported License

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 » :

<link rel="stylesheet" href="<votre_chemin_vers>/jquery.twitter.css" media="all" type="text/css">


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

#INSERT_HEAD

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

<script type="text/javascript" src="<votre_chemin_vers>/jquery.twitter.js"></script>


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 :

<script type="text/javascript">
        <!--//--><![CDATA[//><!--
        $(document).ready(function() {
                $("#twitter").getTwitter({
                        userName: "<votre_login_twitter>",
                        numTweets: 5,
                        loaderText: "Charge les tweets...",
                        slideIn: true,
                        showHeading: true,
                        headingText: "Derniers tweets",
                        showProfileLink: true
                        });
                });
        //--><!]]>
</script>

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

<div id="twitter"></div>

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

Discussion

5 discussions

  • 1

    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

    • 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

  • 1

    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 !!

    • > “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

  • 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

  • 1

    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.

    • 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

  • 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

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

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

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

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom