Installez des infobulles illustrant les sites sur lesquels vos liens pointent

Publié le par PêUR

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>

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:

<a class="previewlink" href="http://www.peutetreunereponse.net">ce lien</a>

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.

 

 

 

Publié dans Webdev

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article

isabelle 27/05/2007 14:00

Bonjour
Merci pour ce tuyau !
Juste une question, j'ai testé cela sur une image..et j'ai un forbidden request ?
Cela ne fonctionne uniquement que sur un lien textuel ?
Merci de votre aide!

PêUR 28/05/2007 20:38

Cela fonctionne uniquement sur une page HTML.

Miss Alfie 12/04/2007 13:27

Et sous mac, ça marche aussi ?...

Parce que si j'ai bien compris, c'est ce qui permet d'avoir un aperçu du site sur lequel on s'apprête à aller... Et comme je viens de passer en privilège, je veux en profiter !!!

PêUR 12/04/2007 15:31

Il suffit que ton navigateur accepte le javascript, en l'occurence, Safari et Firefox l'accepte sous mac.

Zanzibar 19/03/2007 11:51

Une autre solution est de passer par SNAP ANYWHERE, mais la question du gadget est clairement posée. Est-ce que mon blog doit ressembler à un sapin de noêl?
http://www.snap.com/about/spa1B.php

A moins que l'on puisse désactiver le snap preview dans les articles en appliquant la classe “snap_nopreview” ?

Avez-vous essayé cette méthode?

Cordialement,

PêUR 20/03/2007 10:29

Il existe de nombreux services ajoutant une visualisation des sites accessibles depuis un lien, personnelement je n'aime pas trop ça, c'est parfois long à s'afficher, ça ne donne pas spécialment une idée du site sur lequel on va être redirigé, bref je n'ai essayé que websnapr ;)

Zanzibar 18/03/2007 18:09

Re salut,

j'ai bien suivi les instructions, mais en fait je voulais mettre les screenshots sur les liens qui sont dans mon module "gestion des liens". Si ce n'est pas possible je n'ai pas d'autre choix que de passer par le module texte libre.
Merci me confirmer.

PêUR 18/03/2007 20:23

Il faut effectivement passer par un module de texte libre.

Lacirone 05/03/2007 20:58

ici http://badhairdays.over-blog.com/ ça marche avec snap

PêUR 05/03/2007 22:56

Passe par snap alors, leurs serveurs sont sûrement plus efficaces.