So fügst du Social-Share-Buttons mit ShareThis und Google Tag Manager zu Webflow (oder jeder anderen Website) hinzu, mit deinen OG-Tags und nur auf Blogbeiträgen.
Für diesen Beitrag brauchst du Google Tag Manager auf deiner Website oder deinem Webflow-Projekt. Die Anleitung für Webflow findest du hier, und falls du noch überlegst, ob sich das lohnt, erfährst du hier, warum wir Google Tag Manager in Webflow nutzen. Außerdem brauchst du einen ShareThis-Account, den du hier kostenlos einrichten kannst. Wir richten das für die Blogbeiträge unseres Webflow-Projekts ein, aber es funktioniert für jede Seite deiner Website oder auch für Produktseiten im Ecommerce, und es ist nicht auf Webflow beschränkt: Solange Tag Manager installiert ist, passt alles. Später folgt noch ein ausführlicherer Beitrag über Share-Buttons mit dynamischen CMS-Collection-Feldern in Webflow und nativen Social-Share-Snippets, aber diese Variante ist schnell und unkompliziert, also viel Spaß damit.
Schritt 1: ShareThis und Tag Manager einrichten
Füge zuerst die Domain hinzu, die du verwenden möchtest.
Klicke auf Activate Code und kopiere das Snippet.
Öffne deinen Tag-Manager-Container und erstelle einen neuen Tag. Gib dem Tag einen Namen, wähle Custom HTML und füge das Snippet ein.
Tag Manager
Wähle als Trigger All Pages; wir verwenden den Fully-Loaded-Trigger. Er löst den Tag erst aus, wenn auf der Seite alles geladen ist. Das sorgt für ein besseres Nutzererlebnis und verbessert deine PageSpeed-Ergebnisse bei Google. Eine Anleitung dazu findest du hier, falls du diesen Weg gehen möchtest. Wenn dir das egal ist, reicht All Pages völlig aus.
Speichere jetzt den Tag, klicke auf Submit und veröffentliche den Container.
Gehe zurück zu ShareThis und klicke auf Activate.
Falls eine Warnung erscheint, dass der Code nicht im Head steht, ignoriere sie und mach weiter.
Öffne das Apps Directory.
Wir fügen Sticky Share Buttons hinzu, aber du kannst frei wählen.
Klicke auf Enable tool, und wenn eine Warnung erscheint, ignoriere auch die.
Wähle deine Social Networks, die Ausrichtung und alles andere, was du anpassen möchtest, und klicke auf Update.
Gib ShareThis ein paar Minuten Zeit, dann solltest du deine Share-Buttons sehen:
Das ist alles schön und gut, aber Moment, könntest du einwenden: Du hattest von meinem Blog gesprochen, und jetzt erscheinen die Buttons auf der ganzen Website.
Schritt 2: Festlegen, auf welchen Seiten die Share-Buttons erscheinen
Lass uns dafür sorgen, dass sie nur auf den Blogbeitragsseiten erscheinen.
Öffne Tag Manager. Wenn du den Fully-Loaded-Trigger nicht verwendest, folge Schritt 2A, wenn du ihn verwendest, Schritt 2B.
Schritt 2A: Einen Blogbeitrags-Trigger erstellen
Öffne den Tag, entferne den Trigger mit dem Minuszeichen und erstelle einen neuen Trigger.
Gib dem Trigger einen Namen und wähle Page View als Trigger-Typ.
Bevor wir weitermachen, wirf einen Blick auf die URL-Struktur deiner Blogbeiträge. Unsere Beiträge liegen in der CMS-Collection Post, und alle Post-Slugs beginnen mit /post/, denn das ist der 'Ordner' der Blog-Collection.
<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity
Das macht es uns leicht: Alle Beiträge enthalten /post/, also können wir dafür einen Trigger erstellen. Du verwendest einfach die Struktur, die bei dir gilt.
Wähle beim Trigger also Some Page Views, dann Page URL aus dem Dropdown, dann Contains und anschließend den Teil deines Blog-Slugs, den du verwenden möchtest, bei uns ist das /post/
Achte darauf, dass der neue Trigger ausgewählt und der alte entfernt ist. Speichern, Submit, Publish, und schon bist du startklar. Aber was passiert da eigentlich?
Jedes Mal, wenn Tag Manager ein Page-View-Event sieht, prüft er nur Some Pages, also Seiten, deren Page URL /post/ enthält (oder was immer du verwendet hast). Wenn du die Buttons auch auf anderen Seiten laden möchtest, bei uns sind es die Portfolio-Seiten, erstelle einfach weitere Trigger für diese Seiten und füge sie dem Tag hinzu.
Jetzt hast du Share-Buttons, die mit den OG-Tags deiner Website befüllt werden.
Schritt 2B: Einen Fully-Loaded-Some-Pages-Trigger erstellen
Wenn du den Weg mit dem Fully-Loaded-Trigger gegangen bist, machst du Folgendes.
Sieh dir die URL-Struktur deiner Blogbeiträge an. Unsere Beiträge liegen in der CMS-Collection Post, und alle Post-Slugs beginnen mit /post/, denn das ist unser Blog-Ordner.
<!-- fs-richtext-ignore -->https://www.milkmoonstudio.com/post/installing-free-behavioural-insights-using-google-tag-manager-and-microsoft-clarity
Das macht es uns leicht: Alle Beiträge enthalten /post/, also können wir dafür einen Trigger erstellen. Du verwendest einfach die Struktur, die bei dir gilt.
Klicke auf den Fully-Loaded-Trigger und erstelle eine Kopie.
Gib deinem Trigger einen Namen, wähle Some Custom Events, dann Page URL aus dem Dropdown, dann Contains und trage den Teil deiner URL ein, den du verwenden möchtest, bei uns /post/.
Speichere den Trigger, entferne den alten Trigger und füge deinen neuen Blog-Trigger hinzu. Dann Save, Submit und Publish.
Und fertig. Aber was passiert da eigentlich? Jedes Mal, wenn dein neuer Fully-Loaded-Blog-Trigger auslöst, sucht Tag Manager nach dem Custom Event, aber nur auf Seiten, deren URL bei uns /post/ enthält. Als Bonus wartet er zuerst, bis alles andere geladen ist! Wenn du die Buttons auch auf anderen Seiten laden möchtest, bei uns sind es die Portfolio-Seiten, erstelle einfach weitere Trigger für diese Seiten und füge sie dem Tag hinzu.
Jetzt hast du Share-Buttons, die mit den OG-Tags deiner Website befüllt werden.
Wenn du deine Tags lieber über Cloudflare Zaraz als über Tag Manager laden möchtest, haben wir das in unserer Zaraz-Anleitung behandelt, und die Installation von Microsoft Clarity über Tag Manager folgt demselben Custom-HTML-Muster.
Häufig gestellte Fragen
Wie füge ich Social-Share-Buttons zu Webflow hinzu?
Füge deine Domain zu einem kostenlosen ShareThis-Account hinzu, kopiere das Tracking-Snippet in einen Custom-HTML-Tag in Google Tag Manager, löse ihn auf All Pages (oder mit einem Fully-Loaded-Trigger) aus und aktiviere dann in ShareThis ein Share-Button-Tool wie Sticky Share Buttons. Nach ein paar Minuten erscheinen die Buttons auf deiner Website.
Brauche ich Custom Code in Webflow, um einen Facebook-Share-Button hinzuzufügen?
Für ShareThis selbst nicht. Sobald Google Tag Manager auf deiner Website installiert ist (diese einmalige Installation ist der einzige Code, der in Webflow landet), liegt das ShareThis-Snippet in Tag Manager, du musst also nichts zusätzlich in die Custom-Code-Einstellungen von Webflow einfügen. Die Buttons verwenden die OG-Tags deiner Seite für Titel, Beschreibung und Bild, wenn jemand teilt.
Wie zeige ich die Share-Buttons nur auf Blogbeiträgen an?
Erstelle einen Trigger, der nur auslöst, wenn die Page URL deinen Blog-Ordner enthält, bei uns /post/, und weise ihn dem ShareThis-Tag zu. Schritt 2 oben zeigt sowohl die Page-View- als auch die Fully-Loaded-Variante.
Bremst ShareThis meine Website aus?
Jedes zusätzliche Skript kostet etwas, aber wenn der Tag über einen Fully-Loaded-Trigger auslöst, läuft er erst, nachdem alles andere auf der Seite geladen ist. So bleibt er deinen PageSpeed-Ergebnissen aus dem Weg.
Hast du Fragen? Schreib uns in den Kommentaren und wirf einen Blick auf weitere How-tos hier.
