Reference Guide
จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน
บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ
ส่วนนี้จะอธิบายวิธีสร้างองค์ประกอบ <div> สำหรับปุ่มสมัครใช้บริการ รายการด้านล่างอธิบายแอตทริบิวต์ที่จำเป็นและที่ไม่บังคับขององค์ประกอบ แอตทริบิวต์ที่ไม่บังคับช่วยให้คุณควบคุมเลย์เอาต์และธีมของปุ่ม รวมถึงเลือกว่าจะแสดงจำนวนผู้ติดตามของช่องหรือไม่
แอตทริบิวต์ที่จำเป็น
-
class - ตั้งค่าเป็น g-ytsubscribe คลาสนี้จะระบุองค์ประกอบ <div> เป็นคอนเทนเนอร์สำหรับปุ่มติดตาม และช่วยให้ YouTube ปรับขนาดปุ่มที่ฝังแบบไดนามิกได้ตามที่อธิบายไว้ในส่วนถัดไป
-
คุณต้องระบุค่าสำหรับแอตทริบิวต์ใดแอตทริบิวต์หนึ่งต่อไปนี้
data-channel – ชื่อของช่องที่เชื่อมโยงกับปุ่ม ค่าตัวอย่าง: GoogleDevelopersdata-channelid – รหัสช่องที่เชื่อมโยงกับปุ่ม ค่าตัวอย่าง: UC_x5XG1OV2P6uZZ5FSM9Ttw คุณสามารถดึงรหัสช่องได้ในการตั้งค่าบัญชี YouTube หรือโดยใช้APIs Explorerที่ส่วนท้ายของเอกสารนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการทำงานกับรหัสช่อง
แอตทริบิวต์ที่ไม่บังคับ
-
data-layout - รูปแบบของปุ่ม ค่าแอตทริบิวต์ที่ถูกต้องมีดังนี้
default – แสดงไอคอนปุ่มเล่นและคำว่า "ติดตาม" ในภาษาของผู้ใช้ ซึ่งเลือกโดยใช้การตั้งค่าภาษาหรือตำแหน่งของผู้ใช้full – แสดงรูปโปรไฟล์และชื่อช่องนอกเหนือจากปุ่มมาตรฐาน
-
data-theme – ระบุรูปแบบสีที่จะใช้กับปุ่ม ค่าที่ใช้ได้คือ default และ dark dark ธีมนี้มีไว้สำหรับแอปพลิเคชันที่วางปุ่มบนองค์ประกอบพื้นหลังที่เข้มกว่า
-
data-count – ระบุว่าปุ่มจะแสดงจำนวนผู้ติดตามที่ช่องมีหรือไม่ ลักษณะการทำงานเริ่มต้นของปุ่มคือการแสดงจำนวนผู้ติดตาม ค่าที่ใช้ได้คือ default และ hidden
-
data-onytevent – หมายเหตุ: เราเลิกใช้งานแอตทริบิวต์นี้แล้ว
กิจกรรม
หมายเหตุ: เราได้เลิกใช้งานเหตุการณ์ subscribe และ unsubscribe ของปุ่มติดตามแล้ว ในทํานองเดียวกัน แอตทริบิวต์ data-ytonevent ซึ่งก่อนหน้านี้สามารถเพิ่มลงในองค์ประกอบวิดเจ็ตเพื่อระบุ Listener สําหรับการแจ้งเตือนเหตุการณ์ได้ ก็ถูกเลิกใช้งานแล้วเช่นกัน
การแสดงผลแบบไดนามิก
คุณสามารถแสดงผล Subscribe Button แบบไดนามิกได้แทนการใช้โค้ดฝังมาตรฐานจากเครื่องมือกำหนดค่า วิธีนี้จะป้องกันไม่ให้ JavaScript ของ API เดินทางไปทั่ว DOM เพื่อค้นหาปุ่ม ซึ่งจะช่วยปรับปรุงเวลาในการแสดงปุ่มได้
ในฐานะที่เป็นส่วนหนึ่งของ Google+ JavaScript API Subscribe Button รองรับวิธีการ go และ render มาตรฐาน ซึ่งสามารถใช้เพื่อแสดงปุ่มสมัครใช้บริการแบบไดนามิกได้ เช่น คุณอาจใช้วิธีการเหล่านี้เพื่อแสดงปุ่มที่ไม่มีอยู่เมื่อเหตุการณ์ DOM ready เริ่มทำงาน เช่น ในหน้าเว็บที่อัปเดตด้วย AJAX
| วิธีการ |
คำอธิบาย |
gapi.ytsubscribe.go(
opt_container
) |
แสดงปุ่มสมัครใช้บริการทั้งหมดในคอนเทนเนอร์ที่ระบุ ใช้วิธีนี้หากมีองค์ประกอบปุ่มสมัครใช้บริการที่คุณต้องการแสดงอยู่แล้ว ตัวอย่างเช่น หากแอปพลิเคชันส่งคำขอ AJAX ที่แสดงผลองค์ประกอบ <div> ที่สมบูรณ์สำหรับ Subscribe Button ให้เรียกใช้เมธอด go() เพื่อแสดงปุ่ม
- opt_container
-
องค์ประกอบ HTML ที่มีปุ่มสมัครใช้บริการที่จะแสดงผล ระบุรหัสขององค์ประกอบหรือองค์ประกอบ DOM เอง หากไม่ระบุพารามิเตอร์นี้ ระบบจะแสดงปุ่มติดตามทั้งหมดในหน้า
|
gapi.ytsubscribe.render(
container,
parameters
) |
แสดง Subscribe Button ภายในคอนเทนเนอร์ที่ระบุ ใช้วิธีนี้หากยังไม่มีองค์ประกอบที่จะมี Subscribe Button และต้องสร้างขึ้น
- คอนเทนเนอร์
- ระบุองค์ประกอบ HTML ที่ว่างเปล่าซึ่งจะแสดงผล Subscribe Button ระบุรหัสขององค์ประกอบหรือองค์ประกอบ DOM เอง
- พารามิเตอร์
- ออบเจ็กต์ที่มีแอตทริบิวต์ปุ่มสมัครใช้บริการเป็นคู่
key:value เช่น {"channel": "GoogleDevelopers", "layout": "full"}
|
แสดงปุ่มด้วย gapi.ytsubscribe.go
ตัวอย่างด้านล่างแสดงโค้ดที่คุณจะใช้เรียกเมธอด gapi.ytsubscribe.go เพื่อแสดงปุ่มแบบไดนามิกเมื่อมีการคลิกลิงก์
หมายเหตุ: เครื่องมือการกำหนดค่าด้านบนยังใช้วิธีการ go ในการแสดงปุ่มใหม่เมื่อคุณอัปเดตตัวเลือกหรือโค้ดของปุ่ม
แสดงปุ่มด้วย gapi.ytsubscribe.render
ตัวอย่างด้านล่างแสดงวิธีเรียกใช้เมธอด gapi.ytsubscribe.render เพื่อแสดงปุ่มแบบไดนามิกเมื่อมีการคลิกลิงก์
เนื้อหาของหน้าเว็บนี้ได้รับอนุญาตภายใต้ใบอนุญาตที่ต้องระบุที่มาของครีเอทีฟคอมมอนส์ 4.0 และตัวอย่างโค้ดได้รับอนุญาตภายใต้ใบอนุญาต Apache 2.0 เว้นแต่จะระบุไว้เป็นอย่างอื่น โปรดดูรายละเอียดที่นโยบายเว็บไซต์ Google Developers Java เป็นเครื่องหมายการค้าจดทะเบียนของ Oracle และ/หรือบริษัทในเครือ
อัปเดตล่าสุด 2025-08-21 UTC
[null,null,["อัปเดตล่าสุด 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```"]]
