Ajouter des boutons de partage social sans tracking à Dotclear

partagesociaux.png Pendant les vacances d'hiver ou il fait pas trop chaud on aime bien bricoler et j'ai donc voulu mettre le blog au goût du jour avec les boutons de partage social.
Après quelques recherches sur le net je suis tombé sur le code HTML de Ohax qui propose d'afficher les boutons de partage sans tracking pour Wordpress et le billet de korben. Alors du coup j'ai adapté le code pour Dotclear comme vous pouvez le voir sur la capture et a la fin du billet bien sûr avec des icônes que j'ai fait pour le thème de mon blog.
Copier le code là ou vous voulez retrouver vos boutons de partage et oubliez pas de mettre vos icônes dans le dossier images de votre thème ( ou modifiez le chemin ) et normalement cela devrait être bon.

<div>
   <p><i>Partagez cet article avec vos amis en cliquant sur les boutons ci-dessous :</i></p>
<a title="Twitter" href="https://twitter.com/share?url={{tpl:EntryURL}}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
<img src="{{tpl:BlogThemeURL}}/images/twitter_icon.png" alt="Twitter" /></a>
       
<a title="Facebook" href="https://www.facebook.com/sharer.php?u={{tpl:EntryURL}}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
<img src="{{tpl:BlogThemeURL}}/images/facebook_icon.png" alt="Facebook" /></a>
       
<a title="Google +" href="https://plus.google.com/share?url={{tpl:EntryURL}}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
<img src="{{tpl:BlogThemeURL}}/images/gplus_icon.png" alt="Google Plus" /></a>
        
<a title="Linkedin" href="https://www.linkedin.com/shareArticle?url={{tpl:EntryURL}}" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
<img src="{{tpl:BlogThemeURL}}/images/linkedin_icon.png" alt="Linkedin" /></a>
       
<a title="Envoyer par mail" href="mailto:?subject={{tpl:EntryURL}}" rel="nofollow">
<img src="{{tpl:BlogThemeURL}}/images/email_icon.png" alt="email" /></a>
</div>

Vous pouvez adapter le code avec votre feuille de style et trouvez des icônes avec notre ami Google sinon demandez toujous si j'ai le temps je peux toujours en faire au style de votre thème.
Bon partage !

Commentaires

1. Le dimanche 29 décembre 2013 à, 16:29 par laurent

Nickel, mais pour l'effet avec le changement d'images ? c'est un autre truc non ?
Merci

2. Le dimanche 29 décembre 2013 à, 19:50 par kipof

Salut laurent,

Oui j'ai ajouté une seconde image pour l'effet avec ceci après chaque alt:

onmouseover="javascript:this.src='{{tpl:BlogThemeURL}}/images/twitter_icon2.png';" onmouseout="javascript:this.src='{{tpl:BlogThemeURL}}/images/twitter_icon.png';"

Donne un petit plus :)

3. Le samedi 4 janvier 2014 à, 00:12 par laurent

Salut,
Pour les mails y'a un problème je crois car lorsque tu clique sur l'icône l'url vas dans le sujet alors que ça devrait être le titre non ? et l'url dans le contenu du mail ? :twisted:

4. Le lundi 13 janvier 2014 à, 23:07 par kipof

Salut laurent,
Je viens juste de voir ta remarque :° je regarde demain mais sinon oui pas trop normal :p merci :)

5. Le mercredi 23 avril 2014 à, 23:49 par wilfried18

Ont peux avoir la méme chose sur wordpress ?

6. Le jeudi 24 avril 2014 à, 18:59 par kipof

Salut wilfried18,

Pour wordpress c'est la même chose sauf que tu dois modifier le paramètre :

{{tpl:EntryURL}}

par celui que wordpress utilise.

7. Le mardi 1 juillet 2014 à, 22:17 par Marc

Bonjour, j'ai fait un site en tapant le code (XHTML strict 1.0) et quand je mets ces boutons, ça marche mais je n'ai pas les images (que j'ai mises dans le dossier images)... Comment faire ? Merci d'avance !

8. Le mardi 1 juillet 2014 à, 23:31 par kipof

L'exemple ici est pour Dotclear mis le chemin se trouve ici ( exemple bouton facebook ) :

<img src="{{tpl:BlogThemeURL}}/images/facebook_icon.png" alt="Facebook" />

retire ceci : tpl:BlogThemeURL si tu utilises pas dotclear ou sinon mais t'es images dans le dossier images de ton thème.
J' attend ton retour :)

9. Le mercredi 2 juillet 2014 à, 08:07 par Marc

C'est nickel. Tu n'imagines pas comment je m'étais pris la tête :) Je te conseille volontiers quelques trucs seo pour ta page (si tu es intéressé envoie-moi un mail) tellement je suis content. Merci ! !

10. Le dimanche 6 juillet 2014 à, 21:49 par kipof

Pour Dotclear ?

11. Le vendredi 11 juillet 2014 à, 11:03 par Marc

Cela dépend des paramètres que tu peux contrôler avec Dotclear.

12. Le dimanche 13 juillet 2014 à, 21:55 par kipof

J'ai pas mal de contrôle :)

13. Le mardi 29 juillet 2014 à, 22:19 par i_love_dc

salut, y a un problème sous Google chrome..ça laisse un cadre rouge-rose autour de l'image, je ne comprend pas comment l'enlever

[http://img15.hostingpics.net/pics/894267Sanstitre2.jpg]
14. Le mardi 29 juillet 2014 à, 23:25 par kipof

Aucun problèmes sous Chrome, je viens de vérifier. C'est bien ici ta capture ?

15. Le mardi 29 juillet 2014 à, 23:36 par i_love_dc

oui oui la capture est faite sur ton blog via chrome Version 36.0.1985.125 m, j'ai mis les bottons sur un blog dotclear en cour de réalisation (local) et le rendu fait de même sous chrome uniquement...

je comprend pas d'ou viens le problème

16. Le mardi 29 juillet 2014 à, 23:40 par i_love_dc

voila encore un autre screen tu peut y voir le navigateur "chrome" et ton site avec le bug d'encadrement

http://img15.hostingpics.net/pics/1...

17. Le mercredi 30 juillet 2014 à, 01:31 par kipof

Bah chez moi nickel : http://imagesup.org/images12/140667... puis j'ai demandé confirmations a d'autres personnes qui eux aussi ont rien :/
Ton navigateur qui chie ? vide ton cache enfin je vois pas trop le problème d'ici.

Ajouter un commentaire

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

Fil des commentaires de ce billet