La nouvelle version de Delicious est sortie le 31 Juillet pour le plus grand plaisir de ses utilisateurs qui ont pu apprécier quelques nouvelles fonctions et surtout un habillage enfin digne du plus grand service de social bookmarking actuel.

Malheureusement l’équipe a limité l’affichage de vignettes à la page d’accueil du site, sans doute pour limiter le trafic généré par ses millions d’utilisateurs. Si, comme moi, vous avez besoin de repères visuels pour utiliser confortablement ce genre de service, voici une petite manipulation qui vous permettra d’afficher les vignettes des liens Delicious sur toutes les pages du site avec Firefox.

Tout d’abord vous aurez besoin de l‘extension GreaseMonkey pour Firefox. Cette extension permet de modifier l’affichage de certains sites grâce à des scripts. Il existe des milliers de styles prédéfinis pour la plupart des sites les plus fréquentés du web, vous pourrez les trouver regroupés sur Userscript.org.

Après avoir installé GreaseMonkey et redémarré Firefox, vous devrez installer le script Delicious 2.0 Thumbs. Ce script très simple modifie l’affichage des pages Delicious pour y placer une vignette devant les liens.

Le script fonctionne dès qu’il est installé. Il vous suffit d’ouvrir ou de recharger la page Delicious pour voir les vignettes apparaître. Malheureusement le script tente de générer des vignettes à certains endroits inutiles, comme les “Tag Bundles” (groupes de tags) de la colonne de droite, ce qui a pour effet de les rendre illisibles.

Voici un moyen très simple de corriger cette erreur. Tout d’abord repérez l’icône GreaseMonkey en bas à droite de la fenêtre Firefox. Faites un clic-droit sur cette icône et cliquez sur “gérer les scripts”. La fenêtre de gestion des scripts apparaît alors, vous pourrez y trouver la liste de vos scripts GreaseMonkey.

Cliquez sur le script Delicious 2.0 Thumbs, puis sur le bouton éditer. La première fois le plugin aura besoin que vous lui indiquiez l’emplacement d’un éditeur de texte (vous pouvez lui indiquer n’importe quel éditeur de texte ou éditeur HTML/CSS, si vous n’en avez pas choisissez Notepad comme indiqué dans la fenêtre).

Le fichier du script s’ouvre alors dans l’éditeur que vous avez choisi. Comme vous le voyez le script est très simple et la modification aussi. Sélectionnez la ligne 14:

var tags = document.getElementsByTagName('h4');

Et remplacez-la par ces lignes :

var tags2 = document.getElementById('yui-main')
var tags = tags2.getElementsByTagName('h4');

Enregistrez vos modifications puis rechargez votre page Delicious. Les vignettes mal placées ont disparu.

Si vous souhaitez modifier la taille de la fenêtre, il vous suffit de retourner éditer le script et de modifier les valeurs width et height des lignes :

thumb.style.width = "100px";
thumb.style.height = "45px";

Notez que je ne suis pas le créateur de cette extension, ni de ce script. J’ai juste corrigé l’erreur d’affichage des vignettes. La modification est très simple, au lieu de rechercher tous les liens en valeur H4 de la page pour y placer une vignette, le script ne placera de vignette que devant les liens en H4 de la colonne centrale.

L’affichage des vignettes est très rapide et ne demande pas de ressources supplémentaires à Delicious puisque les vignettes sont générées par un service extérieur.

GreaseMonkey vous permet de modifier l’affichage de plusieurs sites que vous utilisez sans doute. Je l’utilise par exemple pour imposer un thème à Google Reader (capture d’écran ci-dessus), si ce thème vous intéresse vous le trouverez ici. Cliquez sur le bouton “load as user script” et pensez a modifier l’URL des pages concernées dans la fenêtre de gestion des scripts (si vous utilisez Google.fr à la place de Google.com).

      Articles en rapport :

• Mahalo simplifie le social bookmarking
• Digg-like en fête
• Améliorez votre navigation avec Tab Mix Plus
• Enrichissez votre contenu avec Apture
• Que manque-t-il à WordPress ?