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 )

Ajouter un commentaire

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

Fil des commentaires de ce billet