Reference Guide

属性

このセクションでは、購読ボタンの <div> 要素を構築する方法について説明します。以下のリストは、要素の必須属性と省略可能な属性を示しています。省略可能な属性を使用すると、ボタンのレイアウトとテーマを制御したり、チャンネルの登録者数を表示するかどうかを選択したりできます。

必須属性

  • class - 値を g-ytsubscribe に設定します。このクラスは、<div> 要素を登録ボタンのコンテナとして識別し、次のセクションで説明するように、YouTube が埋め込みボタンのサイズを動的に変更できるようにします。

  • 次の 2 つの属性のうち、いずれかに値を 1 つ指定する必要があります。

    • data-channel - ボタンに関連付けられているチャネルの名前。値のサンプル: GoogleDevelopers。
    • data-channelid - ボタンに関連付けられたチャンネル ID。値のサンプル: UC_x5XG1OV2P6uZZ5FSM9Ttw。チャンネル ID は、YouTube アカウントの設定で確認するか、このドキュメントの末尾にある 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 全体をトラバースしてボタンを探すことがなくなるため、ボタンのレンダリング時間を短縮できます。

Google+ JavaScript API の一部として、Subscribe Button は標準の go メソッドと render メソッドをサポートしています。これらのメソッドを使用して、定期購入ボタンを動的にレンダリングできます。たとえば、これらのメソッドを使用して、DOM ready イベントがトリガーされたときに存在しないボタン（AJAX で更新されたページなど）をレンダリングできます。

メソッド 説明
gapi.ytsubscribe.go(
  opt_container
)		 指定されたコンテナ内のすべての定期購入ボタンをレンダリングします。レンダリングするチャンネル登録ボタン要素が既に存在している場合は、このメソッドを使用します。たとえば、アプリケーションが Subscribe Button の完全な <div> 要素を返す AJAX リクエストを送信する場合、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 メソッドを呼び出してボタンを動的にレンダリングする方法を示しています。