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.
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 ;)
Discussions par date d’activité
5 discussions
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
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
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 :
Et après la balise #INSERT_HEAD, ceci :
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 :
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.
Suivre les commentaires : |