WordPress　記事内やサイドバーにYouTubeギャラリーを表示「Feeds for YouTube」

2019年12月12日プラグイン

現在、このブログのサイドバー（スマホの場合は上部「サイドバー」もしくはページのスクロール先）にYouTubeに上げている動画や、現在では全く利用しなくなったInstagramをギャラリー表示しています。それぞれWordPressの異なるプラグインを利用していますが、Instagramのプラグインと同じ製作者様によるYouTube向けのプラグインが新たに公開されたので、試してみる事にしました。

現在のYouTube用プラグイン「YotuWP」

現在利用している、YouTubeギャラリーの表示プラグインは「YotuWP」という物で、さらにそれまでは「Youtube Channel Gallery」というプラグインを利用していました。しかし2019年3月時点でYoutube Channel Galleryは3年間（2019年12月現在で4年間）更新されない状況だったのでYotuWPに乗り換えました。

YotuWPは最初の設置時に少し細かい手を入れる必要がありましたが、設置して以降は特に問題は起きていません。もう少し整えたい所もありますが、とりあえずギャラリー表示が可能となれば良いのであまり特別な事はせず、プラグイン自体も簡単であえて機能の少ない物を使用しています。

ただし、YouTubeギャラリーの上に表示しているアイコンと「Subscribe」ボタンは別のプラグインになっています。残念ながらYotuWPにはこれらを一緒に表示する機能が無いので、下記のプラグインを別途利用しています。またこちらももう2年更新がありません。

Smash Balloon Social Photo Feed（旧 Instagram Feed）

Instagramのプラグインは以前まで「Instagram Feed」という名称でした。同じ製作者様が出している他のプラグインと名称を統一した様で、現在は「Smash Balloon Social Photo Feed」になっています。

今回はこのプラグインの更新があり、その中に「Feeds for YouTube」プラグインが新たに公開され、リンクが記載されていたので試してみるに至った理由です。

Feeds for YouTube

ここから今回のFeeds for YouTubeについてです。WordPressでのプラグインページは上記です。

※このブログではまだFeeds for YouTubeは常用していません。引き続きYotuWPを利用しているので、サイドバーに表示されているYouTubeギャラリーはYotuWP（とSubscribeボタン）のプラグインによるものです。

インストール・有効化

WordPressのプラグインから新規追加で「Smash Balloon」で検索すると、同じ製作者様のプラグインと一緒に上記のプラグインが出てきます。インストールと有効化は特に説明はしません。プラグインのインストールと有効後、Feeds for YouTubeの設定ページを開きます（WordPressの左側メニューにあります）。

設定

Feeds for YouTubeの設定は同じ製作者様のプラグインである為、Smash Balloon Social Photo Feedと非常に良く似ています。※「Feeds for YouTube」ではAPI keyでの使用を推奨しています。API keyの場合も以降で記載しています。

1.Configure

初めてYouTubeのギャラリーをプラグインを利用してブログに掲載する場合は、プラグインからYouTubeアカウントに対するアクセス許可を行う必要があります。上記画面で青い「Log in to YouTube～」ボタンをクリックします。

Webブラウザで別ページが開くので、プラグインで表示したいYouTubeチャンネルのアカウントでログインします。プラグイン名が少し異なっていますが・・・。

（※1）

同じアカウントで別チャンネル（ブランドアカウント）がある場合は、上記の様にさらにチャンネルを選択します。

権限の付与に対してのウィンドウが出るので、許可をクリックします。

さらに確認の表示が出るので、許可をクリックします。

その後は画面が切り替わり、WordPressの設定画面に戻ると思われますが、私の環境（おそらくセキュリティプラグインの影響）では上記の様に表示されてしまいました。

ただし、その画面を閉じて再びFeeds for YouTubeの設定ページを開けば（「1.Configure」のページが残っている場合は、一度「2．Customize」等へ切り替える）、上記の様にYouTubeアカウントが表示されました。矢印のボタンをクリックすると、内容が確認出来ます。

その他の設定について、「Feed Type」は特に変更の必要はありません（入力欄も空のまま）。「Preserve settings when～」はプラグインを削除する際に、設定データを残すかの設定、「Check for new posts」ではプラグインがチャンネルの更新チェックを行う間隔を設定します。さらに「When the page loads」はその下の時間毎にキャッシュは削除されるが、YouTubeからの読み込みはその次にページが開いた時、 「In the background」は時間毎にキャッシュ削除とYouTubeからの読み込みを行います。読み込みは動画のアップロードの頻度にもよりますが、半日や1日毎で十分だと思います。

また同じアカウントの別チャンネル（ブランドチャンネル）を表示させたい場合は、上記「Add another Feed」で表示される内容に従います。結局の所はショートコードで他のチャンネルIDを作成するか、1つのショートコード内に追加して同じギャラリー内にまとめて表示するだけの様ですが、別チャンネルも表示させる場合は、 改めてそのチャンネルに対するアクセス許可が必要かもしれません（※1の画面、私の場合はもう一方に動画は上げていないので不明です）。また現状では別アカウント（ログイン名）となるチャンネルの同時表示は出来ない様です。

以上までを行い「設定を保存」ボタンをクリックします。

ボタンからGoogleへのログイン、アクセス許可が出来ない場合

青い「Log in to YouTube～」ボタンを押しても画面が変わらない等で、Googleへのログインやアクセス許可が出来ない場合、まずは「Log in to YouTube～」ボタンを右クリックして、新しいウィンドウまたはタブで開くとログインやアクセス許可が出来るかもしれません（Smash Balloon Social Photo Feed側で経験あり）。

右クリックでも取得出来なかった場合は、その横にある「Button not working?」のリンクをクリックします。リンクをクリックするとプラグイン製作者様のサイトに移動し、そこでAccess TokenとRefresh Tokenが取得出来ます（上記）。ただし現状ではプラグイン製作者様のページで上記のボタンをクリックしても、プラグイン製作者様のページ内でNot Foundとなってしまい、私の環境では上手く取得出来ませんでした。

また「YouTube API key」を別途Googleにログインして入手し、そのAPI keyを入力する方法もあります。入手方法については先のYotuWPの記事内（2ページ目）で書いているので、そちらを見て下さい。

Access TokenとRefresh Tokenを取得した場合は、「Manually Connect～」ボタンからそれぞれ入力して「Connect This Account」ボタンをクリックします（上記下側の矢印）。

YouTube API keyの場合は「Or,manually enter～」にチェックを入れて、入力欄にAPI keyを入力します（上記上側の矢印）。またAPI keyの場合は「Feed Type」で表示したいチャンネルIDの入力が必要です。チャンネルIDは自分のYouTubeチャンネルページを開き、Webアドレス「youtube.com/channel/*****」の「*****」部分です。別のチャンネルに変更したい場合も手動で入力します。

各項目の入力後は忘れずに「設定を保存」を行って下さい。

2.Customize

次にCustomizeに移動します。色々ありますがそれほど難しい項目はありません。表示するギャラリーの列数、動画数、ヘッダー（アイコン）、Subscribeボタン等に関しての設定を行います。

一番下の「Advanced」で「Local storage process」は、YouTubeから動画（ギャラリー）の読み込みが出来ない場合に、「Background」を選択する事でキャッシュから表示を行う事になっています。「Are you using an AJAX theme?」はWordPressのテーマがAJAXを使用している場合に設定します。

Smash Balloon Social Photo Feedでは有料となるPro版でさらに色々設定が行えますが、現状Feeds for YouTubeでは特にPro版が必要となっている機能は見当たりません。いずれは機能が追加されると思われます。

Customizeでの設定後も「設定を保存」を行って下さい。

3.Display

通常は「2．Customize」の設定まで行ったらショートコードとなる［YouTube-Feed］をテキストで記事内やサイドバーのウィジェットに記載します。「3.Display」ページではショートコードに追記出来るオプションについての記載になっていますが、基本的には各設定項目で行える内容と同等の様子です。

4.Support

「4.Support」のページは特に必要な項目はありません。WordPressにインストールされているプラグインの一覧等が表示されるので、WordPressのプラグインページにあるフォーラムや製作者様とのやり取りで必要になる情報かもしれません。

実際の様子

私のチャンネルをサイドバーに表示させてみると上記の様になりました。レイアウト設定はGridでColumns「2」、動画数「4」です。チャンネルのDescription（説明）は非表示にしていますが、ヘッダーやSubscribeボタンも表示出来るので、Feeds for YouTubeであれば先の別プラグインも不要になります。また動画の題名はカーソールをサムネイル上に持って行くと表示されました（左上）。希望としては題名は動画下に表示したいのですが、その様な機能は現状無い様子です。

上記はSmash Balloon Social Photo FeedによるInstagramですが、やはり同じ製作者様のプラグインなので統一感があります。

ただし残念な事に私の環境では動画をクリックするとホップアップはされるのですが、動画が表示されませんでした（chromeブラウザ）。動画が再生されないので現状では実際の利用には至っておらず、まだYotuWPを使用しています。→動画再生についてはプラグインの更新があり、再生される様になりました。ただやはりサムネイル下に題名表示が欲しいので保留中。

またこれはブラウザ側の問題ですがスマホ（Operaブラウザ）でデータ圧縮設定を行っていると「Load More…」ボタンが機能しません（Instagram側も）。私はLoad Moreはあまり重要では無く、また見た目の統一感は捨て難いのでプラグインは「停止」させて様子を見る事にしています。まだ公開されたばかりなので今後に期待して待ちたいと思います。