Social Media - statische Buttons

veröffentlicht am 22.03.2017 mit 306 Worten - Lesezeit: 2 Minute(n) in * GEBRABBEL * PROGRAMME * SOFTWARE *

Nun hab ich mich lange gewehrt, solche Datensammel-Buttons auf meiner Seite zu integrieren, aber ich habe mir sagen lassen, daß die “sozialen Netzwerke” immer noch genutzt werden und Leute auch noch Artikel “sharen”, “liken” und “tweeten”.

Ich nutze für meine Webseiten den statischen Webseiten-Generator Hugo,

um schnelle und schlanke Seiten zur Verfügung zu stellen. Außerdem nerve ich meine Besucher nicht mit Tracking-Tools und Cookies und dgln.
Deshalb war es mir ein Graus, Buttons einzubinden, die

die Ladezeiten endlos verlängern durch die Einbindung externer Java-Script-Dateien
den Besucher schon ausspionieren, bevor er überhaupt die Seite gelesen hat.

In 6 Jahre alten Veröffentlichungen habe ich dann gelesen, daß es möglich sei, diese Funktionen als ganz normale Links ebenfalls zur Verfügung zu stellen, und siehe da: es funktioniert auch im Jahre 2017 noch.

Als Code-Schnipsel in ein Hugo-Template eingebaut sieht das dann so aus:

<!-- Statische Buttons einbinden -->
<div class="social-media">
<p>Diesen Artikel weiterempfehlen:&nbsp;&nbsp;
<a style="background: #5DB5DE; color: #fff; padding: 0px 5px 0px 5px;" title="Bei Twitter empfehlen" href="https://twitter.com/intent/tweet?source=webclient&text={{ .Title }} {{ .Permalink }}" target="blank" rel="nofollow"><span>Twitter</span></a> 
<a style="background: #3D62B3; color: #fff; padding: 0px 5px 0px 5px;" title="Bei Facebook empfehlen" href="https://www.facebook.com/sharer/sharer.php?u={{ .Permalink }}&t={{ .Title }}" target="blank" rel="nofollow"><span>Facebook</span></a> 
<a style="background: #D34836; color: #fff; padding: 0px 5px 0px 5px;" title="Bei Google+ empfehlen" href="https://plusone.google.com/_/+1/confirm?hl=de&url={{ .Permalink }}&title={{ .Title }}" target="blank" rel="nofollow"><span>Google+</span></a>
<a style="background: #929292; color: #fff; padding: 2px 5px 3px 5px;" title="Per e-mail empfehlen" href="mailto:?subject={{ .Title }}&amp;body={{ .Description }}%0A{{ .Permalink }}%09"  target="blank" rel="nofollow"><span>e-m@ail</span></a></div></p>
<!-- /Statische Buttons einbinden -->

Es wird jeweils der Seitentitel und die URL des Artikels in den Button eingebunden und erst beim Klicken des Links an den jeweiligen Dienst übergeben, ansonsten sind die Links einfach stumm … genau so mag ich das.

Und für alle, die “traditionell leben”, gibt’s noch einen grauen Button, mit dem ein Artikel unkompliziert per e-mail (hier wird zusätzlich noch die Kurzbeschreibung mit übergeben) weiterempfohlen werden kann … ;)

Social Media - statische Buttons

weitere Artikel