ウェブサイトにYouTubeウィジェットを作成する方法(ステップバイステップ)
クリック・ソーシャル

ClickSocialを使ってWordPressから直接ソーシャルメディア投稿をスケジュールする

無料トライアル開始 アングルライト
ホーム ブログ ウェブサイトにYouTubeウィジェットを作成する方法(究極のガイド)

ウェブサイトにYouTubeウィジェットを作成する方法(究極のガイド)

YouTubeウィジェットの作り方

あなたのウェブサイトにYouTubeウィジェットを作成する方法を知りたいですか?

YouTubeは動画コンテンツのトップ・ソーシャル・ネットワークであるため、YouTubeウィジェットは訪問者を惹きつけ、チャンネルを成長させるスマートな方法となります。

しかし、YouTubeウィジェットを直接追加するのは、特にコードの扱いに慣れていない場合、難しいかもしれない。

そこで、YouTubeウィジェットをウェブサイトに追加するための完全ガイドをご用意しました。

この記事では複数の方法を取り上げるので、スキップしたい方法をクリックしてほしい:

ウェブサイトにYouTubeウィジェットを使用する理由

  • YouTubeでレビューや証言のような社会的証拠を示し、人々に商品を購入するよう説得することができます。
  • より多くの再生回数、「いいね!」、購読者を獲得するには、YouTubeウィジェットを使って自分のビデオコンテンツを表示することができます。
  • YouTubeウィジェットは、あなたのウェブサイトの訪問者とライブストリームを共有することもできます。
ユーチューブ・ライブ・ストリーミングの例
  • 顧客によるユーザー生成コンテンツ(UGC)を共有することで、より多くの人々があなたのブランドに関する動画コンテンツを作成するよう促すことができます。
  • YouTubeから関連性の高いコンテンツを表示することで、人々の注目を集め、サイトへのアクセスを維持することができます。

WordPressにYouTubeウィジェットを追加する最も簡単な方法とは?

YouTubeウィジェットをウェブサイトに追加したい場合、2つのオプションがあります:

手作業の場合、CSSやJavaScript、その他のコーディング言語を扱わなければならないというデメリットがある。

手動でYoutube動画を埋め込む

簡単な方法として、代わりにWordPressのプラグインを使うことができる。そうすれば、プラグインが動画を取得し、自動的にウェブサイトに表示することができる。

YouTubeフィード・プラグインといえば、Smash BalloonのYouTube Feed Proが市場でベスト・オプションだ。

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フィードを追加。

そうすると、YouTube Feed Proはウィジェットに表示するYouTubeコンテンツのタイプを選択できるようになります。オプションは以下の通りです:

  • チャンネル: チャンネルIDまたはユーザー名を使ってYouTubeチャンネルのコンテンツを表示するフィード。
  • プレイリスト: YouTubeのプレイリストIDを入力して、特定のプレイリストをフィードに表示する
  • 検索特定の検索語句に基づいてコンテンツを表示するには、検索フィードタイプを使用します。
  • ライブストリーム:フィードに近日公開またはライブストリーミングのビデオを1つ表示する
  • 単一のビデオ:個々のビデオを順番に表示する

続行するには、フィードの種類を選択し、[次へ]をクリックします。

YouTubeフィードの種類を選択.jpg

この例では、ウィジェットにYouTubeチャンネルを埋め込むためにChannelオプションを使用します。

ステップ3:YouTubeウィジェット・ソースを追加する

新しいウィジェットを作成したら、YouTubeアカウントに接続しましょう。最も簡単な方法は、APIキーを使用することです。

プロからのアドバイス:まだキーをお持ちでない場合は、この簡単なガイドに従って新しいAPIキーを作成することができます。

APIキーを入手したら、Addをクリックする前に、ポップアップに貼り付けます

yotubeフィードプロにapiキーを追加する

では、どのYouTubeコンテンツを表示するかを選択しましょう。この例では、YouTubeチャンネルを使います。

まず、埋め込みたいYouTubeチャンネルを開きます。チャンネルのURLはアドレスバーの一番上にあります。

そこで、/user/または/channel/ 以降をすべてコピーし、自分のサイトに戻る。

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

ウェブサイト上で、「次へ」をクリックする前に、チャンネルID またはユーザー名フィールドにコピーしたコードを貼り付けます

同様に、プレイリスト、ライブストリーム、個々の動画などのURLからコードをコピーして、他のフィードタイプに使用することもできます。

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

ステップ4:YouTubeウィジェットをカスタマイズする

YouTubeウィジェットを他のコンテンツよりも目立たせたい場合は、フィードテンプレートのコレクションから選ぶことができます:

  • デフォルト
  • カルーセル
  • カード
  • リスト
  • ギャラリー
  • 最新ビデオ
  • ショーケース・カルーセル
  • ウィジェット

あとは好みのテンプレートを選んで「Next」ボタンをクリックするだけ。

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

このように、YouTubeウィジェットのためにあらかじめ作られたデザインをインポートすることができます。

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

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

YouTubeウィジェットを変更するときは、右側のライブプレビューを使用して、YouTubeウィジェットの外観を確認することができます。

まず、左側のフィードレイアウトオプションをクリックして開始します。

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

ここから、YouTubeウィジェットのレイアウトを4種類から選ぶことができます:

  • グリッド:異なる行や列に大量の動画を一度に埋め込む
  • ギャラリー:大きなビデオプレーヤーを表示し、その下に小さなサムネイルを表示します。
  • リストYouTube動画を1列に表示
  • カルーセル: ウェブサイトにスライドショーとして動画を表示する

各レイアウト・オプションをクリックすると、使用するカラム数など、さらなる設定が表示される。

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

気に入ったレイアウトを選んだら、「保存」をクリックして変更を保持します。

ウィジェットのカスタマイズを続けるには、左上のカスタマイズ ボタンをクリックしてください。

左側の配色オプションをクリックして、ウィジェットの色を編集できます。

YouTube Feed Proでは、配色を選択することで、すべての色を一度に簡単に変更することができます。

ここでは、4つの配色から選ぶことができる:

  • テーマから継承する: ウィジェットがあなたのウェブサイトの色をコピーしていることを確認してください。
  • ライト:YouTubeウィジェットには明るい色と暗いフォントを使用してください。
  • Dark:暗い背景色と明るい文字色でウィジェットを表示する。
  • カスタム:手動ですべてのYouTubeウィジェットの色を選択します。
Youtubeウィジェットの配色オプション

配色を決めたら、変更を確定するために「保存」をクリックするのを忘れないでください。

以前と同じように、左上のカスタマイズをクリックして、YouTubeウィジェットのデザインを変更し続けることができます。

Youtubeウィジェットの配色オプション

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

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

Enableオプションを切り替えることで、ヘッダーの表示/非表示を選択できます。

その下に、チャンネル名、ロゴ、登録者数、説明文を含む標準ヘッダーを表示するように選択できます。

または、テキストヘッダーを 選んで、YouTubeウィジェットのヘッダーにカスタムテキストを書くこともできます。

ヘッダーオプション youtubeフィードプロ

その後、先ほどと同じようにSaveをクリックして変更を確定する。

残りのオプションを使って、フィードのサイズ、ボタンのデザイン、表示要素などを設定できます。ここからフィルターを追加して、ソーシャルメディアフィードをキュレーションすることもできます。

YouTubeウィジェットのデザインに満足したら、もう一度保存 ボタンをクリックしてください。

ステップ5:YouTubeウィジェットを表示する

YouTubeウィジェットの作成が完了したら、いよいよウェブサイトに表示しましょう。YouTubeウィジェットをページに埋め込むには、ライブフィードエディタを使用します。

右上の埋め込み ボタンをクリックするだけです。

Youtubeフィードを埋め込む

YouTubeフィードウィジェットの場所を設定するポップアップが表示されます。ソーシャルメディアコンテンツをウェブページに表示するか、サイトのウィジェット対応エリアに表示するかを選択できます。

とりあえず、ポップアップの「ページに追加 」ボタンをクリックしてください。

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

YouTube Feed Proは、あなたのWordPressウェブサイトのページのリストを表示します。

続行するには、リストからページを選択し、「追加」をクリックします。

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

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

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

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

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

あなたのウェブサイトを開いてみてください。

Youtubeフィードの例

では、次にYouTubeフィード・ウィジェットを埋め込む方法をチェックしましょう。

方法2:WordPressのサイドバーまたはフッターにYouTubeウィジェットを作成する

YouTube Feed Proプラグインには、フッターやサイドバーなど、あなたのウェブサイトのサイドバーエリアに追加できる既製のWordPressウィジェットも付属しています。

WordPressでYouTubeサイドバーウィジェットを表示するには、上記の手順に従ってフィードウィジェットを作成してください。

次に、WordPressダッシュボードからYouTubeフィード " すべてのフィードに移動し、YouTubeウィジェットをクリックします。

ライブフィードエディターでYouTubeフィードウィジェットが再び開きます。

前の方法と同様に、上部にある埋め込みボタンをクリックします。

Youtubeフィードを埋め込む

ポップアップを使って、この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をコピーする

URLをコピーする

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

Youtubeフィードの新しいページ

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

この例では、WordPressのページを使用します。

新しい投稿を追加する

そして、そのURLを新しい投稿やページのクラシックエディターかブロックエディターに直接貼り付けます。

そうすると、WordPressはそのURLをYouTube動画に変換し、ページや投稿に表示します。

手動でYoutube動画を埋め込む

この方法は、サイドバーにウィジェットを表示するためにも使用できます。

外観 " ウィジェットに移動するだけで、WordPressウィジェットの管理を開始できます。

ウィジェットページ

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

サイドバーパネルを開く

フッターにビデオを表示したいですか?代わりにフッターパネルをクリックしてください。

このチュートリアルでは、サイドバーについて説明する。

フッターパネルを開く

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

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

Youtube動画埋め込みウィジェット

最後に、YouTubeのコンテンツをウェブサイトに埋め込む方法がもう一つあります。

YouTubeのiFrameメソッド

より複雑なiFrameを使うには、まず埋め込みたいYouTube動画を見つけて共有アイコンをクリックします。

次の画面で、Embedオプションを選択します。

埋め込みボタン

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

埋め込みボタン

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

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

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

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

ウィジェットページ

先ほどと同じように、サイドバーかフッターパネルを選ぶことができる。

次に、プラス(+)アイコンをクリックし、カスタムHTMLウィジェットをサイドバーまたはフッターに追加します。

カスタムhtmlウィジェットを追加する

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

埋め込みコードを貼り付ける

ウィジェットを選択したサイドバーにドラッグし、埋め込みコードを貼り付け、「保存」をクリックします。

これで完成だ!

このように、YouTubeウィジェットを作成することで、より多くの再生回数を獲得したり、フォロワーを増やしたり、ウェブサイトの訪問者を引き付けたりすることができる。

ご覧の通り、YouTube Feed Proを使えば、WordPress初心者でもYouTubeウィジェットを超簡単に埋め込むことができます。

YouTubeウィジェットを簡単に埋め込む準備はできましたか?YouTube Feed Pro を使い始めるには、ここをクリックしてください。

インスタグラムの動画もスーパーチャージしたいですか?それなら、人気インスタグラム動画の作り方に関するこの完全ガイドをご覧ください。

その他のソーシャルメディア・ガイド&チュートリアル

著者アバター
ステイシー・コリン

コメントを追加する

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