Reference Guide

屬性

本節說明如何建構訂閱按鈕的 <div> 元素。下表說明元素的必要和選用屬性。選用屬性可讓你控制按鈕的版面配置和主題，以及選擇是否顯示頻道的訂閱人數。

必要屬性

  • class：將值設為 g-ytsubscribe。這個類別會將 <div> 元素識別為訂閱按鈕的容器，並讓 YouTube 動態調整內嵌按鈕的大小，詳情請見下一節。

  • 你必須為下列其中一個屬性指定值：

    • data-channel：與按鈕相關聯的頻道名稱。範例值：GoogleDevelopers。
    • data-channelid：與按鈕相關聯的頻道 ID。範例值：UC_x5XG1OV2P6uZZ5FSM9Ttw。如要擷取頻道 ID，請前往 YouTube 帳戶設定，或使用本文件結尾的 APIs Explorer。進一步瞭解如何使用管道 ID。

選用屬性

  • data-layout：按鈕的格式。有效的屬性值為：

    • default：顯示播放按鈕圖示和使用者語言的「訂閱」字樣，使用者語言是根據使用者語言設定或所在位置選取。
    • full：除了標準按鈕外，還會顯示頻道的顯示圖片和頻道名稱。

  • data-theme：指定按鈕要使用的色彩配置。有效值為 default 和 dark。dark 主題適用於在深色背景元素上放置按鈕的應用程式。

  • data-count：指出按鈕是否顯示頻道訂閱人數。按鈕的預設行為是顯示訂閱人數。有效值為 default 和 hidden。

  • data-onytevent – 注意：這項屬性已淘汰。

事件

注意：訂閱按鈕的 subscribe 和 unsubscribe 事件已淘汰。同樣地，先前可新增至小工具元素的 data-ytonevent 屬性 (用於指定事件通知的監聽器) 也已淘汰。

動態轉譯

除了使用設定工具提供的標準嵌入程式碼，您也可以動態算繪 Subscribe Button。這個方法可避免 API 的 JavaScript 遍歷整個 DOM 來尋找按鈕，進而縮短按鈕的算繪時間。

Subscribe Button 是 Google+ JavaScript API 的一部分，支援標準的 go 和 render 方法，可用於動態算繪訂閱按鈕。舉例來說，您可以使用這些方法，在 DOM ready 事件觸發時，算繪不存在的按鈕，例如以 AJAX 更新的頁面。

方法 說明
gapi.ytsubscribe.go(
  opt_container
)		 在指定容器中顯示所有訂閱按鈕。如要顯示的訂閱按鈕元素已存在，請使用這個方法。舉例來說，如果應用程式傳送 AJAX 要求，傳回 Subscribe Button 的完整 <div> 元素，請呼叫 go() 方法來算繪按鈕。
opt_container
包含要顯示的訂閱按鈕的 HTML 元素。指定元素的 ID 或 DOM 元素本身。如果省略這個參數，系統會顯示網頁上的所有訂閱按鈕。
gapi.ytsubscribe.render(
  container,
  parameters
)		 在指定容器中算繪 Subscribe Button。如果包含 Subscribe Button 的元素尚未存在，且需要建構，請使用這個方法。
容器
識別要轉譯 Subscribe Button 的空白 HTML 元素。指定元素的 ID 或 DOM 元素本身。
parameters
：包含訂閱按鈕屬性的物件，以 key:value 組合表示，例如 {"channel": "GoogleDevelopers", "layout": "full"}。

使用 gapi.ytsubscribe.go 算繪按鈕

下方範例顯示您用來呼叫 gapi.ytsubscribe.go 方法的程式碼，以便在點選連結時動態轉譯按鈕。

注意：當您更新按鈕選項或程式碼時，上述設定工具也會使用 go 方法算繪新按鈕。

使用 gapi.ytsubscribe.render 算繪按鈕

以下範例說明如何呼叫 gapi.ytsubscribe.render 方法，在點選連結時動態算繪按鈕：