Referenz

Attribute der Abo-Schaltfläche

In diesem Abschnitt kannst du erfahren, wie ein <div>-Element für eine Abo-Schaltfläche erstellt wird. In der unten folgenden Liste werden die erforderlichen und optionalen Attribute für das Element erläutert. Mit optionalen Attributen kannst du sowohl das Layout als auch das Design der Schaltfläche bestimmen und festlegen, ob die aktuelle Abonnentenzahl für den Kanal angezeigt werden soll.

Erforderlich

• class – Setze den Wert für dieses Attribut auf g-ytsubscribe. Dadurch wird das <div>-Element als Container für eine Abo-Schaltfläche definiert, deren Größe – wie im nächsten Abschnitt beschrieben – von YouTube dynamisch angepasst werden kann.

• Darüber hinaus musst du einen Wert für eines der folgenden zwei Attribute angeben:

  • data-channel – Der Name des mit der Schaltfläche verknüpften Kanals. Beispielwert: GoogleDevelopers.
  • data-channelid – Die mit der Schaltfläche verknüpfte Kanal-ID. Beispielwert: UC_x5XG1OV2P6uZZ5FSM9Ttw. Deine Kanal-ID kannst du entweder in deinen YouTube-Kontoeinstellungen oder mit dem APIs Explorer abrufen, den du weiter unten in diesem Dokument finden wirst. Weitere Informationen zur Verwendung von Kanal-IDs

Optional

• data-layout – Dieses Attribut legt das Format für die Schaltfläche fest. Die folgenden Attributwerte sind zulässig:

  • default (Standard) – Die Abo-Schaltfläche besteht aus einem Symbol in Form der "Wiedergabe"-Schaltfläche neben dem Wort "Abonnieren", das in der Sprache des Nutzers angezeigt wird. Die zutreffende Sprache richtet sich entweder nach der Spracheinstellung oder nach dem Standort des jeweiligen Nutzers.
  • full (Vollständig) – Zusätzlich zur Standardschaltfläche werden auch der Name und der Avatar des Kanals angezeigt.

• data-theme – Dieses Attribut gibt das Farbschema an, das für die Schaltfläche verwendet wird. Gültige Werte sind default (Standard) und dark (Dunkel). Das dark-Design eignet sich besonders gut, wenn die Schaltflächen in der Anwendung vor einem relativ dunklen Hintergrund erscheinen.

• data-count – Dieses Attribut legt fest, ob die Abonnentenzahl für den Kanal neben der Schaltfläche eingeblendet wird. Standardmäßig ist die Abonnentenzahl sichtbar. Für kostenpflichtige Kanäle wird die Abonnentenzahl jedoch nicht angezeigt. Gültige Werte sind default (Standard) und hidden (Ausgeblendet).

Dynamische Erstellung

Als Alternative zum Konfigurationstool und zum Standardcode für die Einbettung kannst du deinen Subscribe Button auch dynamisch erstellen. Auf diese Weise wird verhindert, dass die JavaScript-Funktionalität der API das gesamte DOM nach Schaltflächen durchsucht, was u. U. zu einer beschleunigten Erstellung von Schaltflächen führen kann.

Der Subscribe Button unterstützt als Bestandteil der Google+ JavaScript API standardmäßige go- und render-Methoden, die zur dynamischen Erstellung von Abo-Schaltflächen verwendet werden können. Du könntest diese Methoden beispielsweise für die Erstellung einer Schaltfläche einsetzen, die nicht vorhanden ist, wenn das DOM ready-Ereignis ausgelöst wird, z. B. auf einer Seite, die mit AJAX aktualisiert wird.

Methode	Beschreibung
gapi.ytsubscribe.go(   opt_container )	Diese Methode rendert alle Abo-Schaltflächen im angegebenen Container. Verwende diese Methode, wenn die Abo-Schaltflächen-Elemente, die du rendern möchtest, bereits vorhanden sind. Wenn deine Anwendung beispielsweise eine AJAX-Anfrage sendet, die das vollständige <div>-Element für den Subscribe Button zurückgibt, kannst du die go()-Methode einsetzen, um die Schaltfläche zu rendern. opt_container Hierbei handelt es sich um das HTML-Element, das die Abo-Schaltflächen enthält, die gerendert werden sollen. Du kannst entweder die Element-ID oder das DOM-Element selbst angeben. Wenn dieser Parameter ausgelassen wird, werden sämtliche Abo-Schaltflächen auf der Seite gerendert.
gapi.ytsubscribe.render(   container ,   parameters )	Diese Methode rendert den Subscribe Button innerhalb des angegebenen Containers. Verwende diese Methode, wenn das Element, das den Subscribe Button enthalten wird, noch nicht vorhanden ist und daher zunächst erstellt werden muss. container Hierbei handelt es sich um das leere HTML-Element, das verwendet werden soll, um den Subscribe Button zu rendern. Du kannst entweder die Element-ID oder das DOM-Element selbst angeben. parameters Dies ist ein Objekt, das Abo-Schaltflächen-Attribute in Form von key:value-Paaren enthält – wie z. B. {"channel": "GoogleDevelopers", "layout": "full"}.

Erstellung einer Schaltfläche mit gapi.ytsubscribe.go

Im folgenden Beispiel siehst du einen Code, der die gapi.ytsubscribe.go-Methode zur dynamischen Erstellung einer Schaltfläche verwendet, sobald auf den entsprechenden Link geklickt wird.

Hinweis: Das Konfigurationstool, das du weiter oben auf dieser Seite benutzen kannst, verwendet ebenfalls die go-Methode, um eine neue Schaltfläche zu erstellen, wenn der Code bzw. die Optionen der gewünschten Schaltfläche aktualisiert werden.

Erstellung einer Schaltfläche mit gapi.ytsubscribe.render

Im folgenden Beispiel siehst du einen Code, der die gapi.ytsubscribe.render-Methode zur dynamischen Erstellung einer Schaltfläche verwendet, sobald auf den entsprechenden Link geklickt wird.