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 ;)
Aucune discussion
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 :
|
