属性
本部分介绍了如何为订阅按钮构建 <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( |
渲染指定容器中的所有订阅按钮。如果您要呈现的订阅按钮元素已经存在,那么请使用此方法。例如,如果您的应用发送的 AJAX 请求返回了 Subscribe Button 的完整 <div> 元素,请调用 go() 方法来呈现按钮。
|
gapi.ytsubscribe.render( |
在指定容器内呈现 Subscribe Button。如果将包含 Subscribe Button 的元素尚不存在且需要构建,请使用此方法。
|
使用 gapi.ytsubscribe.go 渲染按钮
以下示例展示了用于调用 gapi.ytsubscribe.go
方法以在点击链接时动态呈现按钮的代码。
注意:上述配置工具还使用 go
方法在您更新按钮选项或代码时呈现新按钮。
使用 gapi.ytsubscribe.render 渲染按钮
以下示例演示了如何在点击链接时调用 gapi.ytsubscribe.render
方法来动态呈现按钮: