あなたのウェブサイトにYouTubeウィジェットを作成する方法を知りたいですか?
YouTubeは動画コンテンツのトップ・ソーシャル・ネットワークであるため、YouTubeウィジェットは訪問者を惹きつけ、チャンネルを成長させるスマートな方法となります。
しかし、YouTubeウィジェットを直接追加するのは、特にコードの扱いに慣れていない場合、難しいかもしれない。
そこで、YouTubeウィジェットをウェブサイトに追加するための完全ガイドをご用意しました。
この記事では複数の方法を取り上げるので、スキップしたい方法をクリックしてほしい:
ウェブサイトにYouTubeウィジェットを使用する理由
- YouTubeでレビューや証言のような社会的証拠を示し、人々に商品を購入するよう説得することができます。
- より多くの再生回数、「いいね!」、購読者を獲得するには、YouTubeウィジェットを使って自分のビデオコンテンツを表示することができます。
- YouTubeウィジェットは、あなたのウェブサイトの訪問者とライブストリームを共有することもできます。

- 顧客によるユーザー生成コンテンツ(UGC)を共有することで、より多くの人々があなたのブランドに関する動画コンテンツを作成するよう促すことができます。
- YouTubeから関連性の高いコンテンツを表示することで、人々の注目を集め、サイトへのアクセスを維持することができます。
WordPressにYouTubeウィジェットを追加する最も簡単な方法とは?
YouTubeウィジェットをウェブサイトに追加したい場合、2つのオプションがあります:
- 手動でYouTubeウィジェットをウェブサイトに追加する
- WordPressのプラグインを使ってYouTubeウィジェットを作成し、埋め込む。
手作業の場合、CSSやJavaScript、その他のコーディング言語を扱わなければならないというデメリットがある。

簡単な方法として、代わりにWordPressのプラグインを使うことができる。そうすれば、プラグインが動画を取得し、自動的にウェブサイトに表示することができる。
YouTubeフィード・プラグインといえば、Smash BalloonのYouTube Feed Proが市場でベスト・オプションだ。

この素晴らしいツールを使えば、YouTubeウィジェットを作成し、数回クリックするだけでウェブサイトに表示することができます。
さらに使いやすくするために、いくつかの優れた機能が用意されている:
- ウィジェットを使って、あなたのチャンネルの動画、YouTubeのプレイリスト、ライブストリームなどを表示できます。
- このプラグインは非常に軽量なので、YouTubeの動画を大量に表示しても、フィードの読み込みは軽快だ。
- チャンネルを増やすために、このプラグインでは動画の再生中に購読ボタン付きのバナーを表示することができます。
- ワンクリックで、あらかじめ作成されたテンプレートをインポートでき、ライブエディタを使ってウィジェットを詳細にデザインすることもできます。

ご覧のように、YouTube Feed Proは、ウェブサイトにYouTubeウィジェットを埋め込む最も簡単な方法を提供します。
YouTubeマーケティングを始める準備はできましたか?今すぐYouTube Feed Proを手に入れましょう。
ウェブサイトにYouTubeウィジェットを作成する方法
では、あなたのウェブサイトにYouTubeウィジェットを作成するための手順を見てみましょう。最も簡単な方法から始めて、最も難しい手順まで説明します。
方法1:WordPressプラグインでYouTubeウィジェットを作成する
先に述べたように、最も簡単な方法は、WordPressのプラグインを使い、YouTubeの動画を取得して表示させることだ。
始めよう:
ステップ1:YouTube Feed Pro プラグインをダウンロードしてインストールする
まず、ここをクリックしてYouTube Feed Proを入手してください。次に、このプラグインをあなたのウェブサイトにインストールし、有効化してください。
その方法がわからない場合は、以下の手順に従ってWordPressプラグインをインストールするだけです。
ステップ2:新しいYouTubeウィジェットを作成する
新しいYouTubeウィジェットを作成するには、3ステップのガイドフローに従ってください。
まず、WordPressのダッシュボードエリアからYouTube Feed " All Feedsメニューを開きます。
そこから「新規追加 」ボタンをクリックします。

そうすると、YouTube Feed Proはウィジェットに表示するYouTubeコンテンツのタイプを選択できるようになります。オプションは以下の通りです:
- チャンネル: チャンネルIDまたはユーザー名を使ってYouTubeチャンネルのコンテンツを表示するフィード。
- プレイリスト: YouTubeのプレイリストIDを入力して、特定のプレイリストをフィードに表示する。
- 検索特定の検索語句に基づいてコンテンツを表示するには、検索フィードタイプを使用します。
- ライブストリーム:フィードに近日公開またはライブストリーミングのビデオを1つ表示する
- 単一のビデオ:個々のビデオを順番に表示する
続行するには、フィードの種類を選択し、[次へ]をクリックします。

この例では、ウィジェットにYouTubeチャンネルを埋め込むためにChannelオプションを使用します。
ステップ3:YouTubeウィジェット・ソースを追加する
新しいウィジェットを作成したら、YouTubeアカウントに接続しましょう。最も簡単な方法は、APIキーを使用することです。
プロからのアドバイス:まだキーをお持ちでない場合は、この簡単なガイドに従って新しいAPIキーを作成することができます。
APIキーを入手したら、Addをクリックする前に、ポップアップに貼り付けます 。

では、どのYouTubeコンテンツを表示するかを選択しましょう。この例では、YouTubeチャンネルを使います。
まず、埋め込みたいYouTubeチャンネルを開きます。チャンネルのURLはアドレスバーの一番上にあります。
そこで、/user/または/channel/ 以降をすべてコピーし、自分のサイトに戻る。

ウェブサイト上で、「次へ」をクリックする前に、チャンネルID またはユーザー名フィールドにコピーしたコードを貼り付けます。
同様に、プレイリスト、ライブストリーム、個々の動画などのURLからコードをコピーして、他のフィードタイプに使用することもできます。

ステップ4:YouTubeウィジェットをカスタマイズする
YouTubeウィジェットを他のコンテンツよりも目立たせたい場合は、フィードテンプレートのコレクションから選ぶことができます:
- デフォルト
- カルーセル
- カード
- リスト
- ギャラリー
- 最新ビデオ
- ショーケース・カルーセル
- ウィジェット
あとは好みのテンプレートを選んで「Next」ボタンをクリックするだけ。

このように、YouTubeウィジェットのためにあらかじめ作られたデザインをインポートすることができます。
ウィジェットを詳細にカスタマイズするために、プラグインはライブフィードエディタを表示します。ここでフィードのレイアウト、カラースキーム、ヘッダー、フィードサイズなどを変更できます。

YouTubeウィジェットを変更するときは、右側のライブプレビューを使用して、YouTubeウィジェットの外観を確認することができます。
まず、左側のフィードレイアウトオプションをクリックして開始します。

ここから、YouTubeウィジェットのレイアウトを4種類から選ぶことができます:
- グリッド:異なる行や列に大量の動画を一度に埋め込む
- ギャラリー:大きなビデオプレーヤーを表示し、その下に小さなサムネイルを表示します。
- リストYouTube動画を1列に表示
- カルーセル: ウェブサイトにスライドショーとして動画を表示する
各レイアウト・オプションをクリックすると、使用するカラム数など、さらなる設定が表示される。

気に入ったレイアウトを選んだら、「保存」をクリックして変更を保持します。
ウィジェットのカスタマイズを続けるには、左上のカスタマイズ ボタンをクリックしてください。

左側の配色オプションをクリックして、ウィジェットの色を編集できます。
YouTube Feed Proでは、配色を選択することで、すべての色を一度に簡単に変更することができます。
ここでは、4つの配色から選ぶことができる:
- テーマから継承する: ウィジェットがあなたのウェブサイトの色をコピーしていることを確認してください。
- ライト:YouTubeウィジェットには明るい色と暗いフォントを使用してください。
- Dark:暗い背景色と明るい文字色でウィジェットを表示する。
- カスタム:手動ですべてのYouTubeウィジェットの色を選択します。

配色を決めたら、変更を確定するために「保存」をクリックするのを忘れないでください。
以前と同じように、左上のカスタマイズをクリックして、YouTubeウィジェットのデザインを変更し続けることができます。

ウィジェットのヘッダーを変更するには、左側のパネルからヘッダーオプションをクリックしてください。

Enableオプションを切り替えることで、ヘッダーの表示/非表示を選択できます。
その下に、チャンネル名、ロゴ、登録者数、説明文を含む標準ヘッダーを表示するように選択できます。
または、テキストヘッダーを 選んで、YouTubeウィジェットのヘッダーにカスタムテキストを書くこともできます。

その後、先ほどと同じようにSaveをクリックして変更を確定する。
残りのオプションを使って、フィードのサイズ、ボタンのデザイン、表示要素などを設定できます。ここからフィルターを追加して、ソーシャルメディアフィードをキュレーションすることもできます。
YouTubeウィジェットのデザインに満足したら、もう一度保存 ボタンをクリックしてください。
ステップ5:YouTubeウィジェットを表示する
YouTubeウィジェットの作成が完了したら、いよいよウェブサイトに表示しましょう。YouTubeウィジェットをページに埋め込むには、ライブフィードエディタを使用します。
右上の埋め込み ボタンをクリックするだけです。

YouTubeフィードウィジェットの場所を設定するポップアップが表示されます。ソーシャルメディアコンテンツをウェブページに表示するか、サイトのウィジェット対応エリアに表示するかを選択できます。
とりあえず、ポップアップの「ページに追加 」ボタンをクリックしてください。

YouTube Feed Proは、あなたのWordPressウェブサイトのページのリストを表示します。
続行するには、リストからページを選択し、「追加」をクリックします。

WordPressのブロックエディターでそのページを開きます。ブロックエディター内でプラス(+)アイコンをクリックして、新しいコンテンツブロックを選択します。

上部の検索バーで"youtube feed "を探してから、下のYouTubeフィード・ウィジェットを クリックしてください。

そうすることで、YouTubeフィードウィジェットがあなたのページに埋め込まれます。上部にある「更新」 または「公開」ボタンをクリックすると、YouTubeウィジェットがオンラインになります。
あなたのウェブサイトを開いてみてください。

では、次にYouTubeフィード・ウィジェットを埋め込む方法をチェックしましょう。
方法2:WordPressのサイドバーまたはフッターにYouTubeウィジェットを作成する
YouTube Feed Proプラグインには、フッターやサイドバーなど、あなたのウェブサイトのサイドバーエリアに追加できる既製のWordPressウィジェットも付属しています。
WordPressでYouTubeサイドバーウィジェットを表示するには、上記の手順に従ってフィードウィジェットを作成してください。
次に、WordPressダッシュボードからYouTubeフィード " すべてのフィードに移動し、YouTubeウィジェットをクリックします。

ライブフィードエディターでYouTubeフィードウィジェットが再び開きます。
前の方法と同様に、上部にある埋め込みボタンをクリックします。

ポップアップを使って、このYouTubeフィードウィジェットをサイドバーやフッターエリアに埋め込むことができます。
ここでウィジェットに追加 ボタンをクリックするだけです。

クリックするとウェブサイトのウィジェットページに移動し、サイドバーやフッターのウィジェットを管理することができます。
YouTubeフィード・ウィジェットをサイドバーに表示しますか?サイドバーパネルを クリックしてください。

フッターにYouTubeのコンテンツを表示したい場合は、ここでフッターをクリックします。
とりあえず、この例ではサイドバーを使うことにしよう。

新しいウィジェットを追加するには、プラスアイコン(+)を クリックします。
その後、オプションからYouTube ウィジェットのフィードを クリックするだけです。

更新を クリックすると、新しいYouTubeフィードウィジェットがオンラインになります。
ウェブサイトの前面に移動すると、YouTubeチャンネル・ウィジェットがどのように機能するかを見ることができます。

方法3:手動でYouTubeウィジェットを作成する
手動でYouTubeウィジェットを作成する場合は、YouTubeから埋め込みコードをコピーしてサイトに貼り付ける必要があります。
各動画の埋め込みコードを貼り付けるために行ったり来たりする必要があるため、この方法を使用するとかなり時間がかかります。さらに、WordPressのプラグインで実現できるようなカスタマイズはできません。
実際、ウィジェットを思い通りに仕上げるには、開発者を雇う必要があるかもしれない。
とはいえ、WordPressでYouTubeウィジェットを手動で作成する方法は2つあります:
- YouTube動画のURLをWordPressのエディタに直接貼り付ける。
- 動画の共有オプションからiFrame埋め込みコードをコピーする
どちらの方法でも、動画の完全なフィードを表示することはできず、ウィジェットは1つの動画のみを表示するように制限されます。
YouTube URLメソッド
最初のオプションを試すには、まず埋め込みたいYouTube動画を開く。
ビデオを開いたら、一番上のURLをコピーする 。

ダッシュボードからページ " 新規追加メニューに移動して、WordPressサイトに新しいページを作成します。

代わりにWordPressの投稿を使いたい場合は、ダッシュボードから投稿 " 新規追加に 進みます。
この例では、WordPressのページを使用します。

そして、そのURLを新しい投稿やページのクラシックエディターかブロックエディターに直接貼り付けます。
そうすると、WordPressはそのURLをYouTube動画に変換し、ページや投稿に表示します。

この方法は、サイドバーにウィジェットを表示するためにも使用できます。
外観 " ウィジェットに移動するだけで、WordPressウィジェットの管理を開始できます。

そこでサイドバーオプションを クリックし、サイドバーに動画を埋め込む。

フッターにビデオを表示したいですか?代わりにフッターパネルをクリックしてください。
このチュートリアルでは、サイドバーについて説明する。

ここで、プラス(+)アイコンをクリックして新しいウィジェットを追加し、「段落」を選択します。

YouTube動画のURLを段落ウィジェットに貼り付けるだけ で、動画を埋め込むことができます。

最後に、YouTubeのコンテンツをウェブサイトに埋め込む方法がもう一つあります。
YouTubeのiFrameメソッド
より複雑なiFrameを使うには、まず埋め込みたいYouTube動画を見つけて共有アイコンをクリックします。
次の画面で、Embedオプションを選択します。

ボックス内にあるコードをすべてコピーしてください。

WordPressのブロックエディターでプラス(+)アイコンをクリックし、「カスタムHTML」 ウィジェットを検索します。検索結果から、オプションからカスタムHTMLブロックをクリックします。

次に、カスタムHTMLブロック内に埋め込みコードを貼り付け、「公開」をクリックします。

ページをプレビューすると、下の例のようになります。

この方法でサイドバーにYouTubeウィジェットを作成するには、外観 " ウィジェットでウィジェットページを開きます。

先ほどと同じように、サイドバーかフッターパネルを選ぶことができる。
次に、プラス(+)アイコンをクリックし、カスタムHTMLウィジェットをサイドバーまたはフッターに追加します。

最後に、埋め込みコードをウィジェットに貼り付けてYouTubeビデオを埋め込む。

ウィジェットを選択したサイドバーにドラッグし、埋め込みコードを貼り付け、「保存」をクリックします。
これで完成だ!
このように、YouTubeウィジェットを作成することで、より多くの再生回数を獲得したり、フォロワーを増やしたり、ウェブサイトの訪問者を引き付けたりすることができる。
ご覧の通り、YouTube Feed Proを使えば、WordPress初心者でもYouTubeウィジェットを超簡単に埋め込むことができます。
YouTubeウィジェットを簡単に埋め込む準備はできましたか?YouTube Feed Pro を使い始めるには、ここをクリックしてください。
インスタグラムの動画もスーパーチャージしたいですか?それなら、人気インスタグラム動画の作り方に関するこの完全ガイドをご覧ください。
その他のソーシャルメディア・ガイド&チュートリアル
- 簡単に購読者を急増させるYouTube動画の種類
- 顔を見せずにYouTubeで稼ぐ方法
- TikTokはあなたの秘密兵器:中小企業のためのベストTikTokアイデア
- 複数のTikTok動画を一度に埋め込む方法(コーディングゼロの方法)