Technologieführer

Blogger: Share-Buttons mit AddThis einbinden

5 min read Blogger Aktualisiert 21 Oct 2025
Blogger: Share-Buttons mit AddThis einbinden
Blogger: Share-Buttons mit AddThis einbinden

Fügen Sie Share-Buttons zu Ihrem Blogger-Blog hinzu, um Social-Media-Verbreitung zu erhöhen. Nutzen Sie die integrierte Blogger-Option für schnelle Aktivierung oder AddThis für volle Kontrolle über Dienste, Design und Weiterleitungen. Diese Anleitung führt Schritt für Schritt durch Registrierung, Einbau des Codes und Anpassung einschließlich Twitter- und Facebook-Buttons.

Warum Share-Buttons wichtig sind

Kurz gesagt: Inhalte, die leicht geteilt werden können, erzielen mehr Reichweite. Share-Buttons senken die Hürde fürs Teilen, zeigen soziale Beweise und steigern Traffic auf Posts.

Wichtig: Ein Share-Button ist kein Ersatz für gute Inhalte. Er ist ein Verstärker.

Was Blogger standardmäßig bietet

Blogger hat eine einfache Option, Share-Buttons anzuzeigen. So aktivieren Sie die Standardfunktion:

  • Dashboard öffnen
  • Design auswählen
  • Im Bereich “Blog-Beiträge” auf Bearbeiten klicken
  • Im Popup die Option “Share-Buttons anzeigen” aktivieren
  • Zuerst im Popup Speichern, dann auf der Hauptseite Speichern

Share-Buttons-Option in den Blogger-Design-Einstellungen

Nach Aktivierung erscheinen die Standard-Share-Buttons neben Ihren Beiträgen:

Share-Buttons neben Blogbeitrag

Hinweis: Die Standardbuttons sind einfach, aber oft eingeschränkt. Beliebte Elemente wie Facebook Like oder ein nativer Twitter Tweet mit via-Attribution fehlen meist.

Warum AddThis verwenden

AddThis ist ein externer Dienst, der deutlich mehr Konfigurationsmöglichkeiten bietet:

  • Auswahl vieler Dienste (Facebook, Twitter, Pinterest, LinkedIn etc.)
  • Verschiedene Stile und Größen
  • Einbettung per HTML/Script für volle Kontrolle
  • Mögliches Tracking und Auswertung (falls gewünscht)

Alternative Dienste sind ShareThis, AddToAny oder eigene Implementationen der jeweiligen Plattformen. AddThis ist jedoch besonders einsteigerfreundlich.

AddThis einrichten (Schritt für Schritt)

  1. Account erstellen bei AddThis.
  2. Auf der AddThis-Startseite “Get AddThis” oder “Get Started” wählen.

AddThis Startseite mit Button

  1. Im Vorschaufenster sehen Sie, wie die Buttons aussehen. Für volle Kontrolle wählen Sie “Customize”.

AddThis Customize Panel für Auswahl von Diensten und Stil

  1. Unter Platform statt “Blogger” “Website” wählen, damit Sie den vollständigen HTML-Code erhalten.

AddThis Platform auf Website einstellen

  1. Auf “Grab It” klicken und den angezeigten HTML-Code kopieren.

AddThis-Code in Blogger einfügen

  1. Blogger-Dashboard öffnen
  2. Design auswählen
  3. Auf “HTML bearbeiten” klicken, damit der gesamte Template-Code sichtbar wird
  4. “Widget-Vorlagen erweitern” aktivieren

Blogger HTML bearbeiten und Widget-Vorlagen erweitern

  1. Suchen Sie die Stelle, an der die Share-Buttons erscheinen sollen. Häufig ist das direkt unter dem Beitragstext. Fügen Sie den AddThis-Code beispielsweise direkt unter dem data:post.body Tag ein.

Beispielplatzierung des AddThis-Codes unter dem Beitragstext

  1. Template speichern und Blog anzeigen, um das Ergebnis zu prüfen.

Fertige AddThis-Share-Buttons im Blog

Was im AddThis-Code wichtig ist

Im kopierten HTML finden Sie meistens zwei Teile: das HTML-Fragment der Buttons und das Script, das die Buttons initialisiert. Ein einfacher, typischer Aufbau sieht so aus:

Für Blogger-Templates können zusätzlich expr-Attribute verwendet werden, damit Titel und URL des aktuellen Posts automatisch übergeben werden:

Erläuterung in einer Zeile:

  • expr:addthis:title=’data:post.title’ sorgt dafür, dass der Titel des jeweiligen Blogbeitrags in Shares erscheint.
  • expr:addthis:url=’data:post.url’ hängt die permanente URL des Beitrags an.

Wenn jemand den Twitter-Button benutzt, könnte der Tweet so aussehen:

Titel des Beitrags https://example.url via @AddThis

Mit tw:via=’mein_twittername’ ersetzen Sie @AddThis durch Ihren Account, z. B. tw:via=’mein_twittername’.

Beispiel: Tweet-Button mit via-Attribution

So fügen Sie konkret einen Tweet-Button ein, der Ihren Account nennt:

Und für Facebook Like:

Diese Bestandteile können Sie beliebig kombinieren oder entfernen.

Finales Beispiel eines konfigurierten Codes

Auf meinem Blog sieht das so aus:

Endresultat der AddThis-Buttons im Blog

Anpassungen und Erweiterungen

  • Stil: Sie können andere AddThis-Stile wählen oder per CSS überschreiben.
  • Dienste: In der AddThis-Verwaltung zusätzliche Dienste aktivieren oder deaktivieren.
  • Position: Buttons oben, unten oder als schwebendes Widget platzieren.
  • Tracking: AddThis bietet optionale Metriken. Datenschutzhinweis beachten.

Wichtig: Änderungen an Templates testen und beim Livegang ein Backup der Vorlage behalten.

Alternative Ansätze

  • Native Buttons von Facebook und Twitter direkt einbinden (Mehr Kontrolle, weniger Drittanbieter).
  • Dienste wie ShareThis oder AddToAny verwenden.
  • Eigene Short-Links und Open-Graph-Tags setzen, um Teilen unabhängig von Drittanbietern zu optimieren.

Kurze Checkliste vor dem Livegang

  • Backup der Template-Datei erstellen
  • Buttons an Zielposition eingefügt
  • expr:addthis:title und expr:addthis:url geprüft
  • Twitter via-Attribution gesetzt falls gewünscht
  • Darstellung mobil geprüft
  • Datenschutzhinweise / Cookie-Hinweis überprüft

Rollenspezifische Aufgaben

  • Blogger-Besitzer: Inhalte und Position prüfen, Social-Attribution festlegen
  • Entwickler: Template-Integration, CSS-Anpassungen, Performance testen
  • Marketer: Dienste auswählen, Metriken konfigurieren, A/B-Testideen

Merkhilfe: Wann AddThis nicht ideal ist

  • Wenn Sie keine Drittanbieter-Scripts verwenden dürfen (Compliance/DSGVO ohne Einwilligung)
  • Wenn Sie maximale Ladezeit-Optimierung benötigen und jedes externe Script vermeiden wollen
  • Wenn Sie sehr spezielle, native Plattformfunktionen brauchen, die AddThis nicht bietet

Entscheidungshilfe (Flussdiagramm)

flowchart TD
  A[Brauche ich schnelle Lösung?] -->|ja| B[Standard-Blogger-Share aktivieren]
  A -->|nein| C[Benutzerdefinierte Lösung wählen]
  C --> D{Will ich viele Dienste und Konfig.}
  D -->|ja| E[AddThis oder ShareThis]
  D -->|nein| F[Native Buttons 'Facebook/Twitter']
  E --> G[Templates anpassen und testen]
  F --> G
  B --> H[Design prüfen]
  G --> H
  H --> I[Livegang mit Backup]

Mini-Glossar (ein Satz pro Begriff)

  • Share-Buttons: Klickbare Elemente, die Inhalte an Social-Media-Plattformen senden.
  • expr-Attribute: Blogger-Template-Ausdrücke, die dynamische Werte aus dem Post einfügen.
  • via-Attribution: Twitter-Feld, das den Account nennt, der den Inhalt teilt.

Datenschutz und DSGVO-Hinweis

Externe Share-Services können Daten an Dritte senden. Prüfen Sie die Datenschutzanforderungen für Ihre Zielgruppe und fügen Sie gegebenenfalls eine Einwilligungslösung hinzu.

Schnelltests und Akzeptanzkriterien

  • Buttons laden innerhalb akzeptabler Ladezeit (z. B. unter 2 s für initiales Laden der Seite)
  • Teilen über jedes Icon fügt korrekten Titel und URL ein
  • Twitter ersetzt via korrekt durch Ihren Account
  • Darstellung auf Mobilgeräten passt ohne Überlappung

Kurze Zusammenfassung

AddThis erleichtert die Integration und Individualisierung von Share-Buttons in Blogger. Für einfache Anforderungen reicht die integrierte Option; für Kontrolle und Branding ist AddThis oder ein ähnlicher Dienst zu empfehlen. Testen Sie Änderungen immer in einer Kopie des Templates und beachten Sie Datenschutzpflichten.

Wichtige Links und Ressourcen

Autor
Redaktion

Ähnliche Materialien

Snow Leopard USB-Installer erstellen
Mac

Snow Leopard USB-Installer erstellen

Yubby: Videokanal aus 30 Plattformen erstellen
Webdienste

Yubby: Videokanal aus 30 Plattformen erstellen

Speicherbalken in Windows 10 anzeigen
Anleitung

Speicherbalken in Windows 10 anzeigen

Ordnerfarben in Windows: Anleitung
Windows Tipps

Ordnerfarben in Windows: Anleitung

iPhone-Startbildschirm anpassen – vollständige Anleitung
Anleitungen

iPhone-Startbildschirm anpassen – vollständige Anleitung

mod_deflate auf Lighttpd 1.4 (Debian Etch)
Webserver

mod_deflate auf Lighttpd 1.4 (Debian Etch)