notes·de·pit

Depuis peu, Franck propose un plugin permettant de partager via plein de réseaux sociaux en utilisant AddToAny.

Pour ma part, j'utilisais les services de AddThis jusqu'à il y a peu. C'était configurable et … vénérable vu son âge. AddThis me permettait également d'avoir un retour sur les liens qui étaient partagés, une sorte de rapport mensuel^[1].

Comme c'est la mode aujourd'hui de se débarrasser un peu des services tiers lorsque c'est possible, je me propose de faire comme Korben et Ohax afin d'ajouter des boutons de partage sans tracking – comprendre sans utiliser un service tiers.

Pour ce faire, il faut simplement savoir que les différents réseaux sociaux ont une API de type REST, c'est-à-dire permettant de donner des valeurs au serveur par le biais de l'URL. On pourra, donc partager un lien sur Twitter (pour peu que l'on soit connecté) par le biais d'une URL de la forme

  href="https://twitter.com/share?url=URL&text=TEXT&via=VIA

où URL est l'url a partager, TEXT, les 140 caractères du tweet et VIA l'utilisateur qui sera prévenu du tweet.

En ajoutant une couche de CSS pour que ce soit joli, on obtient ça chez moi.

Je décide de ne partager que sur Twitter, G+, Facebook … et Flattr … et j'en profite pour mettre le lien du plugin Export ODT.

Technique

Dans mon thème, j'ajoute une page _social.html qui contient tous les liens que je désire. J'ajouterai cette page aux endroits où je veux voir apparaitre les liens de partage. Par exemple en ajoutant tpl:include src="_social.html" à l'endroit qui va bien de la page post.hlml.

Si vous voulez intégrer ailleurs que dans Dotclear, remplacez toutes les occurrences de tpl:Foo par les liens qui vont bien.

<div id="social">
    <a target="_blank" title="Twitter" 
        class="eleganticon social_twitter"
        href="https://twitter.com/share?url={{tpl:EntryURL}}&text={{tpl:EntryTitle}}&via=YOU" 
            rel="nofollow"
            onclick="javascript:window.open(this.href, '',                   'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;">
        </a><a target="_blank" title="Facebook" 
            class="eleganticon social_facebook"
            href="https://www.facebook.com/sharer.php?u={{tpl:EntryURL}}&t={{tpl:EntryTitle}}" 
            rel="nofollow" 
            onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;">
        </a><a target="_blank" title="Google +" 
            class="eleganticon social_googleplus"
            href="https://plus.google.com/share?url={{tpl:EntryURL}}&hl=fr" 
            rel="nofollow" 
            onclick="javascript:window.open(this.href, '',  'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
        </a><a target="_blank" title="Flattr !" 
            class="eleganticon icon_gift_alt"
            href="https://flattr.com/submit/auto?user_id=Pinkilla&url={{tpl:EntryURL}}&title={{tpl:EntryTitle}}&description={{tpl:EntryTitle}}&language=fr_FR&tags=blog&category=text" 
            rel="nofollow"
            onclick="javascript:window.open(this.href, '',   'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;">
        </a><a title="Get ODT version"
            class="eleganticon icon_document"
            href ="{{tpl:BlogURL}}odt/post/{{tpl:EntryBasename}}">            
        </a>
</div>

Au niveau du style, je profite d'un lien de Kozlika proposant d'utiliser une police particulière pour ajouter des icônes à son site, ça s'appelle icon font.

Le principe consiste à utiliser une police de caractères qui ne représente pas l'alphabet mais des icônes et d'afficher un caractère donné dans cette police particulière. L'avantage de cette approche, c'est que les caractères ne sont pas sensibles à la taille et sont « beaux » quelle que soit la taille utilisée.

Tout est expliqué chez Elegantthemes

J'ajoute donc à ma feuille de style

@font-face {
	font-family: 'ElegantIcons';
	src:url('fonts/ElegantIcons.eot');
	src:url('fonts/ElegantIcons.eot?#iefix') format('embedded-opentype'),
		url('fonts/ElegantIcons.woff') format('woff'),
		url('fonts/ElegantIcons.ttf') format('truetype'),
		url('fonts/ElegantIcons.svg#ElegantIcons') format('svg');
	font-weight: normal;
	font-style: normal;
}
 
.eleganticon {
	font-family: 'ElegantIcons';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	width: 6em;
	color: #eee;
}
 
.social_twitter:before {
	content: "\e094";	
}
// … et toutes les classes qui m'intéressent, une par icône

N'hésitez pas à partager (voire flattrer) l'article^[2] … en utilisant les liens en bas de l'article.

·

Liens

• Open-Time, plugin AddToAny
• AddToAny
• AddThis
• Korben, boutons de partage sans tracking
• Ohax, boutons sociaux sans tracking git , le blog
• Plugin Export ODT
• Kozlika pour l'info sur Elegant Thème
• Crédit photo chez deviantart par Schokolein