Lösungen für Share-Buttons gab es früher in Hülle und Fülle. Heute werden viele davon mit Argwohn betrachtet – dank der DSGVO. Vergessen wurde indes, dass kaum eine Lösung auf Smartphones wirklich funktioniert. Zeit also, zeitgemäße Lösungen für das Teilen Ihrer Blogartikel zu diskutieren.
Welche Lösungen für Share-Buttons sind überhaupt noch DSGVO-konform?
Heise-Shariff: Gemeinhin gelten Lösungen für Share-Buttons als DSGVO-konform, wenn Sie vorab – vor dem Anklicken des Buttons – keine Daten übertragen. Deshalb hat „heise.de“ die sog. „Shariff“-Lösung entwickelt, bei der die üblichen Share-Buttons mit einem Schutzschild versehen werden: Die Buttons, die normalerweise bei jedem Webseitenaufruf Daten an Plattformen wie etwa Facebook übermitteln, sind zunächst deaktiviert – optisch erkennt man aber keinen Unterschied! Durch das Teilen per Klick werden sie aktiviert, erst dann findet eine Übermittlung der Daten an den jeweiligen Anbieter statt. Für TYPO3 existiert eine komfortable Erweiterung, allerdings lässt sich „Shariff“ auch ohne Plug-in integrieren.
Sharingbuttons.io: Hierbei handelt es sich um eine Lösung, die ohne JavaScript auskommt. Ein Tracking findet nicht statt. Die Share-Buttons sind bloße Links, die über zusätzliche URL-Parameter weitere Informationen wie den Titel Ihres Beitrags an die „Social Media“-Plattformen übergeben. Zwar lassen sich mit dieser Lösung keine Counter realisieren, für die meisten Zwecke aber dürfte sie völlig ausreichend sein.
Warum funktionieren Share-Buttons auf vielen Endgeräten nicht?
Die Share-Buttons selbst sind in aller Regel nicht das Problem, sondern das Verhalten der Nutzer: Facebook & Co. werden meist über Apps aufgerufen, nur selten loggen sich Nutzer über den Browser ein. Klassische Websites oder Blogs aber werden in der Regel über den Web-Browser aufgerufen. Möchte ein Nutzer nun einen Artikel teilen, öffnet sich die Browser-Variante der „Social Media“-Plattform, nicht die installierte App. Im Ergebnis kann der Artikel nicht geteilt werden, der Nutzer ist ja nicht eingeloggt. Die bekannten Share-Buttons sind für Smartphones somit kontraproduktiv und sollten dort nicht mehr genutzt werden.
„Web Share API“ greift auf native Share-Funktionen von mobilen Endgeräten zu
Versierte Nutzer wissen, dass sie Webseiten oder Blog-Beiträge über die native Share-Funktion ihres Smartphones teilen können. Dennoch kann es Sinn ergeben, auf mobilen Endgeräten einen funktionierenden Share-Button zur Verfügung zu stellen. Möglich macht es die „Web Share API“, mit der Sie auf die native Share-Funktion zugreifen können, um unter Ihren Blog-Artikeln eine sinnvolle Teile-Funktion zu implementieren.
Verfügbarkeit der „Web Share API“
Bei der „Web Share API“ handelt es sich um eine recht neue Technik, die nicht von allen Browsern unterstützt wird. Gedacht ist sie ohnehin nur für mobile Endgeräte. Aktuell wird sie in neueren Versionen des Chrome- und Safari-Browsers auf Android- und Apple-Endgeräten angeboten. Da Smartphones in der Regel keine so hohe Lebensdauer haben wie etwa PC oder Notebooks, ist bereits heute eine hohe Verbreitung vorhanden. Im Zweifel können Sie in Ihren Analyse-Daten prüfen, welche Browser-Versionen Ihre Anwender nutzen und ob sie die „Web Share API“ unterstützen.
Was ist mit mobilen Browsern wie Firefox?
Leider bietet der mobile Firefox derzeit noch keinen Support für die „Web Share API“. Da die bisherigen Buttons aus den bereits erwähnten Gründen ohnehin keine Lösung sind, können Nutzer immer noch auf die native Share-Funktion auf dem Smartphone zurückgreifen. Update: Mittlerweile sollen Safari (iOS) und Firefox für Android die „Web Share API“ unterstützen!
Nutzen Sie den Priming-Effekt und eine gute Usability
Viele Nutzer sind es gewohnt, Texte einfach teilen zu können. Ein Share-Button am Ende eines Artikels macht es Ihnen zweifellos besonders leicht. Wichtig ist: Wenn er verfügbar ist, dann muss er auch funktionieren. Aus diesem Grund bietet sich die „Web Share API“ speziell auf mobilen Endgeräten an.
Weiterer Vorteil der „Web Share API“: Flexibilität!
Bestimmen Sie, welche Inhalte geteilt werden können. Beispielsweise können Sie mit der „Web Share API“ festlegen, dass ein bestimmter Content, ein E-Book etwa, mit dem Share-Button übergeben wird. Tatsächlich lassen sich so URLs, Texte und sogar Dateien teilen. Die „Web Share API“ bietet Ihnen somit äußerst flexible Möglichkeiten, ganz unterschiedliche Inhalte zu verbreiten.
„Klassische“ Share-Buttons nur für größere Endgeräte, „Web Share API“ für geeignete Browser auf Smartphones & Tablets
Auf größeren Endgeräten, auf Notebooks oder PC also, können Sie weiterhin die „klassischen“ Share-Buttons nutzen, etwa die Shariff-Lösung oder die einfache Link-Variante. Damit bieten Sie Ihren Nutzer auf allen Endgeräten die bestmögliche Usability und machen es ihnen möglichst leicht, Ihren Content in sozialen Netzen oder in privaten Nachrichten zu teilen.
Fluid-Template (1):
<button class="share-button native-icon" type="button" title="Share this article"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M352,320c-22.6,0-43.4,7.8-59.8,20.9l-102.5-64.1c3-13.7,3-28,0-41.7l102.5-64.1c16.4,13.1,37.2,20.9,59.8,20.9 c53,0,96-43,96-96S405,0,352,0s-96,43-96,96c0,7.2,0.8,14.1,2.3,20.8l-102.5,64.1C139.4,167.8,118.6,160,96,160c-53,0-96,43-96,96 s43,96,96,96c22.6,0,43.4-7.8,59.8-20.9l102.5,64.1C256.8,402,256,409,256,416c0,53,43,96,96,96s96-43,96-96S405,320,352,320z"/></svg> <span>Share</span> </button>
Fluid-Template (2):
<script>
const shareButton = document.querySelector('.share-button');
const shareDialog = document.querySelector('.share-dialog');
const closeButton = document.querySelector('.close-button');
shareButton.addEventListener('click', event => {
if (navigator.share) {
navigator.share({
title: '<f:format.raw>{data.title}</f:format.raw>',
url: '<f:format.raw>{f:uri.page(pageUid: data.uid, absolute: '1')}</f:format.raw>'
}).then(() => {
console.log('Thanks for sharing!');
})
.catch(console.error);
} else {
shareDialog.classList.add('is-open');
}
});
closeButton.addEventListener('click', event => {
shareDialog.classList.remove('is-open');
});
</script>TypoScript (optional):
page.footerData.93 = TEXT page.footerData.93.value ( <script> /* code by webdevtrick ( webdevtrick.com ) */ $(document).ready(function() { var ua = navigator.userAgent.match(/(opera|chrome|safari|firefox)\/?\s*(\.?\d+(\.\d+)*)/i), browser; browser = ua[1].toLowerCase(); $('div.show-button.' + browser).addClass("active"); }); </script> )
CSS (optional):
.show-button{display:none}
.show-button.active{display:block;text-align:center}
@media (min-width:992px){.show-button{display:none!important}}
Sie möchten die „Web Share API“ in Ihrem Web-Projekt (mit TYPO3 oder WordPress) nutzen? Vielleicht möchten Sie sich auch erst einmal unverbindlich beraten lassen? In beiden Fällen sind wir gerne für Sie da.