Reference Guide
Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Phần này giải thích cách tạo phần tử <div> cho nút đăng ký. Các danh sách dưới đây giải thích các thuộc tính bắt buộc và không bắt buộc của phần tử. Các thuộc tính không bắt buộc cho phép bạn kiểm soát bố cục và giao diện của nút cũng như chọn có hiển thị số người đăng ký của kênh hay không.
Thuộc tính bắt buộc
-
class – Đặt giá trị thành g-ytsubscribe. Lớp này xác định phần tử <div> là vùng chứa cho nút đăng ký và cho phép YouTube thay đổi kích thước nút được nhúng một cách linh hoạt như giải thích trong phần tiếp theo.
-
Bạn phải chỉ định giá trị cho một trong hai thuộc tính sau:
data-channel – Tên của kênh được liên kết với nút. Giá trị mẫu: GoogleDevelopers.data-channelid – Mã nhận dạng kênh liên kết với nút. Giá trị mẫu: UC_x5XG1OV2P6uZZ5FSM9Ttw. Bạn có thể truy xuất mã nhận dạng kênh trong phần cài đặt tài khoản YouTube hoặc bằng cách sử dụng APIs Explorer ở cuối tài liệu này. Tìm hiểu thêm về cách sử dụng mã nhận dạng kênh.
Thuộc tính không bắt buộc
-
data-layout – Định dạng của nút. Giá trị thuộc tính hợp lệ là:
default – Hiển thị biểu tượng nút phát và từ "đăng ký" bằng ngôn ngữ của người dùng. Ngôn ngữ này được chọn bằng chế độ cài đặt ngôn ngữ hoặc vị trí của người dùng.full – Hiển thị hình đại diện và tiêu đề kênh ngoài nút tiêu chuẩn.
-
data-theme – Chỉ định bảng phối màu sẽ dùng cho nút. Các giá trị hợp lệ là default và dark. Giao diện dark dành cho những ứng dụng đặt các nút lên một phần tử nền tối hơn.
-
data-count – Cho biết nút này có hiển thị số người đăng ký của kênh hay không. Hành vi mặc định của nút này là hiển thị số người đăng ký. Các giá trị hợp lệ là default và hidden.
-
data-onytevent – Lưu ý: Thuộc tính này không còn được dùng nữa.
Sự kiện
Lưu ý: Các sự kiện subscribe và unsubscribe của Nút Đăng ký không còn được dùng nữa. Tương tự, thuộc tính data-ytonevent (trước đây có thể được thêm vào phần tử tiện ích để chỉ định một trình nghe cho thông báo sự kiện) cũng đã không được dùng nữa.
Kết xuất động
Ngoài cách sử dụng mã nhúng tiêu chuẩn trong công cụ định cấu hình, bạn có thể kết xuất Subscribe Button một cách linh động. Phương pháp này ngăn JavaScript của API duyệt qua toàn bộ DOM để xác định vị trí các nút, điều này có thể cải thiện thời gian kết xuất nút.
Là một phần của Google+ JavaScript API, Subscribe Button hỗ trợ các phương thức go và render tiêu chuẩn. Bạn có thể dùng các phương thức này để kết xuất nút đăng ký một cách linh động. Ví dụ: bạn có thể sử dụng các phương thức này để hiển thị một nút không xuất hiện khi sự kiện DOM ready kích hoạt, chẳng hạn như trên một trang được cập nhật bằng AJAX.
| Phương thức |
Mô tả |
gapi.ytsubscribe.go(
opt_container
) |
Hiển thị tất cả các nút đăng ký trong vùng chứa được chỉ định. Hãy sử dụng phương thức này nếu các phần tử nút đăng ký mà bạn muốn hiển thị đã tồn tại. Ví dụ: nếu ứng dụng của bạn gửi một yêu cầu AJAX trả về phần tử <div> hoàn chỉnh cho một Subscribe Button, hãy gọi phương thức go() để hiển thị nút.
- opt_container
-
Phần tử HTML chứa các nút đăng ký để hiển thị. Chỉ định giá trị nhận dạng của phần tử hoặc chính phần tử DOM. Nếu bạn bỏ qua tham số này, tất cả nút đăng ký trên trang sẽ được hiển thị.
|
gapi.ytsubscribe.render(
container,
parameters
) |
Hiển thị Subscribe Button trong vùng chứa được chỉ định. Sử dụng phương thức này nếu phần tử sẽ chứa Subscribe Button chưa tồn tại và cần được tạo.
- vùng chứa
- Xác định phần tử HTML trống mà Subscribe Button sẽ được kết xuất. Chỉ định giá trị nhận dạng của phần tử hoặc chính phần tử DOM.
- tham số
- Một đối tượng chứa các thuộc tính của nút đăng ký dưới dạng các cặp
key:value, chẳng hạn như {"channel": "GoogleDevelopers", "layout": "full"}.
|
Kết xuất nút bằng gapi.ytsubscribe.go
Ví dụ bên dưới cho thấy mã mà bạn sẽ dùng để gọi phương thức gapi.ytsubscribe.go nhằm kết xuất động một nút khi người dùng nhấp vào đường liên kết.
Lưu ý: Công cụ định cấu hình ở trên cũng sử dụng phương thức go để hiển thị một nút mới khi bạn cập nhật các lựa chọn hoặc mã của nút.
Kết xuất nút bằng gapi.ytsubscribe.render
Ví dụ dưới đây minh hoạ cách gọi phương thức gapi.ytsubscribe.render để kết xuất động một nút khi người dùng nhấp vào đường liên kết:
Trừ phi có lưu ý khác, nội dung của trang này được cấp phép theo Giấy phép ghi nhận tác giả 4.0 của Creative Commons và các mẫu mã lập trình được cấp phép theo Giấy phép Apache 2.0. Để biết thông tin chi tiết, vui lòng tham khảo Chính sách trang web của Google Developers. Java là nhãn hiệu đã đăng ký của Oracle và/hoặc các đơn vị liên kết với Oracle.
Cập nhật lần gần đây nhất: 2025-08-21 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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```"]]
