Dokumentation zum Teilen-Button

Überblick

Diese Dokumentation richtet sich an Entwickler:innen, die selbst bestimmen wollen, wie ihre Website-Inhalte in Tumblr-Einträgen dargestellt werden, die mit einem Teilen-Button-Widget erstellt werden, der auf ihren Seiten platziert ist.

Wenn du Teilen-Buttons für deine Seite brauchst, erstelle sie mit dem Teilen-Button-Generator.

Einfacher Button

Auf Seiten, die unseren JavaScript-Teilen-Button (s. unten) enthalten, ist der Teilen-Button im Grunde nur ein Anchor-Tag der Klasse tumblr-share-button:

<pre class="wp-block-syntaxhighlighter-code"><a class="tumblr-share-button" href="https://www.tumblr.com/share"></a><a href="https://assets.tumblr.com/share-button.js">https://assets.tumblr.com/share-button.js</a></pre>

Anmerkung: Wenn du mehrere Teilen-Buttons auf deiner Seite hast, musst du das JavaScript nur einmal einfügen, idealerweise direkt vor dem schließenden </body>-Tag.

Standardeinstellungen für Einträge

Standardmäßig erstellt der Teilen-Button entweder einen Bild-Eintrag oder einen Link-Eintrag – je nachdem, welche Open Graph-Meta-Tags auf deiner Seite zu finden sind. Er lässt sich aber auch für beliebige Eintragstypen konfigurieren (s. Anleitung unten). Das sind die standardmäßigen Optionen:

• Bild-Eintrag Der Teilen-Button erstellt einen Bild-Eintrag, wenn ein og:image-Tag mit einem Bild zu finden ist, das mind. 500px breit ist und dessen Seitenverhältnis weniger als 3:1 beträgt. og:description wird für die Bildbeschriftung verwendet.
• Link-Eintrag Der Teilen-Button erstellt einen Link-Eintrag, wenn kein geeignetes Bild für einen Bild-Eintrag gefunden wird. og:title wird für den Titel, og:description für die Bildbeschriftung und die kanonische URL wird als URL für den Link-Eintrag verwendet.

Konfiguration der Eintragsinhalte

Wenn du möchtest, dass der Teilen-Button einen bestimmten Eintragstyp erstellt, stehen dir die unten beschriebenen Optionen zur Verfügung. Du kannst die Optionen als Daten-Attribute am Anchor-Tag des Buttons einstellen oder als Query-String-Parameter in der URL im href-Attribut des Buttons.

Eintragsinhalte nach Eintragstyp

Text
data-title: Titel des Text-Eintrags
data-content: Inhalt des Text-Eintrags

Bild
data-content: Eine einzelne Bild-URL oder eine Liste von durch Kommas getrennten Bild-URLs für eine Fotoserie.
data-caption: Beschriftung eines Bild-Eintrags.

Zitat
data-content: Das Zitat.
data-caption: Zitatquelle (Autor und Zitat).

Link
data-title: Titel des Link-Eintrags.
data-content: Ziel-URL des Links.
data-caption: Beschreibung des Links.

Chat
data-title: Titel des Chat-Eintrags.
data-content: Der Chat-Text (was die Chat-Teilnehmer:innen geschrieben haben).

Video
data-content: URL oder Embed-Code des Videos.
data-caption: Beschriftung eines Video-Eintrags.

Konfiguration des Button-Looks

Du kannst den Look deines Teilen-Buttons mit diesen Daten-Attributen am Anchor-Tag des Buttons konfigurieren:

Kanonische URL

Damit die Anmerkungen-Zähler korrekt aussehen und zählen, musst du die kanonische URL der Seite angeben. Der Teilen-Button sucht nach ihr an den Stellen und in dieser Reihenfolge:

Wenn du einen eigenen Button erstellst (s. unten), musst du neben den Eintragsinhalten auch die kanonische URL im Query-String unterbringen. Zum Beispiel:

http://tumblr.com/widgets/share/tool?canonicalUrl=http://cats.com

Erstelle deinen eigenen Button

Wenn du den Look des Buttons komplett an deine Seite anpassen willst, kannst du gerne deinen eigenen Button erstellen. Lass deinen Button ein Pop-up-Fenster mit dieser URL öffnen: https://www.tumblr.com/widgets/share/tool, und gib dann alle Eintragsinhalte als Query-String-Parameter weiter, wie oben beschrieben. Das Tool zum Teilen wird sich an den Umfang der Inhalte anpassen, wir empfehlen dir aber, das Fenster in einer Größe von 540x600px zu öffnen.

Anmerkungen-Zähler

Du kannst sogar den Anmerkungen-Zähler in deinen Button einbauen, indem du die URL deiner Seite hinter unsere Share-Counter-API setzt und die Zahl der Anmerkungen abrufst. So geht’s:

http://api.tumblr.com/v2/share/stats?url=https://www.tumblr.com/buttons

Du musst die Antwort unbedingt zwischenspeichern und nach ca. 10 Minuten neu laden. Tumblr legt die Anmerkungenzahl für geteilte URLs im Zwischenspeicher für 10 Minuten ab.

Button-Sprache

Du kannst die Sprache deines Buttons mit dem data-locale-Attribut am Anchor-Tag festlegen. Tumblr unterstützt folgende Sprachen: