Reference Guide
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Z tej sekcji dowiesz się, jak utworzyć element <div> dla przycisku subskrypcji. Poniższe listy zawierają wymagane i opcjonalne atrybuty elementu. Za pomocą opcjonalnych atrybutów możesz decydować o układzie i motywie wizualnym przycisku i wybrać, czy ma być na nim pokazana liczba subskrybentów kanału.
Atrybuty wymagane
-
class – ustaw wartość na g-ytsubscribe. Ta klasa identyfikuje element <div> jako kontener przycisku subskrypcji i umożliwia YouTube dynamiczną zmianę rozmiaru osadzonego przycisku zgodnie z opisem w następnej sekcji.
-
Musisz podać wartość jednego z tych dwóch atrybutów:
data-channel – nazwa kanału powiązanego z przyciskiem. Przykładowa wartość: GoogleDevelopers.data-channelid – identyfikator kanału powiązany z przyciskiem. Przykładowa wartość: UC_x5XG1OV2P6uZZ5FSM9Ttw. Identyfikator kanału możesz znaleźć w ustawieniach konta YouTube lub korzystając z APIs Explorer na końcu tego dokumentu. Dowiedz się więcej o pracy z identyfikatorami kanałów.
Atrybuty opcjonalne
-
data-layout – format przycisku. Prawidłowe atrybuty to:
default – wyświetla ikonę przycisku odtwarzania i słowo „subskrybuj” w języku użytkownika, który jest wybierany na podstawie ustawień językowych użytkownika lub jego lokalizacji.full – oprócz standardowego przycisku wyświetla awatar i tytuł kanału.
-
data-theme – określa schemat kolorów, który ma być używany w przypadku przycisku. Prawidłowe wartości to default i dark. Motyw dark jest przeznaczony dla aplikacji, w których przyciski są umieszczone na ciemniejszym tle.
-
data-count – określa, czy przycisk wyświetla liczbę subskrybentów kanału. Domyślnie jest to włączone. Prawidłowe wartości to default i hidden.
-
data-onytevent – Uwaga: ten atrybut nie jest już używany.
Wydarzenia
Uwaga: zdarzenia subscribe i unsubscribe przycisku Subskrybuj nie są już używane. Podobnie atrybut data-ytonevent, który można było wcześniej dodać do elementu widżetu, aby określić detektor powiadomień o zdarzeniach, został wycofany.
Dynamiczne renderowanie
Zamiast używać standardowego kodu do umieszczania z narzędzia do konfiguracji, możesz dynamicznie renderować element Subscribe Button. Dzięki temu JavaScript interfejsu API nie musi przeszukiwać całego elementu DOM w celu znalezienia przycisków, co może skrócić czas renderowania przycisków.
W ramach Google+ JavaScript API Subscribe Button obsługuje standardowe metody go i render, których można używać do dynamicznego renderowania przycisków subskrypcji. Możesz na przykład użyć tych metod do renderowania przycisku, który nie jest obecny, gdy wywoływane jest zdarzenie DOM ready, np. na stronie aktualizowanej za pomocą AJAX.
| Metoda |
Opis |
gapi.ytsubscribe.go(
opt_container
) |
Renderuje wszystkie przyciski subskrypcji w podanym kontenerze. Z tej metody można skorzystać w sytuacji, gdy elementy przycisku subskrypcji, który ma być renderowany, już istnieją. Jeśli na przykład Twoja aplikacja wysyła żądanie AJAX, które zwraca kompletny element <div> dla elementu Subscribe Button, wywołaj metodę go(), aby wyrenderować przycisk.
- opt_container
- Element HTML, który zawiera przyciski subskrypcji do renderowania. Wymaga wskazania identyfikatora elementu lub samego elementu DOM. W razie pominięcia tego parametru renderowane są wszystkie przyciski subskrypcji na stronie.
|
gapi.ytsubscribe.render(
container,
parameters
) |
Wyświetla element Subscribe Button w określonym kontenerze. Użyj tej metody, jeśli element, który będzie zawierać tag Subscribe Button, jeszcze nie istnieje i trzeba go utworzyć.
- kontener
- Określa pusty element HTML, w którym będzie renderowany element Subscribe Button. Wymaga wskazania identyfikatora elementu lub samego elementu DOM.
- parametry
- Obiekt zawierający atrybuty przycisku subskrypcji jako pary
key:value, np. {"channel": "GoogleDevelopers", "layout": "full"}.
|
Renderowanie przycisku za pomocą gapi.ytsubscribe.go
Poniższy przykład pokazuje kod, którego możesz użyć do wywołania metody gapi.ytsubscribe.go, aby dynamicznie renderować przycisk po kliknięciu linku.
Uwaga: powyższe narzędzie do konfiguracji również używa metody go do renderowania nowego przycisku po zaktualizowaniu opcji lub kodu przycisku.
Wyświetlanie przycisku za pomocą gapi.ytsubscribe.render
Przykład poniżej pokazuje, jak wywołać metodę gapi.ytsubscribe.render, aby dynamicznie renderować przycisk po kliknięciu linku:
O ile nie stwierdzono inaczej, treść tej strony jest objęta licencją Creative Commons – uznanie autorstwa 4.0, a fragmenty kodu są dostępne na licencji Apache 2.0. Szczegółowe informacje na ten temat zawierają zasady dotyczące witryny Google Developers. Java jest zastrzeżonym znakiem towarowym firmy Oracle i jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-08-21 UTC.
[null,null,["Ostatnia aktualizacja: 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```"]]
