リファレンス

チャンネル登録ボタンの属性

必須

このセクションでは、チャンネル登録ボタンの <div> 要素を構成する方法について説明します。下記のリストに、要素に必須の属性と、オプションの属性をそれぞれ示します。オプションの属性は、ボタンのレイアウトやテーマを制御するだけでなく、チャンネルの登録者数の表示の有無を選択できます。

  • class – 値を g-ytsubscribe に設定します。この class によってチャンネル登録ボタンのコンテナとしての <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 です。

動的なレンダリング

設定ツールで作成した標準の埋め込みコードを使用する代わりに、Subscribe Button を動的にレンダリングする方法もあります。この方法を使用すると、API の JavaScript が DOM 全体をトラバースしないようにできるので、ボタンのレンダリング時間を短縮できます。

Google+ JavaScript API の一部である Subscribe Button は標準の go メソッドおよび render メソッドをサポートしているので、これを使用してチャンネル登録ボタンを動的にレンダリングすることができます。たとえば、これらのメソッドを使用すると AJAX によって更新されるページなどで DOM ready イベントが呼び出された時点で存在しないボタンをレンダリングすることができます。

メソッド 説明
gapi.ytsubscribe.go(
  opt_container
)		 すべてのチャンネル登録ボタンを、指定されたコンテナ内でレンダリングします。レンダリングするチャンネル登録ボタン要素が既に存在している場合は、このメソッドを使用します。たとえば、アプリケーションが Subscribe Button の完全な <div> 要素を返す AJAX リクエストを送信する場合は、go() メソッドを呼び出してボタンをレンダリングします。
opt_container
レンダリングするチャンネル登録ボタンを含む HTML 要素です。要素の ID または DOM 要素自体を指定します。このパラメータを省略した場合は、ページ上のすべてのチャンネル登録ボタンがレンダリングされます。
gapi.ytsubscribe.render(
  container 、
  parameters
)		 指定されたコンテナ内で Subscribe Button をレンダリングします。このメソッドは Subscribe Button を含む要素がまだ存在せず、要素を作成する必要がある場合に使用します。
container
空の HTML 要素を指定します。Subscribe Button はこの中でレンダリング要素の ID または DOM 要素自体を指定します。
parameters
チャンネル登録ボタンの属性を key:value ペアとして含むオブジェクト。例: {"channel": "GoogleDevelopers", "layout": "full"}

gapi.ytsubscribe.go によるボタンのレンダリング

下記は、リンクがクリックされたときに gapi.ytsubscribe.go メソッドを呼び出してボタンを動的にレンダリングするために使用するコードの例です。

注: 上記の設定ツールでは、ボタンのオプションまたはコードを更新するときに go メソッドを使用して新しいボタンがレンダリングされます。

gapi.ytsubscribe.render によるボタンのレンダリング

下記の例では、gapi.ytsubscribe.render メソッドを呼び出して、リンクがクリックされたときに動的にボタンをレンダリングする方法を示します。