Insérer un module type Sociable dans votre blog WordPress sans plugin
Produire du contenu de qualité ne suffit pas à attirer des visiteurs sur votre site. Il y a toute une partie marketing à prendre en considération, et notamment, la promotion de vos articles. Un des moyens pour y parvenir est la mise en place d’un module dit de partage de vos posts sur les réseaux sociaux. Tout le processus d’intégration dans la suite de l’article.
Insertion du code php
Commencez par ouvrir la page single.php via l’administration de WordPress. Dans notre exemple, nous placerons notre module juste avant les commentaires. Par conséquent votre code devra être inséré juste avant ceci :
<?php comments_template('', true); ?>
La suite va consister à insérer un lien vers le(s) site(s) de partage d’articles que vous souhaitez proposez à vos lecteurs. Pour nous faciliter la tâche et gagnez du temps, nous n’allons pas nous amuser à rechercher l’URL exacte de chaque site pour la soumission d’un article. Nous allons faire appel au plugin Sociable qui nous a déjà mâché tout le travail. Rassurez-vous nous ne l’installerons pas comme indiqué dans le titre de ce post.
Sociable (168,0 KiB, 929 hits)
Une fois téléchargé et dézippé, ouvrez le fichier sociable.php à l’aide d’un simple éditeur de texte. Descendez de quelques lignes jusqu’à voir apparaître des URLs de sites communautaires, le premier étant actuellement BarraPunto. Vous constatez que chaque site, contient l’adresse exacte pour y soumettre un article. Il ne vous reste plus qu’à la copier-coller dans single.php à l’encadrant d’une balise <a>.
<a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>t=<?php the_title(); ?>">Publier sur Facebook</a>
Réitérez l’opération pour les autres sites que vous souhaitez proposer à vos lecteurs. N’oubliez pas d’enregistrer le fichier single.php une fois le processus terminé.
Application d’un design
Il ne nous reste plus qu’à y appliquer un design. Encadrez tout simplement vos liens d’une balise DIV que nous nommerons ici sociable. N’oubliez pas de fermer cette dernière. Puis, ouvrez le fichier CSS, généralement appelé styles.css, toujours via l’administration WordPress. Dans notre exemple, 5 styles vont être utilisés. Je vous conseille de les copier-coller puis de les modifier par la suite à l’aide de l’extension Firebug pour Mozilla Firefox.
#sociable {
-moz-border-radius:5px;
background-color:#ffffd5;
padding:10px;
margin:20px 0;
}
#sociable a {
margin-left:35px;
}
#sociable a:hover {
opacity:0.8;
}
#sociable h4 {
color:#225577;
font-size:18px;
font-weight:normal;
line-height:2em;
margin:0;
padding:8px 12px;
}
Pour attirer davantage le visiteur à partager vos articles, préférez l’utilisation d’une image. Pour cela, remplacez le texte « Publier sur Facebook » par :
<img src="/wp-content/themes/protuts/images/facebook.png">
Sans oublier d’ajouter le style pour l’image dans le fichier CSS du thème :
#sociable img {
border:none;
}
Exemple : le cas Protuts.net
Pour que tout le monde comprenne bien le procédé décrit précédemment, voici le modèle pour obtenir le module sociable à l’identique de Protuts.net :
Code à insérer dans single.php :
<div id="sociable"> <h4>Vous avez aimé cet article ? Faites-le savoir ou discutez-en sur le forum !</h4> <a href="http://twitter.com/home?status=En train de lire : <?php the_title(); ?> : <?php the_permalink();?>"><img src="/wp-content/themes/protuts/images/twitter.png"></a> <a href="http://www.facebook.com/share.php?u=<?php the_permalink() ?>t=<?php the_title(); ?>"><img src="/wp-content/themes/protuts/images/facebook.png"></a> <a href="http://del.icio.us/post?url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img src="/wp-content/themes/protuts/images/delicious.png"></a> <a href="http://digg.com/submit?phase=2&url=<?php the_permalink() ?>&title=<?php the_title(); ?>"><img src="/wp-content/themes/protuts/images/digg.png"></a> <a href="http://technorati.com/faves?<?php the_permalink() ?>"><img src="/wp-content/themes/protuts/images/technorati.png"></a> <a href="http://feeds2.feedburner.com/protuts"><img src="/wp-content/themes/protuts/images/feed.png"></a> <a href="http://www.protuts.net/forum/"><img src="/wp-content/themes/protuts/images/forum-icone.png"></a> </div>
Code CSS à ajouter dans styles.css :
#sociable {
-moz-border-radius:5px;
background-color:#ffffd5;
padding:10px;
margin:20px 0;
}
#sociable a {
margin-left:35px;
}
#sociable a:hover {
opacity:0.8;
}
#sociable h4 {
color:#225577;
font-size:18px;
font-weight:normal;
line-height:2em;
margin:0;
padding:8px 12px;
}
#sociable img {
border:none;
}
Et le résultat final, que vous devriez tous obtenir :
Capture d'écran - Exemple d'intégration d'un module Sociable dans WordPress (cas Protuts.net)
Simple à mettre en place, pratique pour vos visiteurs, et surtout, un plugin de moins qui viendra alourdir votre thème. Que demandez de plus ?
22 commentaires pour “Insérer un module type Sociable dans votre blog WordPress sans plugin”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Bonjour, bonjour. Et re-voila!
Encore un super post avec super info. ça vas bien me servir pour mon nouveau theme, (c’a y est je l’ai mon thesis en local qui marche à merveille tu peux me féliciter ). Justement je ne voulais pas installer un plug in pour le réseaux sociaux.
Et merci pour le code pré-mâché par le plug in ça vas bien faire gagner du temps.
en échange : voilà un bon astuce à sauvegarder les modifications du fichier css (les customz) en cas de changement du thème ou d’un mis à jour du thème actuelle. Il est peut être pas nouveau pour toi Rainbow, mais pour le nuls comme moi c’était une découverte…How to Protect CSS Mods for ANY WordPress Theme
Merci les gars.
@serge :
Mais de rien pour le tuto.
Concernant ton lien, j’avais déjà vu cette technique quelque part mais je ne me souvenais plus sur quel site : merci de me l’avoir rappelé
Bonne chance pour ton site !
Encore un bel article !
j’utilisais pour ma part le plugin sociable de base mais j’en étais pas totalement satisfait, cet article va donc bien m’aider
merci !
@Bingo : merci à toi ! Une fois de plus, un plugin n’est pas forcément la solution.
P.S : tu veux vraiment pas mettre un vrai pseudo ? Je comprends bien que tu veuilles promouvoir ton blog mais cela revient au même et puis c’est plus convivial de mettre un nom plutôt que celui de son site. Allez un petit effort d’autant plus que tu finis souvent dans le spam !
J’ai fini par mettre un plugin. Mais bon, ça va peut être changer
juste 3 mots merci merci merci
Salut et merci pour cet article dont le résultat m’attire beaucoup (pas satisfait de Sociable)^^
De mon côté cependant, lorsque j’applique les étapes décrites, rien n’apparaît en front.
J’ai tenté d’utiliser une ligne de code (lien et image dans la sidebar) qui fonctionne déjà ailleurs sur mon blog, mais cela n’apparaît pas non plus, avec ou sans image.
Cela vient du thème (Autumn forest) puisqu’avec le thème par défaut cela fonctionne, mais je n’ai aucune idée de ce qui peut empêcher l’affichage des liens et images intégrés dans single.php.
As-tu une idée de ce que j’ai pu mal faire ?
Merci
Wah pardon j’ai losé ! Tout est rentré dans l’ordre. La cause du problème : Un problème d’organisation sur mon serveur.
Tout se passe bien et tout fonctionne également de mon côté.
Merci et toutes mes excuses ^^
@rahan84 : ce n’est pas grave
Comment réduire la largeur du rectangle autour ? Merci d’avance.
@Pierre Jean : salut,
si tu souhaites réduire la largeur du rectangle « jaune », il faut que tu diminue la valeur du Padding dans le style #sociable.
Pour styliser plus facilement ton site web, je te conseille vivement d’installer Firebug (extension Firefox) en lisant ce tutoriel Protuts :
http://www.protuts.net/5-extensions-firefox-indispensables-pour-developper-votre-blog/
voilà voilà
Merci beaucoup de la réponse rapide, je teste sa !
J’ai réussit à le réduire, mais maintenant je n’arrive pas à le center !
http://justprod.com/iblog/2009/10/13/sfr-et-lappel-en-conference/
Une idée ?
@Pierre Jean :
un petit margin-left de 150px devrait faire l’affaire. A vérifier tout de même dans IE s’il n’y a pas de bugs d’affichage
Tu déchire grave, merci beaucoup
Merci pour ce bon tuto qui me permettra de remplacer sociable.
Je suis également à la recherche d’un plugin pour insérer un countdown dans mes articles … si quelqu’un a un bon tuyau, je prends.
Merci
Heu .. juste une question. Si je souhaite ne pas appliquer ce script à une catégorie de posts, comment je fais ?
(cette option bien pratique existe avec sociable)
Merci
@Volfoni: ah là par contre ça va pas être possible. Désolé
@Rainbow Pas grave …. j’essaierai le script pour voir . Merci
Sinon, personne n’a adapté SexyBookmarks pour les réseaux sociaux français ?
Bonjour,J’ai un souci avec sociablelorsque je partage avec le lien facebook, il ne m’affiche aucune miniature.Quelqu’un aurait une astuce ?Merci d’avance
@Fab : je ne maîtrise pas encore tout à fait Facebook mais je pense que ces deux liens devraient t’aider :
http://www.facebook.com/facebook-widgets/share.php
(partie 2 : Assurez-vous du bon fonctionnement de l’aperçu)
http://wiki.developers.facebook.com/index.php/Facebook_Share/Specifying_Meta_Tags