参考网页

“订阅”按钮的属性

必选

本节将介绍如何构建订阅按钮的 <div> 元素。以下列表介绍了该元素的必选属性及可选属性。可选属性让您可以控制按钮的布局和主题,并选择是否显示频道的订阅人数。

  • class - 将属性值设置为 g-ytsubscribe。Class 属性标识了作为订阅按钮容器的 <div> 元素,并让 YouTube 可以动态地调整嵌入按钮的大小,具体详情请参阅下一部分的内容。

  • 您必须为以下两个属性中的其中一个指定值:

    • data-channel - 与该按钮关联的频道的名称。示例值:GoogleDevelopers
    • data-channelid - 与该按钮关联的频道 ID。示例值:UC_x5XG1OV2P6uZZ5FSM9Ttw。您可以在您的 YouTube 帐户设置中或使用本文档末尾的APIs Explorer来检索频道 ID。详细了解如何使用频道 ID

可选

  • data-layout - 按钮格式。有效的属性值有:

    • default - 显示播放按钮图标和以用户所用语言表示的“订阅”一词,用户所用语言可根据用户的语言设置或所在位置而得出。
    • full - 除标准按钮之外,还显示频道头像和标题。

  • data-theme - 指定该按钮使用的配色方案。有效值为 defaultdarkdark 主题适用于要将按钮置于颜色比其更深的背景元素上的应用程序。

  • data-count - 表示按钮是否显示频道所拥有的订阅人数。按钮的默认功能即是显示订阅人数,但不显示付费频道的订阅人数。有效值为 defaulthidden

动态呈现

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

Subscribe ButtonGoogle+ JavaScript API 的一部分,支持标准的gorender方法,这些方法可以动态地呈现订阅按钮。例如,如果 DOMready 事件触发时,按钮并没有显示(例如,没有出现在利用 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 的元素不存在而需要构建,那么请使用此方法。
container
标识呈现 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 方法来动态呈现按钮。