Créer des boutons de partage personnalisés sur WordPress

Bien souvent, pour coller à la charte du client il vaut mieux customiser les boutons de partage vers les différents réseaux sociaux. Voilà un tuto pour les réaliser très facilement.

Pour réaliser ces boutons de partage, nous allons utiliser la balise HTML <a>.
Ensuite, ça va se passer en deux temps :

Insérer dans le href l’url vers le partage en ajoutant, si possible, le lien vers la bonne page et le titre à afficher.
Customiser son design en y ajoutant une image ou bien en appliquant une feuille de style .css

Création de notre balise lien

On va commencer simplement par créer notre balise <a> :

<a href="#">Mon super bouton de partage</a>

Vous remarquerez que pour le moment, je met un # dans le href en attendant de savoir quoi y mettre.
Aussi, j’écris Mon super bouton de partage dans mon lien pour le voir :)
Ce qui nous donne ça :
Mon super bouton de partage

Ajout du lien de partage

Voici la liste des liens à entrer dans le href par réseau social :

Twitter

http://twitter.com/intent/tweet?status=[TITLE]+[URL]

Pinterest

http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]

Facebook

http://www.facebook.com/sharer/sharer.php?u=[URL]&title=[TITLE]

Google+

https://plus.google.com/share?url=[URL]

Reddit

http://www.reddit.com/submit?url=[URL]&title=[TITLE]

Delicious

http://del.icio.us/post?url=[URL]&title=[TITLE]]&notes=[DESCRIPTION]

Tapiture

http://tapiture.com/bookmarklet/image?img_src=[IMAGE]&page_url=[URL]&page_title=[TITLE]&img_title=[TITLE]&img_width=[IMG WIDTH]img_height=[IMG HEIGHT]

StumbleUpon

http://www.stumbleupon.com/submit?url=[URL]&title=[TITLE]

Linkedin

http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE/DOMAIN]

Slashdot

http://slashdot.org/bookmark.pl?url=[URL]&title=[TITLE]

Technorati

http://technorati.com/faves?add=[URL]&title=[TITLE]

Posterous

http://posterous.com/share?linkto=[URL]

Tumblr

http://www.tumblr.com/share?v=3&u=[URL]&t=[TITLE]

Google Bookmarks

http://www.google.com/bookmarks/mark?op=edit&bkmk=[URL]&title=[title]&annotation=[DESCRIPTION]

Newsvine

http://www.newsvine.com/_tools/seed&save?u=[URL]&h=[TITLE]

Ping.fm

http://ping.fm/ref/?link=[URL]&title=[TITLE]&body=[DESCRIPTION]

Evernote

http://www.evernote.com/clip.action?url=[URL]&title=[TITLE]

Friendfeed

http://www.friendfeed.com/share?url=[URL]&title=[TITLE]

Ajout des titres et URL sous WordPress

On va maintenant prendre le cas d’un lien de partage Twitter.
On a donc ça :

<a href="http://twitter.com/intent/tweet?status=[TITLE]+[URL]">Partager sur Twitter</a>

Reste maintenant à remplacer [TITLE] et [URL] par les bonnes valeurs. Si vous êtes sur WordPress, vous devriez avoir :

<a href="http://twitter.com/intent/tweet?status=<?php the_title(); ?>+<?php the_permalink(); ?>">Partager sur Twitter</a>

Facile, non ?
Voilà donc ce que cela nous donne :
Partager sur Twitter

Customisation graphique du lien

Vous n’avez plus qu’à mettre un .svg ou un .png à la place du texte et vous aurez un bouton de partage personnalisé :)

See ya’ space intégrateur

Source (en) : http://petragregorova.com/articles/social-share-buttons-with-custom-icons/

Summary

Article Name

Créer des boutons de partage personnalisés sur WordPress

Description

Bien souvent, pour coller à la charte du client il vaut mieux customiser les boutons de partage vers les différents réseaux sociaux. Voilà un tuto pour les réaliser très facilement.

Nicolas AUNE

PUShAUNE

Tu kiffes ? Alors partage avec tes potes !

Sois pas timide, lâche tes com’ ! Annuler la réponse

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.