Wordpress Tips #2-logoVoici un tutoriel pour créer une barre de Social bookmarks pour partager vos articles sur les médias sociaux. Avec Photoshop, un peu de xhtml et la technique des Sprites css, nous allons voir qu’il n’est pas toujours obligatoire de passer par des plugins pour ajouter cette fonctionnalité à votre blog.

Vous avez été nombreux à me demander comment créer la barre d’icônes permettant de partager mes articles. J’ai déjà répondu à certains d’entre vous par mail et j’ai décidé d’y consacrer un article entier. Après tout, même si je n’aborderais que des notions déjà bien documentées sur le net, cela pourra peut-être servir à certains.

Voici à quoi ressemble ce bloc :

Social Bookmarks _ Illustration

Les icônes que j’ai utilisé ont été créées par Rogie King et sont disponibles gratuitement sur son site Komodo Media.

La barre de liens se compose d’une liste non-ordonnée ul/li dans laquelle j’ai placé 9 liens pour partager l’article sur :

  • Twitter
  • Delicious
  • Stumble Upon
  • Facebook
  • Digg
  • Technorati
  • Linked In
  • FriendFeed
  • dFloat

Comme je le disais précédemment, nous allons utiliser la technique des sprites pour ne créer qu’une seule image de fond contenant tous les logos dans les 2 états (normal et hover). L’image va se déplacer si le lien est survolé.

Voici un petit schéma pour mieux comprendre la construction :

All for Design : Social Bookmarks

Pour voir le rendu réel vous pouvez vous rendre à la fin de l’article ou aller faire un tour sur la page de démo.


Le code XHTML

Voici le code « classique » valable dans n’importe quelle page html :

<div class="example">
 <ul class="social-links">		
  <li><a class="twitter-link" rel="nofollow" href="http://twitter.com/home?status=VotreURL" title="Partagez cet article avec vos followers sur Twitter">Tweet this !</a></li>
  <li><a class="delicious-link" rel="nofollow" href="http://delicious.com/post?url=VotreURL" title="Bookmarkez cette page sur Delicious">Bookmarkez cette page sur Delicious</a></li>
  <li><a class="stumble-link" rel="nofollow" href="http://www.stumbleupon.com/submit?url=VotreURL&title=VotreTitre" title="Partagez cet article sur StumbleUpon">Stumble this !</a></li>
  <li><a class="facebook-link" rel="nofollow" href="http://www.facebook.com/sharer.php?u=VotreURL&t=VotreTitre" title="Partagez cet article sur Facebook">Partagez cet article sur Facebook</a></li>
  <li><a class="dig-link" rel="nofollow" href="http://digg.com/submit?phase=2&url=VotreURL" title="Submit this post to Digg">Digg this !</a></li>
  <li><a class="technorati-link" rel="nofollow" href="http://technorati.com/faves?add=VotreURL" title="VotreTitre">Ajoutez à vos favoris sur Technorati</a></li>
  <li><a class="linkdin-link" href="http://www.linkedin.com/shareArticle?mini=true&url=VotreURL&title=VotreTitre" title="Partagez cet article sur LinkedIn">Partagez cet article sur LinkedIn</a></li>
  <li><a class="friendfeed-link" rel="nofollow" href="http://friendfeed.com/?url=VotreURL&title=VotreTitre">Partager cet article sur FriendFeed</a></li>
  <li><a class="dfloat-link" rel="nofollow" href="http://designfloat.com/submit.php?url=VotreURL&title=VotreTitre" title="Float This!">Float This !</a></li>
 </ul>
</div>

Vous l’aurez compris il suffit de remplacer : « VotreURL » par l’url à partager et « VotreTitre » par un contenu approprié pour chaque balise « title ».


Le code pour Wordpress

Le code pour Wordpress est un peu différent puisqu’il existe des tags permettant de récupérer directement l’url de l’article ou du blog. Nous allons donc ajouter un peu de php dans notre code XHTML :

<div class="example">
 <ul class="social-links">			
  <li><a class="twitter-link" rel="nofollow" href="http://twitter.com/home?status=&agrave;&#160lire&#160:&#160http://tinyurl.com/api-create.php?url=<?php the_permalink(); ?>" title="Partagez cet article avec vos followers sur Twitter">Tweet this !</a></li>
  <li><a class="delicious-link" rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmarkez cette page sur Delicious">Bookmarkez cette page sur Delicious</a></li>
  <li><a class="stumble-link" rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur StumbleUpon">Stumble this !</a></li>
  <li><a class="facebook-link" rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&t=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur Facebook">Partagez cet article sur Facebook</a></li>
  <li><a class="dig-link" rel="nofollow" href="http://digg.com/submit?phase=2&url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg this !</a></li>
  <li><a class="technorati-link" rel="nofollow" href="http://technorati.com/faves?add=<?php bloginfo('url'); ?>" title="Ajouter <?php bloginfo('name'); ?> á vos favoris sur Technorati">Ajoutez <?php bloginfo('name'); ?> á vos favoris sur Technorati</a></li>
  <li><a class="linkdin-link" href="http://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>/&title=<?php echo urlencode(get_the_title($id)); ?>" title="Partagez cet article sur LinkedIn">Partagez cet article sur LinkedIn</a></li>
  <li><a class="friendfeed-link" rel="nofollow" href="http://friendfeed.com/?url=<?php the_permalink() ?>&title=<?php echo urlencode(get_the_title($id)); ?>">Partager cet article sur FriendFeed</a></li>
  <li><a class="dfloat-link" rel="nofollow" href="http://designfloat.com/submit.php?url=<?php the_permalink(); ?>&title=<?php echo urlencode(get_the_title($id)); ?>" title="Float This!">Float This !</a></li>
 </ul>
</div>

Explications :

Pour récupérer l’url de l’article :

<?php the_permalink(); ?>

Utilisez cette expression pour afficher le titre de l’article en encodant correctement les caractères spéciaux :

<?php echo urlencode(get_the_title($id)); ?>

Pour afficher le nom de votre blog Wordpress :

<?php bloginfo('name'); ?>

Pour afficher l’url de votre blog Wordpress :

<?php bloginfo('url'); ?>

Si l’url de votre article est trop longue, vous pouvez utilisez les service de TinyURL pour la raccourcir. C’est ce que nous utilisons dans le lien Twitter :

http://tinyurl.com/api-create.php?url=<?php the_permalink(); ?>

Le code CSS

La technique des Sprites vous oblige à repérer à l’avance la position des différents éléments dans votre image de fond.

Pour cela, ouvrez votre image dans Photoshop et notez les positions des pictos (coin haut-gauche de chaque picto).

Lorsque vous reporterez les positions dans vos styles, n’oubliez-pas de mettre un signe « - » devant car c’est bien le background qui se déplace sur le lien et non l’inverse.

Voici un petit schéma pour visualiser les positions des logos sur l’image :

All for Design : Social Bookmarks

Et maintenant le code :

/* Reset sur liste non-ordonnée */
ul,li{margin:0;padding:0;list-style:none;}

/* Placement horizontal des éléments */
.social-links li{display:inline;width:16px;}

/* Style généraux sur tous les liens de la liste*/
.social-links a {display:inline;float:left;width:16px;height:16px;margin:0 5px 0 0;font-size:0.01em;text-indent:-9999px;overflow:hidden;}

/* Ajout background-image + styles sur la liste */
.social-links{background: url(../img/links-bg.gif) no-repeat 0 0;width:196px;height:36px;padding:10px 5px;}

/* CSS Sprites : positionnement de l'image de fond sur chacun des liens */
.social-links .twitter-link:link,
.social-links .twitter-link:visited{background:transparent url(../img/social-icons.jpg) 0 0 no-repeat;}
.social-links .twitter-link:hover,
.social-links .twitter-link:active{background:transparent url(../img/social-icons.jpg) 0 -18px no-repeat;}

.social-links .delicious-link:link,
.social-links .delicious-link:visited{background:transparent url(../img/social-icons.jpg) -20px 0 no-repeat;}
.social-links .delicious-link:hover,
.social-links .delicious-link:active{background:transparent url(../img/social-icons.jpg) -20px -18px no-repeat;}

.social-links .stumble-link:link,
.social-links .stumble-link:visited{background:transparent url(../img/social-icons.jpg) -40px 0 no-repeat;}
.social-links .stumble-link:hover,
.social-links .stumble-link:active{background:transparent url(../img/social-icons.jpg) -40px -18px no-repeat;}

.social-links .facebook-link:link,
.social-links .facebook-link:visited{background:transparent url(../img/social-icons.jpg) -60px 0 no-repeat;}
.social-links .facebook-link:hover,
.social-links .facebook-link:active{background:transparent url(../img/social-icons.jpg) -60px -18px no-repeat;}

.social-links .dig-link:link,
.social-links .dig-link:visited{background:transparent url(../img/social-icons.jpg) -80px 0 no-repeat;}
.social-links .dig-link:hover,
.social-links .dig-link:active{background:transparent url(../img/social-icons.jpg) -80px -18px no-repeat;}

.social-links .technorati-link:link,
.social-links .technorati-link:visited{background:transparent url(../img/social-icons.jpg) -100px 0 no-repeat;}
.social-links .technorati-link:hover,
.social-links .technorati-link:active{background:transparent url(../img/social-icons.jpg) -100px -18px no-repeat;}

.social-links .linkdin-link:link,
.social-links .linkdin-link:visited{background:transparent url(../img/social-icons.jpg) -120px 0 no-repeat;}
.social-links .linkdin-link:hover,
.social-links .linkdin-link:active{background:transparent url(../img/social-icons.jpg) -120px -18px no-repeat;}

.social-links .redit-link:link,
.social-links .redit-link:visited{background:transparent url(../img/social-icons.jpg) -140px 0 no-repeat;}
.social-links .redit-link:hover,
.social-links .redit-link:active{background:transparent url(../img/social-icons.jpg) -140px -18px no-repeat;}

.social-links .friendfeed-link:link,
.social-links .friendfeed-link:visited{background:transparent url(../img/social-icons.jpg) -140px 0 no-repeat;}
.social-links .friendfeed-link:hover,
.social-links .friendfeed-link:active{background:transparent url(../img/social-icons.jpg) -140px -18px no-repeat;}

.social-links .dfloat-link:link,
.social-links .dfloat-link:visited{background:transparent url(../img/social-icons.jpg) -160px 0 no-repeat;}
.social-links .dfloat-link:hover,
.social-links .dfloat-link:active{background:transparent url(../img/social-icons.jpg) -160px -18px no-repeat;}

Quelques explications :

.social-links a {
display:inline;
float:left;
width:16px;
height:16px;
margin:0 5px 0 0;
font-size:0.01em;
text-indent:-9999px;
overflow:hidden;
}
  • Chaque lien fera 16px de côté. Cette taille correspond exactement à celle d’un picto. Les liens vont fonctionner comme des fenêtres ne laissant apparaître qu’une petite partie de l’image de fond.
  • Nous ajoutons un float:left pour les placer en ligne. La propriété display:inline va éviter les marges doublées sous IE6 (voir « Position is Everything : IE5/6 Doubled Float-Margin Bug»)
  • Les2 propriétés font-size:0.01em et text-indent:-9999px vont servir à masquer le texte présent dans les balises <a> sans le faire disparaître pour autant.
    Cette technique a 3 gros avantages : Même en désactivant les styles, votre code restera utilisable ; Une meilleure accessibilité en autorisant la lecture du texte par des logiciels pour mal-voyant ; C’est une méthode qui ne ruine pas le référencement.
  • Enfin, overflow:hidden servira à masquer le reste de l’image de fond qui dépassera grandement des limites de notre lien.

Petite explication sur le placement de l’image de fond

.social-links .twitter-link:link,
.social-links .twitter-link:visited{background:transparent url(../img/social-icons.jpg) 0 0 no-repeat;}
.social-links .twitter-link:hover,
.social-links .twitter-link:active{background:transparent url(../img/social-icons.jpg) 0 -18px no-repeat;}
  • Dans cas du premier lien « Twitter ». Nous utilisons les pseudos-classes Link/Visited et Hover/Active pour changer l’image entre l’état normal et l’état survolé du lien.
  • L’ordre est important. Pour vous en rappeler il y a le moyen mémo-technique : LoVe & HAte.
  • Dans le premier cas on place l’image de fond à x=0, y=0.
  • Dans le second cas l’image doit se déplacer de -18px sur l’axe des y pour se caler sur le coin haut-gauche du picto Twitter coloré. Il nous suffit donc de reporter ces 2 mesures dans la feuille de style. Ce qui explique le : …0 -18px no-repeat;.
  • Ensuite, il suffit de reporter toutes les mesures sur chacun des styles des liens pour terminer la barre de bookmarks.

Cet article se termine, j’espère qu’il sera utile à certains. Si vous souhaitez réutiliser ce code, vous pouvez télécharger le zip qui contient les css, le code xhtml classique, le code xhtml pour Wordpress ainsi que toutes les images.

N’oubliez pas que les visuels ont été créés par Rogie King et sont téléchargeables sur son site Komodo Media, un petit lien ne fait jamais de mal…

Demo Download

Quelques liens pour finir :