Ajouter des boutons de partage social sans tracking à Wordpress


Pourquoi faire ceci alors que les plugins manque pas et surtout sur Wordpress ?
C'est simple, les plugins ralentissent le chargement des pages et moi qui a beaucoup de photos sur le site de mon entreprise je vais dire que cela aide pas trop donc voici des boutons de partage simple à installer sur votre site Wordpress en quelques minutes et cela sans tracking !
Pour informations le pack d'icones que j'utilise est en téléchargement ici.

Je vais pas trop rentrer dans les détails mais juste que dans le code j'ai ajouté un effet avec onmouseover pour un meilleur rendu ce qui donne deux images par icone de partage l'une avec l’opacité à 100 et l'autre à 60 rien de plus simple.

Pour commencer voici le code que vous devez installer pour afficher les boutons après vos articles :

<p><i>Partager :</i></p>
<div class="wdp-partage">
<a target="_blank" title="Twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="<?php bloginfo('template_url'); ?>/img/sociaux/twitter2.png" alt="Twitter" onmouseover="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/twitter.png';" onmouseout="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/twitter2.png';"
/></a>
        
<a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u=<?php the_permalink(); ?>&t=<?php the_title(); ?>" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><img src="<?php bloginfo('template_url'); ?>/img/sociaux/facebook2.png" alt="Facebook" onmouseover="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/facebook.png';" onmouseout="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/facebook2.png';"/></a>
        
<a target="_blank" title="Google +" href="https://plus.google.com/share?url=<?php the_permalink(); ?>&hl=fr" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="<?php bloginfo('template_url'); ?>/img/sociaux/gplus2.png" alt="Google Plus" onmouseover="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/gplus.png';" onmouseout="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/gplus2.png';"/></a>
        
<a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><img src="<?php bloginfo('template_url'); ?>/img/sociaux/linkedin2.png" alt="Linkedin" onmouseover="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/linkedin.png';" onmouseout="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/linkedin2.png';"/></a>
        
<a target="_blank" title="Envoyer par mail" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>" rel="nofollow"><img src="<?php bloginfo('template_url'); ?>/img/sociaux/email2.png" alt="email" onmouseover="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/email.png';" onmouseout="javascript:this.src='<?php bloginfo('template_url'); ?>/img/sociaux/email2.png';"/></a>
</a>
</div>

Chez moi j'ai du le coller dans part-content.php de mon thème d'autres le colle dans single.php ( cela dépend du thème ).
Et dans votre style.cc ajoutez :

.wdp-partage {float:left; width:200px; padding-top:0px;}
.wdp-partage a {float:left; margin-left: 7px;}

Normalement tout devrait fonctionner mais si j'ai fait une erreur corrigez moi ici même car ça aide toujours :) .
Bon partage sur Wordpress !

Commentaires

1. Le mercredi 30 août 2017 à, 17:07 par Erbel

Bonjour,
Simple et rapide mais il y'a un petit soucis avec l'archive. L'une des images ( email ) est avec le fond blanc, possible de la changer ? Et autre problème ( je sais, je sais ) les icone reste a la vertical chez moi sur mobile une petite idée ?
Merci bien :)

2. Le jeudi 31 août 2017 à, 13:07 par cris

Salut
Désolé pour l'icone j'ai pas du faire attention :° je ferais le changement dans l'archive. Pour la mise en place de t'es icones tu peux essayer ceci :

.wdp-partage {
list-style:none; 
}
.wdp-partage a {float:left; margin-left: 7px;}

Car du coup j'ai eu le même problème ( LOL ) nan mais plus sérieusement , je bricole le css donc je suis pas un pro xD
J'attend ton retour de ton coté si cela fonctionne chez toi :)

3. Le dimanche 3 septembre 2017 à, 19:11 par Erbel

Parfait, le code css fonctionne même si il est pas parfait. Pour l'icone c'est bon pour moi j'ai effectué le changement sur l'original donc diminué de 40% l’opacité :)
Merci encore

4. Le dimanche 17 septembre 2017 à, 16:01 par wilfried18

Merci pour l'article et ton blog en général

J'utilise pas d’icône social sur mon blog
si les gens veulent partager un article il peuvent le faire via les bookmarklet ou certain on des extension sur leur navigateur.
J'avoue que c'est pas une très bonne idées car peu de gens partage mes articles.
A part PIWIK il y a pas d'autre chose sur mon blog

par contre si ta ce genre d'astuces pour les vidéo YouTube cela serait intéressant.

5. Le lundi 18 septembre 2017 à, 16:19 par cris

Comment ça des astuces pour youtube ? ( pas trop compris )

6. Le jeudi 21 septembre 2017 à, 19:08 par Erbel

Je nome cela du spam vue le lien de son blog et surtout que l'on ne comprend rien a ce qu'il raconte ^^

7. Le samedi 23 septembre 2017 à, 13:34 par wilfried18

Je vais essayer de m'exprimer mieux

Mais je suis pas un spam
Désolé si tu l'a pris ainsi.
Concernant YouTube (donc Google) nous traque tout le temps, je demander donc si vous connaissez une astuce pour utilisé leur service sans pour autant espionner mes visiteurs.
Ce n'est peux être pas possible , je poser juste la question
En tout cas ta un bon blog
Bonne continuation

8. Le samedi 30 septembre 2017 à, 13:41 par cris

Tu peux me faire voir ce que ca donne car je vois pas trop le bouton youtube :p
merci

9. Le samedi 30 septembre 2017 à, 13:48 par wilfried18

En effet je suis hors sujet car je parler pas de bouton mais des vidéo qu'on intègre a nos sites ou blog
mais la solution c'est de auto hébergé ces vidéo pour ne pas être traquer

Ajouter un commentaire

Les commentaires peuvent être formatés en utilisant une syntaxe wiki simplifiée.

Fil des commentaires de ce billet