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 :

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 :

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 :

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

Tout le monde n’étant pas né avec un manuel de php entre les mains, je présenterai dans cette rubrique des snippets s’adressant essentiellement aux débutants. Des questions simples pour des réponses simples. Vous débutez avec Wordpress, vous rencontrez un problème php, peut-être trouverez-vous une solution dans cette nouvelle série d’articles…

Exclure une catégorie de vos flux RSS

Dans function.php

<?php
  //La fonction
  function ExcludeFeed($query) {
    if ($query->is_feed) {
      //Exemple de suppression de la catégorie ayant l'id 1
      $query->set('cat','-1');
    }
    return $query;
  }
  //Le filtre
  add_filter('pre_get_posts','ExcludeFeed');
?>

Exclure une catégorie de la recherche

Dans function.php

<?php
  //La fonction
  function SearchFilter($query) {
    if ($query->is_search) {
      //Exemple d'exclusion des catégories ayant les id 16 et 17
      $query->set('cat','-16,-17');
    }
    return $query;
  }
  //le filtre
  add_filter('pre_get_posts','SearchFilter');
?>

Ajouter un nuage de tags sans utiliser de widget

Ajouter ce code à l’endroit où le nuage de tags doit s’afficher

<p>
  <?php wp_tag_cloud('smallest=8&largest=32&unit=px&number=50'); ?>
</p>

• smallest = la taille du plus petit tag (en fonction de votre unité de mesure)
• largest = la taille du plus grand tag (en fonction de votre unité de mesure)
• number = le nombre de tag maximum à afficher (0 affichera tous les tags)
• unit = l’unité de mesure (peut prendre la valeur « px », « pt », « em », « % »)

Depuis la version 2.8 de Wordpress, vous pouvez choisir d’afficher les catégories plutôt que des tags. Pour cela, utilisez la variable taxonomy comme suit :

<p>
  <?php wp_tag_cloud('smallest=8&largest=28&unit=px&number=50&taxonomy=category'); ?>
</p>

La variable taxonomy peut prendre les valeurs suivantes

• post_tag = affiche les noms des tags
• category = affiche les noms des catégories
• link_category = affiche les liens des catégories

Bien gérer la pagination et query_posts

Si vous utilisez la fonction query_posts() avant votre boucle, vous avez peut-être rencontré des soucis de pagination.

Pour éviter ce désagrément, il faut ajouter le paramètre query_string dans votre requête.

<?php
  //On empêche l'affichage des articles appartenant à la catégorie ayant l'id 17
  query_posts('query_string&cat=-17');
?>

Le code avec la boucle :

<?php
  query_posts('query_string&cat=-17');
    //La boucle affichera les articles selon les conditions fixées par la fonction query_post();
    if (have_posts()) :
      while (have_posts()) : the_post();
        ...Le contenu d'un article ici...
      endwhile;
    endif;
?>

Afficher les titres de vos futurs articles

Ajouter ce code là où la liste doit s’afficher

<?php
  $my_query = new WP_Query('post_status=future&showposts=3');
    if ($my_query->have_posts()) {
      while ($my_query->have_posts()) : $my_query->the_post();
        the_title();
      endwhile;
    }
?>