Comment ajouter Suivez-moi sur Twitter ou Facebook sur votre blogue
31 octobre 2009 
19 commentaires
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
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à!
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.
Ma conférence: WordPress pour Entreprises: Possibilités infinies?
Comment ajouter un Twitter Widget sur votre site WordPress
Retour de vacances avec un automne rempli de beaux projets Web
Comment ajouter un administrateur à votre Page Facebook
Dans quelle langue s’affiche le bouton J’aime (Like) de Facebook?
10 conseils pour créer une Page Facebook pour votre Entreprise
Les options pour un site bilingue ou multilingue WordPress
Comment ajouter J’aime (Like Button) de Facebook sur votre site WordPress
Colour Lovers
Delicious
Facebook (Adeptes)
Flickr
Four Square
Friend Feed
Linked In
My Blog Log
Slide Share
Soup
Twitter
Vimeo
YouTube
Bonjour. Comme code pour superposer des images, pourquoi ne pas utiliser des DIV et possiblement un style local plutôt que d’une table?
Exemple pour une boite avec une image – note: j’ai mis [ et ] à la place des pour que ça passe dans mon commentaire:
[div align="center"][div style="width:330px;text-align:center;border:0px solid black;"][img src="http://mesimages.com/images/banniere-twitter.gif"width="330" height="50" style="border: 0px solid white"][/div[]/div]
PS: On ne voit pas le soulignement en jaune dans votre code, du moins pas avec Firefox sur Windows.
Bonne journée.
Répondre à ce commentaire
Twitter:dianebourque
Merci pour ton commentaire Volvox et surtout pour le code CSS!
J’avais oublié le soulignement en jaune. Tu devrais maintenant le voir!
Répondre à ce commentaire
Twitter:julienperes
Très bon tuto,
merci à vous !
peignonslagirafe.com
Répondre à ce commentaire
Bonjour, tout d’abord je vous remercie pour l’article, du reste assez bien détaillé :)
Répondre à ce commentaire
Twitter:dianebourque
Merci Nacer – ça fait toujours plaisir. J’ai visité ton site et y’a du boulot là-dedans – félicitations. Toutefois, je suis certaine que tu vas bientôt rencontrer les frustrations de bloguer chez http://wordpress.com Mon blogue porte plutôt sur les possibilités avec http://wordpress.org. J’ai longtemps blogué chez .com, mais j’ai passé à .org en 2006 et c’est le nirvana depuis. Merci encore!
Répondre à ce commentaire
Twitter:julienperes
Bonjour Diane,
quelle différence entre wordpress.org et .com ? Peux-t-on passer de l’un à l’autre éventuellement ?
Merci à vous
Répondre à ce commentaire
Bonjour, Merci Madame pour votre réponse :)
En effet, pas mal de boulot en perspective !
même si vous le blog n’existe que depuis 6 mois,(fallait commencer quelques parts quand même)et vous conviendrait certainement que lorsque on est sur WP.com on est plutot limité sur pas mal d’aspects.
bien-entendu, je vais pas m’arrêter la, et je compte bien sauter vers WP.org très prochainement..
je compte bien d’ailleurs je (l’espère)
apprendre encore plus et profiter via votre blog de votre excellente expertise :)
Répondre à ce commentaire
Twitter:dianebourque
Merci Nacer. Je suis confiante que tu y arriveras. Une installation WordPress est beaucoup plus simple qu’on peut l’imaginer. Bonne continuation!
Répondre à ce commentaire
Twitter:adelliseditions
Bonjour, merci pour ce super tutoriel, je suis étudiante pour mon stage et je suis entrain de créer un blog http://adelliseditions.wordpress.com en ajoutant « suivez-moi sur twitter »
J’ai suivi vos instructions mais un cadre blan avce une croix rouge apparaît à la plce de l’image;Peut-être pourriez-vous m’aider?Voilà ce que j’ai écrit:
J’ai essayé plusieurs chemin pour l’image mais sans succès.merci d’avance pour vos réponses
Répondre à ce commentaire
Twitter:dianebourque
Bonjour Romy, L’adresse de l’image sur ton site est « http://adelliseditions.wordpress.com/documentsandsettings/rbo/mes%20documents/mesimages/followmeontwiter.jpg ». L’image est inaccessible. Où est-elle?
Il faut que tu trouves la façon d’ajuster l’adresse de cette image à une image sur le Web. Bonne chance. Diane
Répondre à ce commentaire
Twitter:adelliseditions
Désolée le post précédent est incomplet
Merci pour vos réponses
Répondre à ce commentaire
Twitter:modepersonnel
Bonjour Diane, Tout a l’air d’une simplicité inouïe. Sauf que…. je ne sais pas du tout où trouver les codes de mon groupe FB ni ceux de mon Twitter !! Help ! Merci d’avance pour votre réponse.
Répondre à ce commentaire
Twitter:dianebourque
Salut modepersonnel, Quels codes cherches-tu exactement? Diane
Répondre à ce commentaire
Twitter:modepersonnel
Tout est ce qui apparaît en jaune pour toi !
Répondre à ce commentaire
Twitter:dianebourque
Il faudra que tu télécharges des images, que tu copies les adresses URL de ces images comme ceci http://boitealunch.info/Follow-Me-On-Twitter.jpg et que tu remplaces le code jaune avec ton code. Bonne chance!
Répondre à ce commentaire
Twitter:buzzculturels
je pensais que Twitter nous fournissais le widget !
Mais non…
Merci pour ce tutoriel !
Répondre à ce commentaire
Twitter:dianebourque
Bonjour Alexandre, Le widget que j’ai présentement sur mon site (colonne de droite – Diane Bourque @ Twitter) est un widget fourni par Twitter. Pour le concocter, il faut cliquer sur « Goodies » dans le bas du site Twitter. Je l’installe sur pas mal tous les sites WordPress que je fais. Il est simple, facile à créer et est fonctionnel 99% du temps.
Répondre à ce commentaire
Bonsoir !
J’aimerais bien placer ces icônes en haut à droite comme sur votre blog sur le header. Or, le widget-texte ne se fixe que sur la sidebar ! A moins que votre sidebar est cette barre horizontale ?
Merci pour l’aide que vous apportez aux autres…
Jetez un coup d’œil sur mon site !
Amitiés.
Répondre à ce commentaire
Twitter:dianebourque
Les icônes en haut à droite sont concoctés par moi-même dans le document header.php. Toutefois, tu pourrais ajouter un Widget dans le header, mais du codage PHP très très avancé. Il faut modifier plusieurs documents du thème et c’est pas pour les nuls. Je sais comment le faire mais ne le partagerai pas sur ce site à ce moment. Mais si tu tapes « add additional widget wordpress » dans Google, tu vas trouver comment le faire.
Répondre à ce commentaire