Reference Guide
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
In diesem Abschnitt wird erläutert, wie Sie ein <div>-Element für eine Schaltfläche zum Abonnieren erstellen. In den folgenden Listen werden die erforderlichen und optionalen Attribute des Elements 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.
Erforderliche Attribute
-
class: Legen Sie den Wert auf g-ytsubscribe fest. Diese Klasse identifiziert das <div>-Element als Container für eine Schaltfläche zum Abonnieren und ermöglicht YouTube, die eingebettete Schaltfläche dynamisch zu skalieren, wie im nächsten Abschnitt beschrieben.
-
Darüber hinaus musst du einen Wert für eines der folgenden zwei Attribute angeben:
Optionale Attribute
-
data-layout: Das Format für die Schaltfläche. Die folgenden Attributwerte sind zulässig:
default: Hier wird ein Wiedergabesymbol und das Wort „Abonnieren“ in der Sprache des Nutzers angezeigt. Die Sprache wird entweder anhand der Spracheinstellung des Nutzers oder anhand des Standorts ausgewählt.full: Neben der Standardschaltfläche werden der Avatar und der Titel des Kanals angezeigt.
-
data-theme: Gibt das für die Schaltfläche zu verwendende Farbschema an. Gültige Werte sind default und dark. Das dark-Design ist für Anwendungen vorgesehen, in denen Schaltflächen über einem dunkleren Hintergrundelement platziert werden.
-
data-count: Gibt an, ob auf der Schaltfläche die Anzahl der Abonnenten des Kanals angezeigt wird. Standardmäßig ist die Abonnentenzahl sichtbar. Gültige Werte sind default und hidden.
-
data-onytevent – Hinweis: Dieses Attribut wurde eingestellt.
Ereignisse
Hinweis:Die Ereignisse subscribe und unsubscribe der Schaltfläche „Abonnieren“ sind veraltet. Ebenso wurde das Attribut data-ytonevent, das zuvor dem Widget-Element hinzugefügt werden konnte, um einen Listener für Ereignisbenachrichtigungen anzugeben, eingestellt.
Dynamische Erstellung
Alternativ zum Standard-Einbettungscode aus dem Konfigurationstool können Sie die Subscribe Button dynamisch rendern. So wird verhindert, dass das JavaScript der API das gesamte DOM durchläuft, um Schaltflächen zu finden. Dadurch kann die Rendering-Zeit für Schaltflächen verkürzt werden.
Im Rahmen der Google+ JavaScript API unterstützt die Subscribe Button die Standardmethoden go und render, mit denen Aboschaltflächen dynamisch gerendert werden können. Mit diesen Methoden können Sie beispielsweise eine Schaltfläche rendern, die nicht vorhanden ist, wenn das Ereignis DOM ready 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 Ihre Anwendung beispielsweise eine AJAX-Anfrage sendet, die das vollständige <div>-Element für ein Subscribe Button zurückgibt, rufen Sie die Methode go() auf, um die Schaltfläche zu rendern.
- opt_container
-
Das HTML-Element, das die zu rendernden Aboschaltflächen enthält. 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
) |
Rendert die Subscribe Button im angegebenen Container. Verwenden Sie diese Methode, wenn das Element, das das Subscribe Button enthalten soll, noch nicht vorhanden ist und erstellt werden muss.
- Container
- Gibt das leere HTML-Element an, in dem das Subscribe Button gerendert wird. Du kannst entweder die Element-ID oder das DOM-Element selbst angeben.
- Parameter
- Ein Objekt, das Attribute für Aboschaltflächen als
key:value-Paare enthält, z. B. {"channel": "GoogleDevelopers", "layout": "full"}.
|
Schaltfläche mit gapi.ytsubscribe.go rendern
Das folgende Beispiel zeigt den Code, mit dem Sie die gapi.ytsubscribe.go-Methode aufrufen, um eine Schaltfläche dynamisch zu rendern, wenn auf den Link geklickt wird.
Hinweis:Das Konfigurationstool oben verwendet ebenfalls die go-Methode, um eine neue Schaltfläche zu rendern, wenn Sie die Schaltflächenoptionen oder den Code aktualisieren.
Schaltfläche mit gapi.ytsubscribe.render rendern
Das folgende Beispiel zeigt, wie die Methode gapi.ytsubscribe.render aufgerufen wird, um eine Schaltfläche dynamisch zu rendern, wenn auf den Link geklickt wird:
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-21 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-08-21 (UTC)."],[],[],null,["# Reference Guide\n\nAttributes\n----------\n\nThis section explains how to construct a `\u003cdiv\u003e` element for a subscription button. The lists below explain the element's required and optional attributes. Optional attributes let you control the button's layout and theme as well as choose whether to display the channel's subscriber count.\n\n### Required attributes\n\n- `class` -- Set the value to `g-ytsubscribe`. This class identifies the `\u003cdiv\u003e` element as a container for a subscription button and enables YouTube to dynamically resize the embedded button as explained in the next section.\n\n- You must specify a value for one of the following two attributes:\n\n \u003cbr /\u003e\n\n - `data-channel` -- The name of the channel associated with the button. Sample value: `GoogleDevelopers`.\n - `data-channelid` -- The channel ID associated with the button. Sample value: `UC_x5XG1OV2P6uZZ5FSM9Ttw`. You can retrieve your channel ID in your [YouTube account settings](http://www.youtube.com/account_advanced) or by using the [APIs Explorer](/youtube/youtube_subscribe_button#Retrieve_Channel_ID) at the end of this document. Learn more about [working with channel IDs](/youtube/v3/guides/working_with_channel_ids).\n\n### Optional attributes\n\n- `data-layout` -- The format for the button. Valid attribute values are:\n\n \u003cbr /\u003e\n\n - `default` -- Displays a play button icon and the word 'subscribe' in the user's language, which is selected using either the user's language setting or location.\n - `full` -- Displays the channel's avatar and channel title in addition to the standard button.\n\n \u003cbr /\u003e\n\n- `data-theme` -- Specifies the color scheme to use for the button. Valid values are `default` and `dark`. The `dark` theme is intended for applications that place buttons over a darker background element.\n\n- `data-count` -- Indicates whether the button displays the number of subscribers that the channel has. The button's default behavior is to display the subscriber count. Valid values are `default` and `hidden`.\n\n- `data-onytevent` -- **Note:** This attribute has been deprecated.\n\nEvents\n------\n\n**Note:** The Subscribe Button's `subscribe` and `unsubscribe` events have been deprecated. Similarly, the `data-ytonevent` attribute, which could previously be added to the widget element to specify a listener for event notifications, has also been deprecated.\n\nDynamic rendering\n-----------------\n\nAs an alternative to using the standard embed code from the [configuration tool](#Configure_a_Button), you can dynamically render the Subscribe Button. This approach prevents the API's JavaScript from traversing the entire DOM to locate buttons, which can improve button rendering time.\n\nAs a part of the [Google+ JavaScript API](https://developers.google.com/+/web/api/javascript), the Subscribe Button supports standard `go` and `render` methods, which can be used to dynamically render subscription buttons. For example, you could use these methods to render a button that is not present when the DOM `ready` event fires, such as on a page that is updated with AJAX.\n\n| Method | Description |\n|-----------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `gapi.ytsubscribe.`**go** `(` ` `\u003cvar class=\"notranslate\"\u003eopt_container\u003c/var\u003e `)` | Renders all subscription buttons in the specified container. Use this method if the subscription button elements that you want to render already exist. For example, if your application sends an AJAX request that returns the complete `\u003cdiv\u003e` element for a Subscribe Button, call the `go()` method to render the button. *** ** * ** *** opt_container : The HTML element that contains the subscription buttons to render. Specify either the element's ID or the DOM element itself. If this parameter is omitted, all subscription buttons on the page are rendered. |\n| `gapi.ytsubscribe.`**render** `(` ` `\u003cvar class=\"notranslate\"\u003econtainer\u003c/var\u003e`,` ` `\u003cvar class=\"notranslate\"\u003eparameters\u003c/var\u003e `)` | Renders the Subscribe Button within the specified container. Use this method if the element that will contain the Subscribe Button does not already exist and needs to be constructed. *** ** * ** *** container : Identifies the empty HTML element in which the Subscribe Button will be rendered. Specify either the element's ID or the DOM element itself. parameters : An object containing [subscription button attributes](#Subscription_Button_Attributes) as `key:value` pairs, such as `{\"channel\": \"GoogleDevelopers\", \"layout\": \"full\"}`. |\n\n### Render a button with gapi.ytsubscribe.go\n\nThe example below shows the code that you would use to call the `gapi.ytsubscribe.go` method to dynamically render a button when the link is clicked.\n\n```js\nLink: Click here for a button!\n\nDisplay button here: \n \n\nCode:\n \u003ca href=\"javascript:void(0);\"\n onclick=\"goYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n Display button here: \u003cdiv id=\"yt-button-container-go\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n function goYtSubscribeButton() {\n // ID of element containing \u003cdiv class=\"g-ytsubscribe\"\u003e element(s)\n // The container element already contains the button elements when this\n // function is called.\n var containerId = \"sample-container\";\n gapi.ytsubscribe.go(containerId);\n }\n \u003c/script\u003e\n\n \u003cb\u003eLink\u003c/b\u003e\n \u003ca href=\"javascript:void(0);\"\n onclick=\"goYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button\u003c/a\u003e\n\n \u003cb\u003eDisplay button here:\u003c/b\u003e\n \u003cdiv id=\"yt-button-container-go\" style=\"display-inline\"\u003e\u003c/div\u003e\n```\n\n**Note:** The [configuration tool](#Configure_a_Button) above also uses the `go` method to render a new button when you update the button options or code.\n\n### Render a button with gapi.ytsubscribe.render\n\nThe example below demonstrates how to call the `gapi.ytsubscribe.render` method to dynamically render a button when the link is clicked:\n\n```js\nLink: Click here for a button!\n\nDisplay button here: \n \n\nCode:\n \u003ca href=\"javascript:void(0);\"\n onclick=\"renderYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n Display button here: \u003cdiv id=\"yt-button-container-render\"\u003e\u003c/div\u003e\n \u003cscript\u003e\n function renderYtSubscribeButton(channel) {\n var container = document.getElementById('yt-button-container-render');\n var options = {\n 'channel': channel,\n 'layout': 'full'\n };\n gapi.ytsubscribe.render(container, options);\n }\n \u003c/script\u003e\n\n \u003cb\u003eLink:\u003c/b\u003e\n \u003ca href=\"javascript:void(0);\"\n onclick=\"renderYtSubscribeButton('GoogleDevelopers')\"\u003eClick here for a button!\u003c/a\u003e\n\n \u003cb\u003eDisplay button here:\u003c/b\u003e\n \u003cdiv id=\"yt-button-container-render\" style=\"display:inline\"\u003e\u003c/div\u003e\n```"]]
