Ajout de boutons de partage social dans Shaarli
Patch pour le gestionnaire de liens Shaarli ajoutant des boutons de partage social : Twitter, Facebook, LinkedIn, Google+, Pinterest, Scoop.it, mailto et WordPress (si connecté).
1. Télécharger les styles et police Font Awesome, dézipper et envoyer les fichiers dans /inc/font-awesome
2. Modifier le fichier /shaarli/tpl/linklist.html
Ajouter l’appel à Font Awesome dans le <head> html:
<link href="../inc/font-awesome/css/font-awesome.min.css" rel="stylesheet">
Ajouter les ligne suivantes :
<span style="color:rgb(76, 75, 74);"> - partager sur : </span>
<div style ="position:relative;display:inline;font-size:16pt!important;vertical-align:-3px;">
<a target="_blank" title="Twitter" href="https://twitter.com/share?url={$value.url|htmlspecialchars}&text={$value.title|htmlspecialchars(str_replace('|','-',$value.title));}&via=alxju" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=400,width=700');return false;"><i class-"fa fa-twitter-square"></i></a>
<a target="_blank" title="Facebook" href="https://www.facebook.com/sharer.php?u={$value.url|htmlspecialchars}&t={$value.title|htmlspecialchars}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=700');return false;"><i class-"fa fa-facebook-square"></i></a>
<a target="_blank" title="Google +" href="https://plus.google.com/share?url={$value.url|htmlspecialchars}&hl=fr" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><i></i></a>
<a target="_blank" title="LinkedIn" href="https://www.linkedin.com/shareArticle?mini=true&url={$value.url|htmlspecialchars}&title={$value.title|htmlspecialchars}" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><i class-"fa fa-linkedin-square"></i></a>
<a target="_blank" title="Pinterest" href="http://pinterest.com/pin/create/button/?url={$value.url|htmlspecialchars}&media={$value.url|htmlspecialchars}&description={$value.title|htmlspecialchars}" rel="nofollow" onclick="javascript:window.open(this.href, '','menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=650');return false;"><i class-"fa fa-pinterest-square"></i></a>
<a target="_blank" title="Scoop.it" href="http://www.scoop.it/oexchange/share?url={$value.url|htmlspecialchars}&title={$value.title|htmlspecialchars}" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800px,width=1150px');return false;"><i class-"fa fa-pencil-square"></i></a>
<a target="_blank" title="Envoyer par mail" href="mailto:?subject={$value.title|htmlspecialchars}&body={$value.url|htmlspecialchars}" rel="nofollow"><i></i></a>
{if="isLoggedIn()"}
<a target="_blank" title="WordPress" href="https://--url-de-votre-wp-/wp-admin/press-this.php?u={$value.url|htmlspecialchars}&t={$value.title|htmlspecialchars}&s=&v=4" rel="nofollow" onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=800,width=1150');return false;"><i class-"fa fa-share-square"></i></a>
{/if}
</div>
Attention: remplacer <i class- par <i class= (WP modifiait le code sans ça)
Sur mon installation, c’est ligne #55, juste après:
<img src="images/qrcode.png#" width="13" height="13" title="QR-Code"></a></div>
C’est tout!
Démo sur mon Shaarli : http://liens.effingo.be/
C’est une adaptation du code de Korben.
Remarques:
- Ça ne fonctionne pas super bien avec un lien interne Shaarli car l’url donnée n’est pas absolue. On pourrait utiliser la valeur {$scripturl}?{$value.linkdate|smallHash} à la place de {$value.url|htmlspecialchars} mais ça obligerait les cliqueurs suivant à repasser par le Shaarli avant d’arriver sur le lien final (j’aime pas trop ça). Autre proposition?
- [Bug Twitter: le partage pour Twitter ne fonctionne pas quand il y a un pipe (|) dans le texte à partager (or c’est assez fréquent dans les titres d’article, malheureusement).) Fix trouvé en utilisant str_replace]
- Bug Pinterest : la vignette n’apparaît pas, mais cela n’empêche pas d’épingler les images. Pour les vidéos, ça ne marche pas bien. Pinterest demande une valeur &media= que n’a pas Shaarli en l’état. Pas évident d’utiliser les thumbnails pour ça. Pour l’instant c’est donc l’url qui est employée.
- L’icône de Scoop.it et WordPress n’est pas encore disponible dans Font Awesome, j’ai utilisé des substituts.
- Le bouton WordPress n’apparaît que si connecté et demande que l’url de votre installation WP soit correcte pour fonctionner.
Vous avez un conseil pour résoudre ces petits bugs? Des suggestions? Vous pouvez commenter ci-dessous:
