Installez des infobulles illustrant les sites sur lesquels vos liens pointent

Lundi 30 octobre 2006

Installez des infobulles illustrant les sites sur lesquels vos liens pointent

Dans cet article je vais vous expliquer comment utiliser le service web Websnapr et en particulier leur javascript Preview Bubble qui permet de visualiser un thumbnail des sites web vers lesquels pointent vos liens.

Bon je sais, ce service n'est pas une nouveauté, ça buzz depuis une vingtaine de jours sur la toile à son sujet, mais bon je rédige quand je peux, let's go...

Prérequis

Comme vu ci-dessus, ce service utilise du javascript, amis over-bloggueurs, si vous n'êtes pas en mode Privilège ou Premium, vous ne pourrez pas l'utiliser.

Téléchargez le «kit» Preview Bubble

Le fichier previewbubble.zip contient tout le nécessaire pour vos jolies infobulles: fichiers javascript et image.

Dezipper ce fichier sur votre disque dur et passez à l'étape suivante.

Uploadez le fichier image

Uploadez le fichier bg.png chez votre hébergeur (hébergeur gratuit, espace de stockage Over-Blog, etc), et relevez son url.

Editez le fichier javascript

Editez le fichier previewbubble.js et remplacez bg.png par l'url relevée à l'étape précédente.

Ce remplacement ce fait vers la 10ème ligne du fichier, la ligne complète est:

var bubbleImagePath = 'bg.png';

Uploadez le fichier javascript

Uploadez le fichier previewbubble.js modifié sur votre espace de stockage et relevez l'url de ce fichier.

Insérez l'appel au javascript

Insérez, entre les balises <head> et </head> de votre blog le code suivant:

<script type="text/javascript" src="XXX/previewbubble.js"></script>

Où XXX/previewbubble.js est l'url complète du fichier previewbubble.js précédement uploadé. [Pour les webmestres utilisant des adresses relatives, vous savez comment faire].

Les Over-Bloggueurs peuvent insérer le code ci-dessus en mode source de leur entête.

Utilisez previewbubble

Pour ceux qui aiment le cambouis: méthode direct par le code HTML

Dorénavant, quand vous voulez qu'un lien affiche le thumbnail du site web vers lequel il pointe vous devez rajouter dans le lien l'attribut:

class="previewlink"

Par exemple avec ce code:

Vous obtiendrez ce lien

Pour les over-bloggeurs qui n'aiment pas le cambouis: méthode simple par l'éditeur

Pour créer ce lien suivez les étapes suivantes:

1/ Saisir la phrase ce lien
2/ Sélectionner cette phrase,
3/ Cliquer sur le bouton de la barre d'outils représentant un petit maillon et permettant d'éditer/modifier un lien,
4/ Dans le premier onglet du formulaire de création de lien, saisir l'URL du lien (dans notre exemple http://www.peutetreunereponse.net),
5/ Dans l'onglet Avancé, saisir previewlink dans le champ Classe de Feuille de style.

Bon blogging.

- Voir les commentaires - Publié dans : Webdev

Précédent : Scriptaculous: Utilisation des effets Retour à l'accueil Suivant : Supprimer la boîte à outils sur les...