Reference Guide

屬性

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

必要屬性

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

• 您必須指定以下兩個屬性之一的值：

  • data-channel：與按鈕相關聯的頻道名稱，範例值：GoogleDevelopers。
  • data-channelid：與按鈕相關聯的頻道 ID，範例值：UC_x5XG1OV2P6uZZ5FSM9Ttw。您可以前往 YouTube 帳戶設定擷取頻道 ID，或使用本文件結尾的 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 中，Subscribe Button 支援標準 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 元素本身。 參數 包含訂閱按鈕屬性為 key:value 配對的物件，例如 {"channel": "GoogleDevelopers", "layout": "full"}。

使用 gapi.ytsubscribe.go 顯示按鈕

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

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

使用 gapi.ytsubscribe.render 轉譯按鈕

以下範例說明如何呼叫 gapi.ytsubscribe.render 方法，以便在使用者點擊連結時動態顯示按鈕：