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 - 指定要用于按钮的配色方案。有效值为 defaultdarkdark 主题适用于将按钮放置在较深背景元素上的应用。

  • data-count - 指示按钮是否显示频道的订阅人数。按钮的默认功能即是显示订阅人数,有效值为 defaulthidden

  • data-onytevent - 注意:此属性已弃用。

事件

注意:订阅按钮的 subscribeunsubscribe 事件已弃用。同样,之前可添加到 widget 元素以指定事件通知监听器的 data-ytonevent 属性也已被弃用。

动态呈现

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

作为 Google+ JavaScript API 的一部分,Subscribe Button 支持标准 gorender 方法,可用于动态呈现订阅按钮。例如,您可以使用这些方法来呈现在 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 方法来动态呈现按钮: