ウェブサイトにYouTubeフィードを追加する | Smash Balloon YouTube Feed Pro
ホーム ブログ ウェブサイトにYouTubeフィードを追加する方法(6つの手順)

ウェブサイトにYouTubeフィードを追加する方法(6つの手順)

YouTubeチャンネルとウェブサイトを運営しているなら、両者は連携させるべきです。しかし、多くのサイトは単にYouTubeへのリンクを貼るだけで、訪問者がクリックしてくれることを期待しているに過ぎません。問題は、ほとんどの訪問者がクリックしてくれないということです。

サイトに実際のYouTubeフィードを埋め込むことで、訪問者はそのページ上でコンテンツに没頭し続けることができます。

視聴者は1本の動画を見て、次に別の動画を見、その繰り返しです。チャンネルの登録者数は増え、サイト滞在時間も伸び、しかも手動で更新する必要はありません。

ウェブサイトにYouTubeフィードを追加するにはどうすればよいですか?

「Smash Balloon YouTube Feed Pro」をインストールし、YouTubeチャンネルを連携させ、レイアウトを選択したら、ショートコードまたはWordPressブロックを使って、任意のページ、サイドバー、フッターにフィードを埋め込みましょう。設定全体は6ステップほどで、所要時間は約5分です。

新しい動画を公開するたびに、フィードが自動的に更新されます。

これまでさまざまなWordPressサイトでこれを導入してきましたが、ユーザーエンゲージメントの差は明らかです。

検索を通じてあなたのコンテンツを見つけた訪問者は、わざわざYouTubeチャンネルにアクセスしようとは考えないことが多いものです。

フィードをユーザーに届けることで、状況は一変します。Smash Balloonは、ウェブサイト運営者が実際のソーシャルコンテンツを信頼の証に変え、信頼性とコンバージョン率を向上させるお手伝いをします。そして、YouTubeのライブフィードは、そのための手段として最も活用されていないもののひとつです。

以下に、その設定方法を説明します。

この記事で

YouTubeウィジェットは手動で追加すべきか、自動で追加すべきか?

LinkedInやTwitterのような他のソーシャルネットワークとは異なり、YouTubeは魅力的なビデオコンテンツがすべてです。YouTubeのコンテンツをWordPressのウェブサイトに表示するには、手動または自動で行うことができます。

YouTubeの動画を手動で ウェブサイトに追加するには、次のような制約がある:

  • 一括オプションはありません:表示したいYouTube動画が大量にありますか?各動画の埋め込みコードを取得し、1つずつ手動で埋め込む必要があります。
  • コーディングの専門家に限られますYouTube動画フィードを埋め込み、サイト上でどのように見えるかをコントロールするには、コードスニペットを変更する必要があるため、カスタムHTML、Javascript、iFrame、CSS、またはその他のコーディング言語の高度な知識が必要です。
  • カスタマイズの選択肢が限られている:YouTubeフィードをサイトのテーマに合わせてカスタマイズしたいですか?それはできません。そのため、フィードの背景色やフォントの色を変更するのは、開発者を雇わない限り難しいでしょう。
  • リスク:コーディングのちょっとしたミスでウェブサイトが壊れ、エラーページが表示される可能性がある。

そして最悪なのは?

手動で動画を埋め込んで、誤ってサイトを壊してしまった場合、それを直してくれるサポートチームは ありません。だから、自力で何とかするしかないのだ。

比較しやすいように、簡単な表を作成しました:

YouTubeの埋め込みコード(手動)Smash Balloon YouTube Feed Pro ⭐ おすすめ
YouTubeチャンネルのフィードをすべて表示していただけますか?❌ いいえ、YouTubeの埋め込みコードを使用して、一度に1つの動画のみ表示できます✅ はい、チャンネル全体、プレイリスト、または検索結果をライブフィードとして表示できます
新しい動画は自動的に表示されますか?❌ いいえ、新しい動画はそれぞれ手動で再埋め込みする必要があります✅ はい、公開した動画はすべて自動的にサイトに表示されます
YouTube Shortsを再生できますか?❌ いいえ、Shortsは標準のYouTube iframeには埋め込まれません✅ はい、ショート動画、ライブ配信、通常の動画のすべてに対応しています
YouTubeのライブ配信を表示できますか?⚠️ 一部機能:配信中のライブストリームを1つだけ手動で埋め込むことができます✅ はい、ライブ配信はフィードに自動的に表示されます
開発者をお探しですか?⚠️ 基本的な埋め込みはコピー&ペーストで可能ですが、スタイルを設定するにはカスタムCSSが必要です✅ いいえ、完全にビジュアルベースのカスタマイザーなので、コードは不要です
サイトのデザインに合わせていただけますか?❌ いいえ、YouTubeのスタイルは固定されており、色やフォントの変更はできません✅ はい、8種類のテンプレート、カスタムカラー、レイアウト、ヘッダースタイル
YouTubeがAPIを変更しても、引き続き動作しますか?❌ いいえ、YouTubeが埋め込みの動作を更新すると機能しなくなります✅ はい、Smash BalloonがすべてのAPI更新を処理します
最適今後一切編集しないページへの、一度きりの動画埋め込みライブ配信や自動更新機能を備えたYouTubeチャンネルを運営したいサイト

単に動画を1つページに配置して、その後は一切気にせず済ませたいのであれば、手動での方法でも問題ありません。しかし、自分のチャンネルを反映し、自動的に更新される本格的なフィードが欲しいのであれば、プラグインが唯一の実用的な選択肢となります。

YouTubeチャンネル・ウィジェットをウェブサイトに追加する最も簡単な方法

手動でYouTubeフィードを埋め込むのが難しく、時間がかかるのであれば、代わりにYouTubeフィードを 自動的に 追加してみてはいかがでしょうか?

YouTube Feed Proのような初心者向けのプラグインを使えば、WordPressの専門家でなくても、簡単かつ手間なくYouTubeのコンテンツをWordPressに表示することができます!

スマッシュバルーンyoutubeフィードプロを使用してウェブサイトにyoutubeフィードを追加する

WordPress 用の最高の YouTube フィードプラグインである YouTube Feed Pro は、サイトの機能を拡張し、カスタマイズ可能な YouTube フィードをウェブサイトに追加するのに役立ちます。

個人的なYouTubeチャンネルに使ってみたところ、プラグインのビジュアル・カスタマイザーで選択肢のチェックを入れたり外したりするだけで、YouTubeの動画コンテンツをスムーズに設定でき、サイト訪問者がそれを見たときにどのように見えるかをコントロールできる点が気に入った。

紛らわしいコピーコードを扱う必要はない。

このプラグインはユーザーを念頭に置いて作成されているため、超高速に設計されており、ウェブサイトのページが遅くなることは全くありません。これは、あなたのサイトのSEOを向上させるのに役立ちますので、検索エンジンで上位にランクインすることができます。

実際、プラグインよりも速いのは、それを支える献身的なカスタマーサポートだけ です!YouTubeのコンテンツをサイトに追加する際に何かお困りですか?メッセージでご連絡ください。

注:YouTube Feed Proは、世界で最も急速に成長しているコンテンツ管理システムであるWordPressと完全に互換性があります。

Wix、Weebly、Squarespace、Shopifyなどのプラットフォームには対応していませんが、Divi、Elementor、Oxygen BuilderのYouTube動画Thriveには100%対応しています。

YouTubeチャンネルのフィードをウェブサイトに埋め込む方法

「Smash Balloon YouTube Feed Pro」はYouTube APIに直接接続し、フィードの作成から表示までを一括して処理します。一度設定すれば、管理者の手間をかけずにサイトの情報を常に最新の状態に保つことができます。

プラグインをインストールし、チャンネルを連携させ、サイトのデザインに合わせてレイアウトをカスタマイズしたら、好きな場所に埋め込んでください。その手順を順を追って説明します。

ステップ1: Smash Balloon YouTube Feed Pro プラグインをインストールする

YouTubeフィードをウェブサイトに表示するには、こちらからYouTube Feed Proプラグインを入手してください。

その後、プラグインをインストールし、WordPressサイトに追加します。この方法について復習が必要ですか?

WordPressプラグインをインストールするためのステップバイステップのチュートリアルをご覧ください。

プラグインをインストールして有効化したら、YouTubeフィードを作成してください。

ステップ 2: 新しいYouTubeフィードを作成する

YouTubeフィードを作成するには、WordPressダッシュボードからYouTubeフィード " すべてのフィードメニューに移動します。

次に、上部にある「新規追加」 ボタンをクリックします。

新しいYoutubeフィードを追加。

そうしたら、サイトに追加したいYouTubeフィードの種類を選択します。以下のフィードタイプからYouTube動画を表示することができます:

YouTubeフィードの種類を選択し、「次へ」をクリックして進みます。

Youtubeフィードの種類を選択する

このチュートリアルでは、チャンネル・ フィード・タイプを追加して、指定したチャンネルの動画のYouTubeフィードを表示します。

次のステップでは、YouTubeに接続して新しいフィードの作成を完了します。

ステップ3:YouTubeにフィードを接続する

このフィードをYouTubeに接続することで、ウェブサイトに動画を表示することができる。

ポップアップには、YouTubeフィードを2つの方法で接続するオプションが表示されます:

  • YouTubeのAPIキーを追加する
  • YouTubeアカウントに接続する

すべてのタイプのYouTubeフィードにアクセスするには、ポップアップでAPIキーを追加オプションを選択することができます。

apiキーが必要 youtubeフィードプロ

APIキーの作成と使用については、こちらのガイドに従ってください。

APIキーを取得したら、それをポップアップに貼り付け Addをクリックする。

youtubeにapiキーを追加

または、ポップアップでYouTubeアカウントに接続するオプションを選択することもできます。

Youtubeアカウントに接続する

その後、YouTube Feed ProはYouTubeアカウントへの読み取り専用 アクセスを要求します。このアクセス権を使って、プラグインはYouTubeの情報を見るだけで、実際にあなたのアカウントに変更を加えることはできません。

YouTubeアカウントを接続するには、[続行] ボタンをクリックします。

YOUTUBEフィードプロに読み取り専用アクセスを許可する

これで、新しいフィードが作成され、YouTubeに接続されました。次のステップでは、YouTubeフィードのソースを追加します。

ステップ4:YouTubeフィードソースを接続する

フィードのソースは、YouTubeチャンネル、プレイリスト、検索ワードなど、表示したいものを指定できます。

チャンネルフィードを追加するので、WPBeginnerYouTubeチャンネルをソースとして使用します。

まず、https://www.youtube.com、ウェブサイトに表示したいYouTubeチャンネルに移動します。そこで、上部にあるチャンネルURLをチェックしてください。

URLの中で"/channel/"または"/user/"を探し、それ以降を次のようにコピーする

ユーザー名をコピーする。

完了したら、ウェブサイトに戻り、チャンネルIDまたはユーザー名 フィールドにコードを貼り付けます

次に、「Next」 ボタンをクリックして続行します。

YouTubeフィードのソースを入力

その後、ステップ5に進み、YouTubeフィードの見た目をカスタマイズできる。

ステップ5:YouTubeフィードウィジェットをカスタマイズする

ソースの接続が終わったら、次はYouTubeフィードのテンプレートを選びます。

フィードのデザインを瞬時に変更できる8種類のフィードテンプレートがあります:

ここでフィードテンプレートを選択し、「次へ 」をクリックして次に進みます。

フィードテンプレートを選ぶ youtubeフィードプロ

YouTube動画ウィジェットをサイトに埋め込む前に、もっとカスタマイズしたいですか?

プラグインがあなたをカバーします。ビジュアルフィードエディタを使えば、専門的な知識は必要なく、簡単に思い通りのフィードをデザインすることができます!

左側には、フィードのレイアウト、フォーマット、YouTube登録ボタン、サイズ、色、ヘッダーのスタイルなどを変更するためのカスタマイズオプションがあります。

ライブフィードエディタ youtubeフィードプロ

さらに、左側にはYouTubeフィードのライブプレビューも表示されます。これにより、すべての変更をリアルタイムで追跡することができます。

フィードのカスタマイズを開始するには、フィードレイアウトオプションを クリックします。

フィードレイアウトオプションを開く youtubeフィードプロ

このプラグインを使えば、YouTubeフィードのレイアウトを簡単に変更できます。以下の4つのレイアウトオプションから選択するだけです:

  • グリッド
  • ギャラリー
  • リスト
  • カルーセル
フィードレイアウトオプション youtubeフィードプロ

YouTube動画を正方形のサムネイルで整と並べたグリッド表示にしたいですかグリッドレイアウトを使って、ウェブサイトにYouTube動画ウォールを表示できます。

グリッド・レイアウト・ユーチューブ・フィードの例

ウェブサイトにビデオ証言を表示する場合はどうしますか?ギャラリーレイアウトを 使用して、1つの大きな動画を表示し、その下に複数の動画のサムネイルを表示することで、より長い視聴時間を確保できます。

ギャラリーレイアウト ユーチューブビデオフィード

YouTubeライブストリームのような分かりやすいデザインの場合は、リストレイアウトを 使用してYouTubeフィードを1列に表示します。

ユーチューブ用リストレイアウト

最後に、YouTubeチャンネルをスライドショーに埋め込みたい場合は、カルーセルレイアウトを 使用すると、サイトの閲覧者がコンテンツを消費しやすくなります。

カルーセルレイアウトYoutubeフィードプロ

お好きなレイアウトを選択したら、必ず「保存」ボタンをクリックして選択を保存してください。

いかに迅速で簡単か、お分かりいただけたでしょうか?複雑なHTMLコードを扱う必要はありません - 数回クリックするだけでフィードをデザインできます。

その後、左上の小さなカスタマイズ ボタンをクリックします。

このページから、YouTubeフィードをカスタマイズするための他のオプションを使用することができます。続けるには、左側のヘッダーボタンを クリックしてください。

オープンヘッダーオプション

ここから、「有効にする 」オプションを切り替えることで、YouTubeフィードの上部にヘッダーを表示することができます。

その下に、ヘッダーのデザインを選択するヘッダースタイルオプションがあります。ここでは2つのオプションから選ぶことができます:

  • 標準:YouTubeチャンネルの名前とアイコンをフィードの上部に表示します。
  • テキスト フィードの上部にテキストを表示します。
ヘッダーオプション youtubeフィードプロ

ヘッダーオプションを設定したら、上部の保存 ボタンをクリックしてください。

ご覧の通り、このプラグインを使えばYouTubeフィードのデザインを超簡単に設定できます。フィードのサイズ、色、ボタン、ライトボックス、その他いろいろ変更できます。

YouTubeフィードのカスタマイズは終わりましたか?保存」 ボタンを忘れずにクリックして、下の最後のステップに進んでください。

ステップ6:WordPressにYouTubeフィードを追加する

このプラグインを使えば、YouTubeのフィードをウェブサイトのさまざまな場所に簡単に表示することができます:

  • ワードプレスのページで
  • WordPressのサイドバーまたはフッターに表示する

どこに置こうか迷っていますか?ご心配なく。この2つのステップについては後述します。

WordPressページにYouTubeフィードを追加する

YouTubeフィードをページに埋め込む場合、プラグインのライブフィードエディタを使用することができます。

まず、上部にある埋め込み ボタンをクリックします。

Youtubeフィードを埋め込む

次に、新しいYouTubeフィードの場所を選択するポップアップが表示されます。続行するには、ショートコードをコピーするか、単にページに 追加ボタンをクリックします。

Youtubeフィードをページに埋め込む

すると、あなたのサイトのWordPressウェブページのリストが表示されます。フィードを埋め込むページを選択し、「追加」をクリックします。

ワードプレスのページを選択

そうすると、YouTube Feed ProがWordPressのエディターにそのページを表示し、フィードを埋め込むことができます。

ここにコンテンツブロックを追加するには、上部のプラス(+)アイコ ンをクリックします。

ワードプレスのブロックページを追加する

検索バーを使って「youtube feed」を 探し、下のYouTube ウィジェットのフィードを クリックする。

最後に、「更新」 または「公開」をクリックすると、フィードが公開されます。あなたのウェブサイトを開いて、YouTubeフィードが訪問者にどのように見えるかを確認することができます。

Youtubeフィードの例

それでは、次にYouTubeフィードを埋め込む方法を見てみましょう。

このプラグインには既製のWordPressウィジェットが付属しているので、YouTubeフィードをサイドバー領域に数秒で簡単に追加することができます - コードを埋め込む必要はありません。

まず、ライブフィードエディターでYouTubeフィードをもう一度開きます。

YouTubeフィード " すべてのフィードメニューに移動し、先ほどのYouTubeフィードをクリックしてください。

ライブフィードエディタを開いたら、上部にある埋め込み ボタンをクリックします。

Youtubeフィードを埋め込む

YouTubeチャンネル・ウィジェットをウェブサイトに埋め込むには、このポップアップの「ウィジェットに追加」 オプションをクリックしてください。

ウィジェットに埋め込む youtubeフィードプロ

プラグインは、あなたのウェブサイトのウィジェットページに あなたを送ります。ここで、YouTubeフィードをサイドバーまたはフッターに埋め込むかどうかを選択できます。

YouTubeフィードをサイドバーに埋め込むには、このページの サイドバーパネルを クリックしてください。

サイドバーパネルを開く

また、フッターパネルを クリックしてYouTubeのコンテンツを埋め込むこともできます。

フッターパネルを開く

最後に、プラス(+)アイコンを クリックし、YouTube ウィジェットのフィードを 選択します。

サイトにYoutubeウィジェットを追加する

これでYouTubeフィードがウィジェットとして埋め込まれました。これで、更新ボタンをクリックして変更を確定できます。

サイト訪問者がサイドバーエリアをチェックすると、YouTubeフィードウィジェットがこのように表示されます:

youtube feed proを使ってサイトにyoutubeフィードを追加した場合のサンプルフィード

さあ、これで完成です!このチュートリアルのステップバイステップの指示に従うことで、わずか5分足らずで簡単にWordPressウェブサイトにYouTubeフィードを追加することができます!

これで、チャンネル登録者を増やし、YouTubeチャンネルを成長させるための旅をすぐに始めることができる。

何をお待ちになりますか?ここでYouTube Feed Proを始めましょう

よくある質問

新しいYouTube動画は自動的に私のサイトに表示されますか?

その通りです。これが、手動で埋め込むよりもプラグインを使う最大の理由です。「Smash Balloon YouTube Feed Pro」は新しい動画を自動的にチェックし、フィードを更新します。YouTubeに動画を公開すれば、数分以内にサイトに反映されます。WordPressにログインする必要はありません。

自分のウェブサイトのフィードにYouTube Shortsを表示することはできますか?

はい。「Smash Balloon YouTube Feed Pro」は、通常の動画、ライブ配信、プレイリストコンテンツに加え、ショート動画にも対応しています。特定の形式のみを表示したい場合は、表示するコンテンツの種類をフィルタリングすることも可能です。ショート動画専用の設定については、ウェブサイトにYouTubeショート動画を埋め込む方法に関するガイドをご覧ください。

1つのフィードに複数のYouTubeチャンネルの動画を表示することはできますか?

はい。チャンネルごとに個別のフィードを作成して異なるページに表示することも、それらを1つのフィードに統合することも可能です。これは、複数のYouTubeアカウントを管理しているブランドや、自社チャンネルに加えパートナーチャンネルのコンテンツも取り込みたいブランドにとって便利です。

フィードにYouTubeのライブ配信を埋め込むことはできますか?

はい。ただし、ステップ3でAPIキーを連携させておくと、最も良い結果が得られます。YouTubeでライブ配信を開始すると、配信は自動的にフィードに表示され、視聴者には「ライブ配信中」として表示されます。配信が終了すると、録画された動画に切り替わります。

YouTubeフィードを追加すると、ウェブサイトの表示速度は遅くなりますか?

いいえ。「Smash Balloon YouTube Feed Pro」はサーバーサイドキャッシュを採用しています。つまり、動画のサムネイルやデータは、ページが読み込まれるたびにYouTubeから取得されるのではなく、ローカルに保存されます。そのため、アクセスするたびに余分なAPI呼び出しが発生することなく、フィードを高速に表示できます。

WordPressソーシャルメディア・フィード・チュートリアル

今すぐYouTubeフィードの埋め込みを始めましょう

このガイドが示すように、ウェブサイトに動的なYouTubeフィードを追加することは、チャンネルを成長させる強力な方法です。

ソーシャルメディアマーケターとしての経験から言えば、動画を手作業で一つずつ埋め込むのは手間がかかり、時間を浪費する作業だ。

だからこそ、Smash Balloon YouTube Feed Proをお勧めします。このツールはプロセスを自動化し、コードに触れることなく、わずか数分でプロフェッショナルな動画フィードを表示できるようにします。

どうすれば始められるかは、以下の通りだ:

  • YouTube Feed Proを今すぐ入手し、14日間リスクフリーでお試しください。YouTubeフィードを簡単に埋め込む方法を始めましょう
  • ビジュアルエディターを使用して動画フィードのデザインをカスタマイズし、ウェブサイトのスタイルに完璧に調和させましょう
  • YouTubeフィードをページ、投稿、サイドバーウィジェットにシームレスに追加して、コンテンツの閲覧数を増やしましょう

YouTube Feed Proを使用してフィードを埋め込む方法についてご質問はありますか?コメント欄でお知らせください。

著者アバター
リアン・ラロヤ コンテンツマーケティングマネージャー
リアンヌはスマッシュバルーンでコンテンツマーケティングマネージャーを務め、WordPressコンテンツ、ソーシャルメディアマーケティング、ユーザー生成コンテンツ(UGC)、検索エンジン最適化(SEO)において12年以上の経験を持つ。

コメントを追加する

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従って管理され、すべてのリンクはnofollowであることにご留意ください。名前欄にはキーワードを使用しないでください。個人的で有意義な会話をしましょう。