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 事件已弃用。同样，之前可添加到 widget 元素以指定事件通知监听器的 data-ytonevent 属性也已被弃用。

动态呈现

除了使用配置工具中的标准嵌入代码外，您还可以动态呈现 Subscribe Button。此方法可防止 API 的 JavaScript 遍历整个 DOM 来查找按钮，从而缩短按钮呈现时间。

作为 Google+ JavaScript API 的一部分，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 方法来动态呈现按钮：