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 :

  1. Insérer dans le href l’url vers le partage en ajoutant, si possible, le lien vers la bonne page et le titre à afficher.
  2. 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/

502

Auteur : PUShAUNE

Graphiste freelance, J'ai créé un collectif à Marseille appelé Bison Bleu. Je tiens un blog pour partager mes techniques et mes expériences. Je donne aussi des cours aux élèves de l’école Axe Sud.

À ton tour de participer :

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *