Un compteur des liens bookmarkés dans delicious sur votre blog

 

 

Delicious (aussi connu sous son ancien nom, del.icio.us) est un site web social permettant de sauvegarder et de partager ses marque-pages Internet et de les classer selon le principe de folksonomie par des mots clés (ou tags).

En plus, les liens les plus sauvegardés sur Delicious se retrouvent en page d'accueil et peuvent donc faire bénéficier au site en question plein de visiteurs (un peu comme sur un Digglike, sauf qu'ici on ne vote pas, on sauvegarde). D'où l'importance de proposer à vos lecteurs de sauvegarder les articles de votre blog sur Delicious.

Antonnio Lupetti nous propose une astuce très simple pour avoir un bouton de sauvegarder sur del.icio.us associé à un compteur (qui affiche le nombre de sauvegarder déjà effectué) sur un blog blogger.

Pour l'avoir sur votre blog, il vous faut :

1. Se connecter à Blogger. Aller sur Mise en page, "Modifier le code html" et cocher sur "Développer des modèles de gadget"

2.  Mettre ce code avant la balise ]]></b:skin>

.delsquare{
font-family:Arial;
background:#0033CC;
padding:2px 4px;
font-weight:bold;
font-size:12px;
color:#FFFFFF;
}

3. Pour avoir un compteur des bookmark de l'url principale de votre blog (et proposer aux visiteurs de le sauvegarder), il vous faut : 

a.  Vous connecter à votre compte Delicious

b. Cliquer sur le lien "look up a url"

c. Mettre l'url de votre blog et cliquer sur la flèche

 

d. Sur la page qui s'affichera, vous aurez le nombre des fois et d'utilisateurs qui ont sauvegardé l'url de votre blog sur delicious et le nombre des notes écrites à son sujet.

Ici, voyez sur la barre d'adresse, et prenez le nombre qui vient après delicious.com/url/

Ce nombre est l'identifiant du blog sur delicious et permettra de récupérer les données pour celui-ci dans le code que nous allons utiliser

e. Mettez le code suivant dans un widget "Html/Javascript" en prenant soin de remplacer votre identifiant par le nombre récupéré à l'étape précédente, http//urldevotreblog.com par l'url principal de votre blog, Nom de votre Blog | Petite description par les données y afférant  :

<div class='save-delicious'>
<a href='http://del.icio.us/post?url=http://urldevotreblog.com&title=Nom de votre Blog | Petite description' style='text-transform:none; border:none; text-decoration:underline' target='_blank'>
   <img src="http://tinyurl.com/2b5be8" align="absmiddle"/> Sauvegarder ce blog sur Delicious</a> comme les autres<b class='delsquare' id='Votre-identifiant'>0</b> heureux lecteurs
    <script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById("Votre-identifiant").innerHTML = urlinfo.total_posts;
}

</script>
<script src='http://badges.del.icio.us/feeds/json/url/data?url=http://urldevotreblog&callback=displayURL'></script>
</div>


4. Pour avoir un compteur des bookmark de chaque article de votre blog (et proposer aux visiteurs de le sauvegarder), il vous faut :

 

 

a. Se connecter à Blogger. Aller sur Mise en page, "Modifier le code html" et cocher sur "Développer des modèles de gadget"

b. Trouvez la ligne de code suivante :

 

<p><data:post.body/></p> 

 

Si vous voulez que  le lien apparaîsse après le titre de l'article, mettre le code de l'étape c, juste avant celui-ci. Au cas où vous voulez que le lien apparaisse à la fin de l'article, mettre le code de l'éape c juste après.

c. Voici le code à ajouter :

<a expr:href='"http://del.icio.us/post?url="+ data:post.url + "&title" + data:post.title' target='_blank'> <img src="http://tinyurl.com/2b5be8" align="absmiddle"/>Ajouter à del.icio.us</a>
sauvegardé par <span class='delsquare' expr:id='"a"+data:post.id'>0</span> utilisateurs

<script type='text/javascript'>
function displayURL(data) {
var urlinfo = data[0];
if (!urlinfo.total_posts) return;
document.getElementById('a<data:post.id/>').innerHTML = urlinfo.total_posts;
}
</script>
<script expr:src = '"http://badges.del.icio.us/feeds/json/url/data?url= " + data:post.url + "&callback=displayURL"'/>


d. Enregistrer votre modèle et allez admirer le résultat.

A+