Social-Share-Buttons ohne Drittanbieter-Skripte – Facebook, X, WhatsApp und sieben weitere für PrestaShop

Der übliche Weg kostet Ihre Kunden ihre Privatsphäre

Die meisten Share-Module binden die Widgets der Netzwerke selbst ein. Das heißt: Facebooks Skript, X' Skript und LinkedIns Skript laden auf Ihren Seiten mit, setzen ihre Cookies und protokollieren, wer da war – ganz gleich, ob jemand etwas teilt oder nicht.

Das bedeutet ein Consent-Banner, einen Absatz in der Datenschutzerklärung, drei Drittanbieter-Anfragen auf jeder Seite und einen langsameren Shop. Dafür bekommen Sie einen Teilen-Button.

Seit den Schrems-II-Nachwehen und den Urteilen zu eingebetteten US-Social-Widgets ab 2022 ist das für deutsche Händler kein theoretisches Thema mehr. Dieses Modul geht deshalb einen ganz anderen Weg.

Nichts lädt, bevor jemand klickt

Es gibt überhaupt keinen Social-Network-Code in Ihren Seiten. Nicht verzögert, nicht lazy-geladen, nicht hinter einer Zwei-Klick-Lösung – schlicht nicht vorhanden.

Die Buttons sind gewöhnliche HTML-Buttons. Die Teilen-Adresse setzt ein kleines Skript von uns zusammen, auf Ihrem eigenen Server, in dem Moment, in dem jemand klickt – und erst dann öffnet sich ein Fenster zu Facebook, X oder WhatsApp. Vor diesem Klick steht keine Facebook-URL in Ihrer Seite, zu der ein Browser vorab eine Verbindung aufbauen könnte, es gibt keinen Referrer, der abfließen kann, und nichts, worin eingewilligt werden müsste.

Die einzigen zwei geladenen Dateien sind unsere, von Ihrer eigenen Domain.

Zehn Wege zu teilen

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, E-Mail, Link kopieren und das Teilen-Menü des Geräts.

Acht sind ab Werk aktiv. Telegram und Reddit sind da, wenn Sie sie brauchen – standardmäßig aus, damit die Reihe nicht überladen wirkt.

Zwei davon berühren das Internet überhaupt nie. Link kopieren legt die Adresse in die Zwischenablage. Teilen reicht sie an das Teilen-Menü des Betriebssystems weiter, sodass Ihr Kunde am Telefon seine echten Apps bekommt – die, in denen er tatsächlich schreibt – statt Ihrer Vermutung darüber, welche zählen.

Dieser native Button erscheint nur in Browsern, die ihn unterstützen. Niemand sieht also je einen Button, der nichts tut.

Es soll nach Ihrem Shop aussehen, nicht nach 2013

Vier Einstellungen, und jede Kombination funktioniert: gefüllt, Umriss oder minimal; abgerundet, Kreis oder Quadrat; drei Größen; und Markenfarben oder ein einzelner neutraler Ton.

Das sind vierundfünfzig Erscheinungsbilder, bevor Sie überhaupt entscheiden, ob Textlabels oder eine Überschrift erscheinen sollen. Die Icons sind als Inline-SVG direkt in Ihrer Seite gezeichnet – kein Icon-Font zum Nachladen, kein Bild-Sprite, kein CDN – also übernehmen sie ihre Farbe aus dem Stylesheet und bleiben in jeder Größe scharf. Dazu kommt ein Dark Mode, der der Systemeinstellung des Besuchers folgt.

Eine ehrliche Grenze: Die Markenfarben sind die echten, je Netzwerk fest hinterlegt. Ihre Wahl lautet Markenfarben oder neutral – kein Farbwähler pro Netzwerk.

Unter dem Produkt, seitlich oder wo Sie wollen

Standardmäßig erscheint eine Teilen-Zeile unter dem Produkt. Dazu kommt eine schwebende Leiste – linker oder rechter Rand, auf allen Seiten oder nur auf Produktseiten –, die aus ist, bis Sie sie einschalten, und die auf dem Telefon an den unteren Bildschirmrand wandert.

Darüber hinaus implementiert das Modul die Widget-Schnittstelle von PrestaShop: {widget name='socialpower'} setzt die Buttons in jedes beliebige Theme-Template. Weil jede Platzierung durch denselben Code läuft, funktioniert das Verschieben des Moduls auf einen anderen Hook unter Design → Positionen wirklich, statt nur halb.

3,7 KB, und sonst nichts

Ein Stylesheet und ein Skript – zusammen 3,7 KB gzip. Kein jQuery. Kein Framework. Kein Polyfill-Paket. Kein Webfont.

Das Skript wird am Seitenende geladen, blockiert also nie das Rendering, und es steigt auf Seiten ohne Buttons sofort wieder aus.

Damit wir ehrlich bleiben: Diese zwei kleinen Dateien werden auf jeder Front-Office-Seite registriert, nicht nur auf den Seiten, auf denen Buttons erscheinen. In einem normal konfigurierten Shop bündelt PrestaShop sie mit den Assets des Themes, sodass die praktischen Kosten gegen null gehen – aber es sind zwei Dateien, nicht null, und das sagen wir lieber selbst, als dass Sie es herausfinden.

Was es bewusst nicht tut

Es gibt keine Share-Zähler, und das ist eine Entscheidung, keine Lücke. Facebook, X und LinkedIn haben ihre öffentlichen Zähl-Endpunkte zwischen 2015 und 2018 allesamt abgeschaltet. Jedes Modul, das Ihnen heute noch eine Zahl zeigt, zeigt entweder eine veraltete oder bezahlt einen Dritten dafür – und einen Dritten zu bezahlen heißt, ihm Ihre Besucher zu schicken. Lieber gar keine Zahl als eine falsche.

Es telefoniert nicht nach Hause. Keine Lizenzprüfung, keine Analytics, kein Aufruf zu uns, in keiner Form.

Nichts gespeichert, nirgends

Keine Cookies. Kein Browser-Speicher. Keine Datenbanktabellen – es werden keine angelegt, also bleiben auch keine zurück. Das Modul schreibt zwölf Einstellungen und sonst nichts, und beim Deinstallieren verschwinden auch die.

Zwei Dinge, die man benennen statt beschönigen sollte, weil es Browser-APIs sind und nicht gar nichts. Link kopieren nutzt die Clipboard-API, die lokal schreibt und nichts irgendwohin sendet. Teilen übergibt die Adresse dem Betriebssystem, und was das damit anstellt, ist dessen Sache, nicht unsere. Keines von beidem ist ein Problem; beides ist ehrlicher benannt als verschwiegen.

Für die Tastatur gebaut

Die Buttons sind echte <button>-Elemente, keine Links und keine gestylten Divs. Sie nehmen also den Fokus an und lösen per Tastatur so aus, wie ein Browser es erwartet, und Screenreader kündigen sie als Buttons an. Jeder trägt ein Label mit dem Netzwerknamen, und die Icons sind vor assistiver Technik verborgen, damit nichts doppelt vorgelesen wird.

Drei Grenzen, klar gesagt. Die Fokus-Outline des Browsers ist durch unseren eigenen Indikator ersetzt – ein Anheben und ein Schatten, der in den Stilen gefüllt und Umriss deutlich ablesbar ist. Im Stil minimal wird dieser Schatten bewusst unterdrückt, sodass der Tastaturfokus dort nur noch als leichtes Anheben und als veränderte Deckkraft erscheint: Wenn zu Ihren Kunden Tastaturnutzer gehören, wählen Sie besser gefüllt oder Umriss. Und von den drei Größen erfüllt nur die große die 44-Pixel-Empfehlung für Touch-Ziele; die kleinste misst 32 Pixel.

Einrichten, während Sie es ansehen

Die Konfigurationsseite zeigt eine Vorschau, gebaut aus Ihren gespeicherten Einstellungen und der Adresse Ihres eigenen Shops – die echte Komponente, gerendert von demselben Code, den auch Ihr Storefront verwendet, kein Screenshot davon. Sie wird beim Speichern neu gezeichnet, nicht während des Tippens – der Ablauf lautet also auswählen, speichern, ansehen. Dafür ersparen Sie sich, für jede Änderung den Shop in einem zweiten Tab zu öffnen.

In acht Sprachen übersetzt

Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch – jede Zeichenkette, auch die, die Ihre Kunden sehen: die Überschrift „Teilen", die Netzwerknamen und die Bestätigung „Kopiert!".

Kompatibilität

PrestaShop 1.7 bis 9. Drei Hooks plus die Widget-Schnittstelle, keine Overrides und keine Theme-Änderung.

Version 3 war eine Neuentwicklung. Die eigenen Datenbanktabellen des alten Moduls werden beim Upgrade gelöscht, seine achtzehn Alt-Hooks werden abgemeldet und die überflüssigen Dateien von der Platte entfernt – einschließlich der Widget-Screenshots, die früher mitgeliefert wurden.

Häufig gestellte Fragen

Lädt das Modul Facebooks oder X' Code auf meine Seiten?

Nein – auch nicht verzögert oder lazy-geladen. Es steckt überhaupt kein Social-Network-Skript in Ihren Seiten. Die Buttons sind schlichte HTML-Buttons, und die Teilen-Adresse setzt unser eigenes kleines Skript in dem Moment zusammen, in dem jemand klickt. Vor diesem Klick befindet sich nichts von irgendeinem sozialen Netzwerk in Ihrer Seite.

Brauche ich dafür ein Cookie-Banner?

Das Modul gibt Ihnen nichts zu deklarieren: Es setzt keine Cookies, schreibt nichts in den Browser-Speicher und stellt vor einem Klick keine Anfrage an Dritte. Sobald jemand klickt, landet er auf der Teilen-Seite des jeweiligen Netzwerks – das ist dann seine eigene Beziehung dorthin. Was das für Ihr konkretes Banner bedeutet, ist eine Frage an denjenigen, der Sie im Datenschutz berät: Wir können Ihnen genau sagen, was der Code tut – nämlich nichts bis zu einem Klick –, aber nicht, was Ihre Aufsichtsbehörde von Ihrem Shop als Ganzem erwartet.

Welche Netzwerke sind dabei?

Facebook, X, WhatsApp, Pinterest, LinkedIn, Telegram, Reddit, E-Mail, Link kopieren und das Teilen-Menü des Geräts. Acht sind standardmäßig an; Telegram und Reddit werden ausgeschaltet ausgeliefert, damit Sie sie ergänzen können, wenn Sie sie möchten.

Zeigt es Teilen-Zähler an?

Nein, mit Absicht. Facebook, X und LinkedIn haben ihre öffentlichen Zähl-Endpunkte vor Jahren abgeschaltet. Eine Zahl kommt heute also entweder von einem bezahlten Dritten – was bedeutet, ihm Ihre Besucherdaten zu schicken – oder sie ist nicht echt. Lieber zeigen wir nichts als etwas Falsches.

Wo erscheinen die Buttons?

Standardmäßig unter dem Produkt. Dazu gibt es eine schwebende Leiste für den linken oder rechten Rand, auf allen Seiten oder nur auf Produktseiten, ausgeschaltet, bis Sie sie wollen. Und {widget name='socialpower'} setzt sie an jede Stelle eines Theme-Templates. Sie können das Modul außerdem unter Design → Positionen auf einen anderen Hook verschieben, und dort funktioniert es dann sauber.

Kann ich die Farben ändern?

Sie können zwischen den echten Markenfarben jedes Netzwerks und einem einzelnen neutralen Ton wechseln und dazu gefüllt, Umriss oder minimal, drei Formen und drei Größen wählen. Was nicht geht: eine eigene Farbe je Netzwerk setzen – die Markenfarben sind die echten und sie sind fest.

Bremst es meinen Shop aus?

Ein Stylesheet und ein Skript, zusammen 3,7 KB gzip, kein jQuery und keine externe Anfrage. Das Skript lädt am Seitenende, blockiert die Seite also nie. Gut zu wissen: Diese zwei Dateien werden auf jeder Front-Office-Seite registriert, nicht nur dort, wo Buttons erscheinen – wobei PrestaShop sie normalerweise mit den Assets Ihres Themes bündelt.

Ist es barrierefrei?

Mehr als die meisten. Echte Buttons statt gestylter Links, damit Tastaturfokus und Auslösen nativ funktionieren und Screenreader sie korrekt ankündigen, mit einem Label je Netzwerk und vor assistiver Technik verborgenen Icons. Drei Einschränkungen, die Sie kennen sollten: Der Fokusindikator ist unser eigenes Anheben mit Schatten statt einer Browser-Outline; dieser Schatten ist im Stil „minimal" abgeschaltet, wodurch der Tastaturfokus dort deutlich schwächer ausfällt – wählen Sie also gefüllt oder Umriss, wenn Ihnen das wichtig ist; und nur die große Größe erfüllt die 44-Pixel-Empfehlung für Touch-Ziele.

Öffnet der WhatsApp-Button auf dem Telefon die App?

Ja, allerdings ohne dass wir dafür das Gerät erkennen. Der Button nutzt immer WhatsApps eigenen Universal Link, und WhatsApp erledigt den Rest – die App auf dem Telefon, WhatsApp Web auf dem Desktop.

Was ist der Teilen-Button, der nur auf meinem Telefon erscheint?

Das ist das Teilen-Menü des Betriebssystems, erreicht über die Web Share API des Browsers. Es gibt Ihrem Kunden seine echten Apps statt einer festen Liste. Es erscheint nur dort, wo der Browser es unterstützt – das Modul prüft das vorher, damit Desktop-Besuchern nie ein Button gezeigt wird, der nichts tut.

Speichert es etwas über meine Besucher?

Nichts. Keine Cookies, kein Browser-Speicher, keine Datenbanktabellen – es legt keine an, also gibt es hinterher auch nichts aufzuräumen. Es schreibt zwölf Konfigurationseinstellungen und entfernt sie beim Deinstallieren wieder.

Kann ich vor dem Speichern sehen, wie es aussehen wird?

Ja. Die Konfigurationsseite rendert eine Vorschau aus Ihren gespeicherten Einstellungen und Ihrer eigenen Shop-Adresse, mit demselben Code, der die Buttons auch im Storefront zeichnet – was Sie sehen, bekommen Ihre Kunden also wirklich, keine Illustration. Sie wird beim Speichern neu gezeichnet, nicht während des Tippens.

Was passiert mit meinen Einstellungen aus Version 2?

Version 3 ist eine Neuentwicklung und aktualisiert sauber: Die alten Datenbanktabellen werden gelöscht, die achtzehn Alt-Hooks abgemeldet, die modernen an ihrer Stelle registriert und die überflüssigen Dateien von der Platte entfernt. Sehen Sie sich danach die Darstellungseinstellungen an, denn davon gibt es jetzt mehr.

Welche Sprachen spricht es?

Acht: Deutsch, Englisch, Französisch, Italienisch, Niederländisch, Polnisch, Spanisch und Türkisch. Das schließt die Zeichenketten ein, die Ihre Kunden tatsächlich lesen – die Überschrift „Teilen", die Netzwerknamen und die Bestätigung „Kopiert!" – nicht nur das Backoffice.