Depuis quelques jours, vous pouvez partager mes billets que vous aimez tant !

Publié le mercredi 19 mars 2014.

SPIP Exemple

Depuis quelques jours, vous pouvez partager mes billets (...)

Depuis quelques temps, je me demandais si j’ajoutais ou non la possibilité de partager facilement mes articles, billets, tutoriels, exemples, galerie photos ou que sais-je encore que j’ai publié dans le passé, que j’écrirais dans le futur ou bien, ce que je suis en train d’écrire actuellement... J’ai fini par dire oui...

Ce que je ne voulais pas

Je ne voulais pas des sempiternels boutons basiques facebook, twitter, google + ect avec leurs compteurs... Il n’aurait pas collé avec le superbe design que j’ai subtilement concocté en utilisant les classes de base de bootstrap... Je ne voulais pas non plus de plugin jQuery plus funky les uns que les autres et qui collent pas non plus au sobre et pourtant magnifique aspect graphique de mon espace web... Non, il me fallait quelque chose de simple, sobre et efficace ! Et non, pas Addthis non plus... Ils traquent les visiteurs et ralentis le chargement des pages... C’est que je ne veux pas de ça moi !

Ce que j’ai trouvé sur le net !

Après quelques temps passé à la recherche d’une solution, j’ai trouvé ça sur internet ! Une solution pour faire des boutons de partage social sans tracking. Au passage, comme indiqué dans le billet de Korben, la solution originale viens de là !

Une solution simple à programmer en html et php et donc à adapter à spip. De plus, ce système étant hébergé sur son serveur, pas de tracking par un tiers...

Par ailleurs, en plus, dans ce billet, il y a un lien vers un site d’icônes gratos ! Mais perso, je vous recommande plutôt cette page là du même site qui propose plus d’icônes. De toutes façon, il y en a pleins d’autres en cherchant sur le site internet en question.

Ce que j’en ai fait

En partant du code HTML et php proposé, pour wordpress apparement, j’ai pondu un bout de code pour spip.

Le code pour wordpress

<div>
<p><i>Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :</i></p>
<div>
<a target="_blank" title="Twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>&via=korben" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><img src="http://korben.info/wp-content/themes/korben2013/hab/twitter_icon.png" alt="Twitter" /></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="http://korben.info/wp-content/themes/korben2013/hab/facebook_icon.png" alt="Facebook" /></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="http://korben.info/wp-content/themes/korben2013/hab/gplus_icon.png" alt="Google Plus" /></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="http://korben.info/wp-content/themes/korben2013/hab/linkedin_icon.png" alt="Linkedin" /></a>
<a target="_blank" title="Envoyer par mail" href="mailto:?subject=<?php the_title(); ?>&body=<?php the_permalink(); ?>" rel="nofollow"><img src="http://korben.info/wp-content/themes/korben2013/hab/email_icon.png" alt="email" /></a>
</div>
<div>
<a target="_blank" title="Flattr !" href="https://flattr.com/submit/auto?user_id=Korben&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>&description=<?php bloginfo('description'); ?>&language=fr_FR&tags=blog&category=text" rel="nofollow"><img src="http://korben.info/wp-content/themes/korben2013/hab/flattr_icon.png" alt="Flattr !" /></a>
</div>
</div>

Télécharger

Le code que j’ai pondu pour SPIP avec bootstrap :

<div id="partage-social" class="pull-right">
<p class="centered-text"><span class="label label-default"><multi>[fr]Vous avez aimé ? Partager ! [en]You liked it ? Share it ! </multi></span></p>
<a target="_blank" title="Twitter" href="https://twitter.com/share?url=#URL_SITE_SPIP/#URL_ARTICLE&text=#TITRE&via=robomatix" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');
return false;"><img src="#CHEMIN{images/twitter_1.png}" alt="Twitter" /></a>
<a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u=#URL_SITE_SPIP/#URL_ARTICLE&t=#TITRE" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');
return false;"><img src="#CHEMIN{images/fb_1.png}" alt="Facebook" /></a>
<a target="_blank" title="Google +" href="https://plus.google.com/share?url=#URL_SITE_SPIP/#URL_ARTICLE&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="#CHEMIN{images/google_plus.png}" alt="Google Plus" /></a>
<a target="_blank" title="Tumblr" href="http://www.tumblr.com/share/photo?source=[(#LOGO_ARTICLE|image_reduire{500,0}|liens_absolus|extraire_attribut{src}|urlencode)]&caption=Cliquez sur l'image pour accéder à l'article : #TITRE&click_thru=#URL_SITE_SPIP/#URL_ARTICLE" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');
return false;"><img src="#CHEMIN{images/tumblr.png}" alt="Tumblr" /></a>
<a target="_blank" title="Linkedin" href="https://www.linkedin.com/shareArticle?mini=true&url=#URL_SITE_SPIP/#URL_ARTICLE&title=#TITRE" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');
return false;"><img src="#CHEMIN{images/linkedin.png}" alt="Linkedin" /></a>
</div>
</div>

Télécharger

Comme vous pouvez le voir Flattr à disparu et Tumblr et apparu... Si voulez ajouter d’autres réseau sociaux, il suffit de se documenter un peu sur les URLs de partage de vos sites sociaux préférés comme le dit si bien Korben. A vous d’ajouter ou de suprimer les classes à votre convenance.