Créer ses boutons de partage pour les réseaux sociaux

Avec l’éclosion des réseaux Sociaux, la grande mode est au partage de l’information. Quel site/blog ne possèdent pas aujourd’hui un bon nombre de petit bouton destiner à faire connaitre leurs articles sur telle ou telle plateforme.

Le partage via les réseaux Sociaux

Si dans le monde Anglo-Saxon les réseaux sociaux sont aussi nombreux que les abeilles au sein d’une ruche, il n’en va pas de même dans le partie Francophone de la toile. On distingue les deux poids lourd que sont Facebook et Twitter. Viennent ensuite Wikio, puis Scoopeo ou Blogasty qui sont plus des Digg-Like, un genre d’agrégateur de contenu au quel vous proposez vos articles, les internautes votant ensuite pour celui-ci ou non.

Alors, la question qui se pose lorsque l’on est un internaute français qui rédige un site à l’intention d’un public français, c’est pourquoi utiliser des plugins WordPress qui embarque plus de 50 boutons de partage quand on sait que l’on ne va en utiliser que 2 ou 3 ?

Il est toujours possible de se dire que sur un malentendu, nous aurons un visiteur qui va cliquer sur l’un des ces boutons inutile. Certes. Mais ne vaut-il mieux pas lui proposer quelque chose qui soit plus en rapport avec son usage de l’internet francophone ?

Le Geek absolu trouvera sans doute cette vision restrictive, lui qui possède des comptes sur Digg, sur Tumblr, sur StumbleUpon, et j’en passe. Le petit rédacteur bien de chez nous, lui, ne sait même pas que ces trucs là existent, et s’il le sait, alors il les ignores, car l’anglais et lui ne sont pas les meilleurs amis du monde. Au fond, l’internaute Texan, notre petit Français, il s’en fout un peu, et la réciproque est sans doute vrai.

Remplacer les plugins par quelques lignes de codes

Dans notre croisade contre l’emploi massif de plugin, je vous propose donc de remplacer les extensions de Bookmarking Social par quelques lignes de code qui vous feront économiser et du temps de chargement, et des ressources pour votre serveur.

Nous allons nous concentrer sur trois méthodes de partage :

• Facebook
• Twitter
• Le Mail

Récupérer le code Facebook

Facebook, et plus récemment Twitter ont mis à la disposition des internautes des morceaux de codes très pratiques. Ces quelques lignes vous permettent d’afficher rapidement et sans difficultés leur bouton de partage. Dans les deux cas, une simple ligne suffit ! Là où le plugin va vous prendre minimum 10 lignes pour un bouton…

Pour Facebook, rendez vous sur http://developers.facebook.com/plugins et dans notre cas, sélectionnez le  « like button ». Nous allons voir comment renseigner le petit formulaire gris qui vous est proposé.

Dans le champ URL to Like, vous devez copier l’adresse de l’article par défaut. mais, vous avez plusieurs articles, et vous n’allez pas créer un bouton pour chaque article !! Non. Nous allons utiliser la puissance de WordPress.

Vous allez tou simplement copier ce petit de code dans le champ « URL to Like ».

<?php echo urlencode(get_permalink($post->ID)); ?>

Ce code va reprendre tout seul, comme un grand, l’adresse de l’article que votre visiteur est en train de lire. Lorsque celui-ci cliquera sur le bouton Facebook, l’adresse sera alors reprise et transmise vers son mur.

Récupérer le code Twitter

Pour Twitter, c’est encore plus simple ! D’une part la page de création du bouton est en français, de plus, elle très claire et bien expliquée. Nous verrons dans le screencast ci-après comment tout cela fonctionne.

Pour récupérer le code rendez-vous sur : http://twitter.com/goodies/tweetbutton

Créer le code pour le mail

Pour le mail, copier simplement ce code :

<a href="mailto:%20?subject=MON-SUJET-CHANGEZ-MOI&body=<?php echo urlencode(get_permalink($post->ID)); ?>">Envoyer par mail</a>

Remplacer « MON-SUJET-CHANGEZ-MOI » par le sujet (lisez l’objet du mail) par ce que vous souhaitez.

Quand l’internaute cliquera sur le lien « Envoyer par mail », il lui suffira simplement de remplir l’adresse du destinataire.

Le sujet et le lien de votre article seront déjà intégrer au mail.

C’est vieux comme le web, très simple, et sans doute pour cela que cette technique fonctionne encore.

Copier dans single.php

Première question : où trouver le fichier single.php

rendez vous dans :

wp-content/mon-theme/single.php

Bien, maintenant que vous avez localisé le fichier, ouvrez le, nous allons le modifier

Histoire d’être tranquille, faites en d’abord une copie de sauvegarde, ça peut servir

Passons à la partie la plus périlleuse lorsque le code est une chose qui nous effraie. Soyez rassuré, le copier – coller, c’est à la portée de pas mal de monde.

Voici le code à copier :

<h2>Faites passer l'article !</h2>
	<div style="width:100%; float:left;">
		<!--TWITTER-->
		<a href="http://twitter.com/share" data-count="horizontal" data-via="MON-COMPTE-TWITTER" data-lang="fr">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
		&nbsp;
		<--FACEBOOK-->
		<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp;action=like&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:100px; height:21px;" allowTransparency="true"></iframe>
		&nbsp;
		<!--MAIL-->
		<a href="mailto:%20?subject=MON-SUJET-CHANGEZ-MOI&body=<?php echo urlencode(get_permalink($post->ID)); ?>">Envoyer par mail</a>
	</div>

Pour le coller, dans votre fichier single.php, repérez ceci

<div id="article">
<?php the_content(); ?>
</div>

Il vous suffit simplement de copier le code après la dernière ligne de code de l’extrait ci-dessus.

Enregistrez votre fichier, et envoyer le sur votre site.

Screencast