Dokumentation zum Teilen-Button

Überblick


Diese Dokumentation richtet sich an Entwickler, 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 unserem 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:

<a class="tumblr-share-button" href="https://www.tumblr.com/share"></a>
<script id="tumblr-js" async src="https://assets.tumblr.com/share-button.js"></script>

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

Standardmäßige Eintragsinhalte

Standardmäßig erstellt der Teilen-Button entweder einen Bild-Eintrag oder einen Link-Eintrag – je nachdem, welche Open Graph-Meta-Tags er auf deiner Seite findet. 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 er ein og:image-Tag mit einem Bild findet, das mind. 500px breit ist und dessen Format weniger als 3:1 beträgt. og:description wird für den Eintragstext verwendet.
  • Link-Eintrag. Der Teilen-Button erstellt einen Link-Eintrag, wenn er kein geeignetes Bild für einen Bild-Eintrag findet. og:title wird für den Titel verwendet, og:description für den Text und die kanonische URL wird als die URL des Link-Eintrags 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.

OptionBeschreibungDaten-AttributQuery-String-Parameter
Eintragstyp Tumblr-Eintragstyp. Mögliche Optionen: Text, Bild, Link, Zitat, Chat, Video data-posttype posttype
Tags Liste von durch Kommas getrennten Tags data-tags tags
Titel Verwendet in Text-, Link- und Chat-Einträgen data-title title
Inhalte Der Hauptinhalt des Eintrags hängt von dem Eintragstyp ab, den du wählst. Bei einem Bild-Eintrag ist es eine Bild-URL, bei einem Zitat-Eintrag ein Zitat.

Weitere Details findest du unter dem Punkt "Eintragsinhalte nach Eintragstypen" weiter unten.
data-content content
Unterschrift Wird in Bild-, Link-, Video- und Zitat-Einträgen verwendet. data-caption caption
Quelle anzeigen data-show-via show-via

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: Unterschrift 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 Chatpartner geschrieben haben).

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

Konfiguration des Button-Looks


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

OptionMögliche WerteStandardmäßig
data-color blau
schwarz
weiß
blau
data-notes oben
rechts
keine
keine

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:

PrioritätDatenquelle
1 data-href Attribut am Anchor-Tag des Buttons
2 Kanonisches Link-Element
3 og:url Meta-Element
4 Die URL der Seite

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:

SpracheStandort-Wert
Englisch en_US
Deutsch de_DE
Französisch fr_FR
Italienisch it_IT
Japanisch ja_JP
Türkisch tr_TR
Spanisch es_ES
Russisch ru_RU
Polnisch pl_PL
Portugiesisch pt_PT
Portugiesisch pt_BR
Niederländisch nl_NL
Koreanisch ko_KR
Chinesisch (vereinfacht) zh_CN
Chinesisch (traditionell) zh_TW