J'ai reçu quelques demandes sur comment ajouter une bannière "Suivez-moi sur Twitter" ou "Suivez-moi sur Facebook" sur un blogue WordPress. Les blogueurs veulent promouvoir leur présence sur les réseaux sociaux et je veux les encourager à le faire. C'est vraiment très facile à ajouter une bannière sur votre blogue WordPress (qu'on on sait comment le faire). Dans cet article, je vous donne le code pour ajouter une bannière sur votre blogue WordPress afin d'encourager vos visiteurs à vous suivre sur Twitter, Facebook, Linkedin et plus encore.

MISE À JOUR le 9 mai 2010 : Je n'utilise plus ces belles images que j'avais concoctées l'année dernière. J'utilise maintenant les nouvelles icônes tout en haut de la colonne de droite.

NOTE: Ce tutoriel s'applique aux blogues gratuits chez WordPress.com et aux blogues hébergés via WordPress.org. Le tutoriel ne s'applique pas pour des sites en HTML ou en Flash.

C'est quoi une bannière?

Dans ce tutoriel, une bannière est une image que l'on insère dans un Widget sur un blogue WordPress et qui est liée à un lien externe. Sur ce blogue, j'utilise les bannières suivantes. Vous pouvez les utiliser si vous voulez, ou encore mieux, cliquez sur les bannières et suivez-moi là où ça vous tente.

Le code de ces bannières

Voici le code qu'il faudra copier et ajuster selon vos données pour insérer les 4 bannières ci-dessus. Le code surligné en jaune devra être modifié avec vos codes.

<table width="330">
  <tr>
    <td><a href="http://twitter.com/dianebourque" target="_blank"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_twitter.png" alt="Twitter" width="330" height="30" border="0" /></a></td>
  </tr>
  <tr>
    <td><a href="http://www.facebook.com/dianebourque" target="_blank"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_facebook.png" alt="Facebook" width="330" height="30" border="0" /></a></td>
  </tr>
  <tr>
    <td><a href="http://www.linkedin.com/in/dianebourque" target="_blank"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_linkedin.png" alt="LinkedIn" width="330" height="30" border="0" /></a></td>
  </tr>
  <tr>
    <td><a href="http://feeds2.feedburner.com/DianeBourque" target="_blank"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_rss.png" alt="Facebook" width="330" height="30" border="0" /></a></td>
  </tr>
  <tr>
    <td></td>
  </tr>
  <tr>
    <td></td>
  </tr>
</table>

Comment insérer le code dans votre blogue

Allez sur votre Tableau de bord WordPress et cliquez sur Apparence | Widgets

banniere1

1. Dans les Widgets, sélectionnez le Widget Texte et glissez-le là où vous voulez ajouter votre bannière.

2. Dans le Widget Texte, collez le code pour votre bannière.

3. Cliquez sur Enregistrer. C'est fait! Retournez sur votre blogue. Rafraichissez votre page et voilà!

banniere2

Comment ajouter Suivez-moi sur Twitter

Pour insérer une seule image comme celle-ci sur votre blogue, suivez-les instructions ci-dessus et insérer le code suivant dans votre Widget Texte:

<a href="http://twitter.com/dianebourque"><img src="http://boitealunch.info/Follow-Me-On-Twitter.jpg" alt="Follow Diane Bourque Twitter" width="225" height="188" border="0" /></a>

MISE À JOUR: Comment ajouter le code avec le CSS

Suite au commentaire de Volvox, je vous remets ici le code pour ajouter la bannière avec du CSS au lieu d'utiliser une table. Volvox est un puriste. Il serait préférable d'utiliser le CSS pour tout le code dans un blogue. Mais pour les bannières, pour moi, c'est plus facile d'utiliser une table.

Si vous voulez ajouter le CSS, voici le code que j'ai concocté pour le faire (Merci à Volvox) :

<div align="left">
<div style="width:330px;border:0px solid black;"><a href="http://twitter.com/dianebourque"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_twitter.png"width="330" height="30" style="border: 0px solid white"></a></div></div>
<div align="left">
 <div style="width:330px;border:0px solid black;"><a href="http://facebook.com/dianebourque"><img src="http://dianebourque.com/wp-content/themes/shades-of-blue/images/links_facebook.png"width="330" height="30" style="border: 0px solid white"></a></div></div>

Si vous avez apprécier ce tutoriel, n'hésitez pas à dire merci dans les commentaires – ça fait plaisir – ou envoyez-moi un message.

Comment ajouter Partager sur Facebook dans un article

Si vous voulez voir ceci dans vos articles:

Partager sur Facebook

Copiez le code suivant et collez-le dans le html ou la source de votre article en ajustant le texte orange avec le url de votre blogue:

<script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script> <a onClick="return fbs_click()" target="_blank" href="http://www.facebook.com/share.php?u=http://www.dianebourque.com"><img width="14" height="14" border="0" alt="" src="http://b.static.ak.fbcdn.net/images/share/facebook_share_icon.gif?8:26981" /></a> <script>function fbs_click() {u=location.href;t=document.title;window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436');return false;}</script><a onClick="return fbs_click()" target="_blank" href="http://www.facebook.com/share.php?u=http://www.dianebourque.com">Partager sur Facebook</a>

Comment ajouter Partager sur Facebook dans tous vos articles

Pour faciliter l'insertion du code, il faudrait modifier le fichier single.php dans vos fichiers WordPress. En ajoutant le code ci-dessus directement dans votre fichier single.php, le code Partager sur Facebook s'affichera automatiquement dans chacun de vos articles. Il suffit de simplement ouvrir le fichier single.php dans votre éditeur php, copiez et collez le code ci-dessus directement dans le loop de votre contenu, et téléchargez le fichier single.php sur votre serveur.

Besoin d'aide?

N'hésitez pas à poser vos questions dans la boîte à commentaire!