WordPressやブログでYouTubeチャンネルの登録ボタンを設置する。

どうも段田です。

ゲーム実況も回数を増やして、段々とYouTubeの使い方を覚えてきましたので、
ブログでアウトプットしていきたいと思います。

今回はブログにYouTubeチャンネルの登録ボタンを設置する方法です。

AAスポンサーリンク

YouTubeチャンネルの登録ボタンについて

実際に表示させてみました。

はい、こういうボタンです。

左にYouTubeチャンネルの画像、右にチャンネル名とチャンネル登録数が表示された登録ボタンという構成になっています。

このボタンをクリックするとYouTubeチャンネルページに移動し、チャンネル登録のポップアップが表示されます。
このボタンをクリックすることでアカウントに「登録チャンネル」としてチャンネルが登録されるわけです。

ちなみに2017年2月14日現在、日本国内のチャンネル数トップははじめしゃちょーで約476万人となっています。

https://www.youtube.com/channel/UCgMPP6RRjktV7krOfyUewqw

・・・・すごいですね。私みたいな2桁台のチャンネルはお話しにならないんでしょうね・・・・

みなさん・・・・チャンネル登録を・・・お願い・・・・しま・・・・す・・・

チャンネル登録のメリット

チャンネル登録をすることでどのようなメリットがあるのか簡単に書いてみます。

視聴者側のメリット

・チャンネルで動画が公開されたときに、YouTubeから通知が送信される
・登録したチャンネルで動画が公開された時に自分のマイページに表示される

主に登録チャンネルの最新動画情報がキャッチできる点になると思います。

放送者側のメリット

・チャンネル登録者が多いと再生回数、再生時間が延びやすい
・新機能導入時、登録者数が一定以上だと先行して利用することができる
・登録者数10,000人以上だと「YouTube Space Tokyo」の利用ができる

まずYouTube側でチャンネル登録数が多いと優遇している部分がある。
運用部分だと、チャンネル登録者は登録していない視聴者よりも長時間チャンネルを視聴する傾向があるため、再生回数、再生時間が延びやすいこと。

チャンネル登録数はファンの数ともとれるので、Facebookページのいいねと同じような意味合いを持っていると思います。
（個人的な考えですが・・・）

YouTubeチャンネルの登録ボタンのコードを取得

YouTubeチャンネルの登録ボタンのコードはGoogleデベロッパーズで取得できます。

Google for Developers

Google for Developers - from AI and Cloud to Mobile and Web Explore developer resources, community events, and inspirational stories to help you build smarter and ship faster.

Googleデベロッパーズサイトに行ったら、「すべてのサービス」をクリックします。

ページ中部にYouTubeのアイコンがあるのでクリックします。

ページ中部のSubscribe Buttonsにある「ADD A BUTTON」をクリックします。

チャンネル登録ボタンのページに来ました。
ここでチャンネルやデザインなどのオプション設定をして最後にコードを取得します。

各オプションの説明です。

チャンネル名または ID

ボタンで利用するチャンネル名かチャンネルIDを登録します。

なお、チャンネルIDはYouTubeチャンネルのURLから確認できます。
https://www.youtube.com/channel/ここがチャンネルID

レイアウト

ボタンの構成を設定します。デフォルトはボタンのみで、フルはチャンネル画像とチャンネル名も表示されます。

テーマ

ボタンのデザインを設定します。デフォルトは背景が透明で、ダークは背景が黒になります。

チャンネル登録者数

チャンネル登録者数の表示非表示設定になります。

アプリケーションはボタンイベントをリッスンする

こちらはチャンネル登録、解除したときにJavaScriptで任意の処理を実行したい場合に利用します。
通常はチェックしないでいいと思います。

コードの取得

オプションの設定が完了したら、そのままボタンのコードを取得することができます。

<script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channelid="チャンネルID" data-layout="default" data-count="default"></div>

こちらは「アプリケーションはボタンイベントをリッスンする」にチェックが入っていない時のコードです。
data-channelidは「チャンネル名または ID」項目で設定したIDが入ります。

<script src="https://apis.google.com/js/platform.js"></script>

<script>
  function onYtEvent(payload) {
    if (payload.eventType == 'subscribe') {
      // Add code to handle subscribe event.
    } else if (payload.eventType == 'unsubscribe') {
      // Add code to handle unsubscribe event.
    }
    if (window.console) { // for debugging only
      window.console.log('YT event: ', payload);
    }
  }
</script>

<div class="g-ytsubscribe" data-channelid="UCh9wa4Inb_SgFjsRynBEa3g" data-layout="default" data-count="default" data-onytevent="onYtEvent"></div>

こちらは「アプリケーションはボタンイベントをリッスンする」にチェックが入っている時のコードです。

上記のコードをどちらかをWordPress、他CMS、各ブログサービスの記事本文内に挿入すると

このような形で記事ページでボタンが表示されるようになります。