YouTubeライブストリームをElementorに埋め込む方法(5分で)
クリック・ソーシャル

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

無料トライアル開始 アングルライト
ホーム ブログ YouTubeライブストリームをElementorに埋め込む方法(5分で)

YouTubeライブストリームをElementorに埋め込む方法(5分で)

YouTubeのライブストリームをelementorに埋め込む方法

YouTubeのライブストリームを見せることは、人々をElementorのウェブサイトに釘付けにする素晴らしい方法です。

しかし、手動でライブ動画を埋め込むことは、複雑な埋め込みコードを扱うことを意味するという欠点がある。そして正直なところ、それは大きな時間の浪費でもある。

そこで、YouTubeライブビデオをElementorに追加する最も簡単な方法を紹介しよう。超簡単で、全工程にかかる時間はわずか数分です。

YouTubeライブストリームをElementorに追加する最も簡単な方法

まず最初に、ライブストリームを取得してElementorサイトに表示できるツールが必要です。

すべての選択肢の中から、私がYouTube Feed Proに決めたのは、いくつかの重要な理由があったからだ:

  • ライブストリームを埋め込むだけでなく、YouTubeのプレイリストやチャンネル、検索結果を表示することもできる。
  • YouTube Feed Proは、Elementorのほか、Divi、Thrive Architect、Beever Builderなどの人気サイトビルダーと完璧に互換性があります。
  • YouTubeのコンテンツを素早く簡単に埋め込むには、3ステップのガイドフローに従うだけです。
  • このプラグインは超軽量なので、大量の動画やストリームを埋め込むことができ、サイトの読み込みもこれまでと同じくらい速くなる。
  • ビジュアルカスタマイザーから、数回クリックするだけで動画のデザインを変更できます。
ライブ・フィード・エディター

また、10万人以上のユーザーから 4.9/5つ星の評価を得ており、多くの人がこのYouTube埋め込みツールに満足しているようだ。

これを試すには、YouTube Feed Proをこちらから入手できる。

なぜElementorにYouTubeライブストリームを埋め込むのか?

  • 重要なニュースや発表のためにYouTubeライブストリームを表示し、簡単に多くの人々に到達することができます。
  • ライブストリームを埋め込むことで、新しい視聴者と購読者を大量に獲得し、YouTubeチャンネルを成長させることができます。
  • ライブストリームではリアルタイムで視聴者と対話できるため、訪問者との関係を構築し、熱心な顧客に変えることができます。
  • ライブ・ストリームを使えば、製品の肯定的なレビューや証言を見せることができる。この社会的証明で、あなたのウェブサイト上でより多くの売上を得ることができます。
  • その他にも...

ElementorでYouTubeライブストリームを埋め込む方法

以下に、Elementor WordPressサイトにYouTubeライブストリームを埋め込むための簡単な手順を示します。

始めよう!

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

まずは、YouTube Feed Proプラグインをこちらから入手してください。次に、WordPressウェブサイトにプラグインをインストールし、有効化します。

プラグインのインストール方法については、WordPressプラグインのインストール方法をご覧ください。

ステップ2:YouTubeライブフィードを作成する

ガイドされたフローを使用して、YouTubeライブストリーム用の新しいフィードを作成できます。

まず、WordPressのダッシュボードを開き、YouTubeフィード " すべてのフィードメニューをクリックします。

新しいページで、上部にある「新規追加」 ボタンをクリックします。

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

YouTube Feed Proでは、作成したいYouTubeフィードのタイプを選択できるようになりました。

YouTubeのライブストリームに加えて、チャンネル、プレイリスト、検索結果などをインポートすることもできる。

続行するには、リストから「ライブストリーム」 オプションを選択し、「次へ」ボタンをクリックします。

youtubeのフィードタイプでライブストリームを選択

ステップ3:YouTubeアカウントに接続する

YouTubeフィードを作成したら、それをあなたのアカウントに接続し、ライブストリームをあなたのサイトに表示することができます。

そのためには、YouTube API Keyを入力するだけです

APIキーをまだお持ちではないですか?このステップバイステップのガイドに従ってYouTube APIキーを作成してください。

最後に、追加ボタンをクリックする前に、YouTube APIキーをポップアップに貼り付けます

youtubeのapiキーを入力してください。

Elementorのウェブサイトに埋め込みたいライブストリームを選択できるようになりました。そのためには、YouTubeチャンネルを開き、上部のURLをチェックしてください。

そこで、URL末尾の"/channel/" または"/user/" 以降のコードをコピーする

youtubeのチャンネルIDをコピーする

次に、もう一度ウェブサイトに戻り、Add Channel ID for Livestream 欄にコードを貼り付けます

最後に、「次へ」 ボタンをクリックして、ライブストリームを接続することができます。

YouTubeチャンネルをソースとして追加する

ステップ4:YouTubeライブストリームをカスタマイズする

このプラグインは超ユーザーフレンドリーなので、YouTubeライブフィードは自動的にあなたのウェブサイトのデザインをコピーします。

その上、あらかじめ用意されたテンプレートをインポートすることで、ビデオのルックを素早く変更することができる:

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

お好みのテンプレートを選択してから「次へ」ボタンをクリックしてください。

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

派手さは求めていないので、デフォルトのデザインにした。

テンプレートを選択した後、プラグインはビジュアルカスタマイザーを開き、そこでライブストリームを詳細にパーソナライズすることができます。

左側のオプションを使えば、数クリックでデザインを変更できます。また、ライブプレビューは、あなたの変更を追跡するのに役立ちます。

ライブフィードエディタは、ウェブサイトにYouTubeのライブストリーミングビデオを追加します。

ここにはたくさんのオプションがあるので、自由にチェックして気に入ったデザインを見つけてほしい。

とりあえず、主な選択肢をいくつか紹介しよう。

始めるには、フィードレイアウトオプションを選択します。

オープンフィードのレイアウトオプションは、YouTubeのビデオをストリーミングライブ

YouTube動画のレイアウトを4種類から選べるようになりました:

  • グリッド
  • ギャラリー
  • リスト
  • カルーセル

以下、これらのレイアウトを見てみよう:

レイアウトオプション ユーチューブ ライブストリーミングビデオ

一度にたくさんのYouTube動画を埋め込みたい場合は、グリッドレイアウトを 選択することができます。

そうすることで、YouTubeの動画が異なる行や列に表示されます。

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

次に、YouTubeギャラリーレイアウトが あり、大きなビデオプレーヤーとその下に小さなサムネイルが表示されます。

それはあなたの現在のライブストリームを強調し、新しい視聴者のトンを得るための素晴らしい方法です。

ギャラリー・レイアウト・ユーチューブ・フィード・プロ

もうひとつの素晴らしいレイアウトは、リスト・オプションだ。

YouTubeの動画を1列に表示できるので、各動画がはっきりと見える。

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

最後に、ライブ・ストリームをYouTubeのスライドショーで表示するカルーセル・レイアウトが ある。

このインタラクティブなスライダーを使えば、訪問者を簡単に惹きつけることができます。

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

新しいレイアウトを確認するには、上部にある「保存」ボタンをクリックします。

また、YouTubeライブストリームのパーソナライズを続行するには、[カスタマイズ] をクリックすることができます。

カスタマイズオプションに戻る youtubeフィードプロ

また、YouTubeライブフィードの上のヘッダーの見え方をカスタマイズすることもできます。

そのためには、左側のヘッダーオプションを選択するだけでよい。

youtubeフィードプロのヘッダーオプションを開く

上部に、ヘッダーを有効または無効にするオプションがあります。

YouTubeヘッダーを有効にすると、2つのヘッダースタイルから選択できます:

  • スタンダードチャンネル名、アイコン、登録者数などを表示します。
  • テキスト YouTubeフィードの上部に表示するカスタムヘッダーを作成します。
ライブフィードエディター ヘッダーを選択

最後にSave ボタンをクリックして、新しいヘッダーを確認することを忘れないでください。

ご覧のように、YouTube Feed Proでは、カラースキーム、ロードモアボタン、フィルターなどを簡単にカスタマイズすることができます。ビジュアルカスタマイザーの残りのオプションを使用するだけです。

YouTubeフィードに満足したら、保存ボタンをクリックするのをお忘れなく。

ステップ5:InstagramのフィードをElementorに追加する

カスタマイズが終わったら、YouTubeライブストリームをElementorに追加しましょう。HTMLコードは必要ありません。

Elementorの上では、Gutenbergブロックエディタやクラシックエディタを使ってYouTube動画を埋め込むこともできる。

始める準備はできましたか?まず、上部の埋め込み ボタンをクリックしてください。

Youtubeフィードを埋め込む

そうすると、YouTubeフィードの埋め込みオプションが開きます。ここから直接、ページ、サイドバー、フッターに埋め込むことができます。

とりあえず、コピーボタンをクリックしてショートコードをコピーしてください。

ショートコードをYoutubeに埋め込む

次に、このショートコードをElementorのページや投稿に挿入します。

WordPressのページを使用するには、ダッシュボードからページ " 新規追加 メニューに移動し、Elementorで編集をクリックします。

新しいワードプレスページを作成する

代わりに投稿を使いたいですか?その場合は、ダッシュボードから投稿 " 新規追加 メニューを開いてください。

そうしたら、Elementorで編集を選択します。

ワードプレスの新規投稿を作成する

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

Elementorエディタを開いたら、左側にElementorウィジェットがすべてあります。

上部の検索バーを使って、「ショートコード」ウィジェットを探すことができます。

elementor 用ショートコードウィジェット

すると、下の検索結果にショートコードウィジェットが表示されます。

続行するには、ウィジェットを左からドラッグ し、ページにドロップ します。

elementor 用ショートコード・ブロック

最後に、先ほどコピーしたショートコードを「ショートコードを入力」フィールドに 貼り付けます

そうすることで、YouTubeのライブストリーム動画を右側に埋め込むことができます。

Youtubeショートコードを挿入する

新しいYouTubeライブフィードを保存するには、左下の「公開」 ボタンをクリックします。

これだけで、あなたのElementorウェブサイトにYouTubeライブストリームのフィードが表示されます。このYouTube WordPressプラグインを使えば、わずか数分で美しいYouTubeフィードを手に入れることができます。

elementorでのyoutubeライブ・ストリームの例

それで終わりだ!

ElementorのウェブサイトにYouTubeライブストリームを簡単に埋め込む方法がわかりました。これだけで、再生回数を増やしたり、訪問者を巻き込んだり、YouTube チャンネルを成長させたりすることができます。

YouTube Feed Proプラグインさえあれば、あらゆる種類のYouTubeコンテンツを簡単に埋め込むことができる。一番の魅力は?コーディングは一切必要ありません!

ElementorにYouTubeライブストリームを埋め込む準備はできましたか?今すぐ YouTube Feed Pro を入手しましょう!

YouTubeチャンネルを簡単に増やしたいですか?YouTubeチャンネルをウェブサイトに埋め込む方法については、こちらのガイドをご覧ください。

その他のソーシャルメディア・マーケティング・ガイドとヒント

著者アバター
サジャン・シャルマ シニアライター
WordPress、ソーシャルメディアマーケティング、オンラインビジネスについて10年以上執筆。専門分野はインフルエンサーマーケティング、コンテンツキュレーション、デジタルマーケティング戦略など多岐にわたる。

コメントを追加する

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