Facebookライブストリームをウェブサイトに埋め込む方法(簡単な方法)
クリック・ソーシャル

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

無料トライアル開始 アングルライト
ホーム ブログ Facebookライブストリームをウェブサイトに埋め込む方法(簡単な方法)

Facebookライブストリームをウェブサイトに埋め込む方法(簡単な方法)

Facebookライブストリームをウェブサイトに埋め込む方法

あなたのウェブサイトにFacebookのライブストリームを埋め込みたいですか?それなら正しい場所に来ました。

Facebookストリームをサイトに埋め込めば、大量の新規視聴者を簡単に獲得できます。さらに、訪問者の関心を維持し、彼らを熱心な顧客に変える素晴らしい方法です。

ありがたいことに、WordPressにFacebookのライブストリームを埋め込むのはとても簡単になりました。

その前に、Facebookライブストリームを表示することが、あなたのブランドの成長にどのように役立つかを見てみましょう。

または、ここをクリックしてチュートリアルに直接飛ぶこともできる。

なぜFacebookライブストリームをウェブサイトに埋め込むのか?

Facebookライブは、ライブストリーミングのための人気のあるプラットフォームであり、多くの人々にリーチしたい場合は、あなたのビジネスを宣伝するのに最適な場所です。

結局のところ、82%の人々が、通常のソーシャルメディア投稿と比較して、ブランドからのライブビデオを好む。

また、ウェブサイトにライブ・ストリームを埋め込めば、サイトのトラフィックを新しい視聴者やフォロワーに変えることができる。

そうすれば、ブランドのFacebookプレゼンスを簡単に高めることができます。そして、それは始まりに過ぎない! 

ライブ・ストリームを使ったFacebookマーケティング・ハックをいくつか紹介しよう:

  • 発表会、ウェビナー、製品発表会などのライブイベントをウェブサイト訪問者と共有できます。
  • 古いライブストリームを埋め込むことで、より多くのビューを取得し続け、より多くのコンテンツを訪問者に提供することができます。
  • Facebookを利用していない顧客も、御社のサイトから直接ライブ・ストリームに参加することができます。
  • 訪問者を顧客に変えるために、製品のデモや証言をライブストリームに埋め込むことができます。

全体として、Facebookのライブストリームは、あなたのサイトに訪問者を維持し、あなたのFacebookのフォロワーを増やし、売上を向上させたい場合など、素晴らしい選択肢となり得る。

それでは、簡単な方法でWordPressにFacebookのライブストリームを埋め込む方法を見てみよう。

WordPressにFacebookライブストリームを埋め込む最も簡単な方法

以前は、フェイスブックのリンクをウェブサイトに直接貼り付ければ、ワードプレスが自動的に埋め込んでくれた。

残念ながら、WordPressはこのoEmbeds機能のサポートを中止したため、Facebookからのコンテンツを表示するのがかなり難しくなった。

各ライブストリームの埋め込みコードを手動で生成し、サイトにコードを追加する必要があります。

手動でフェイスブック・ライブを埋め込む例

お察しの通り、このプロセスは長く複雑なものになる-特に、多くのコードを扱うことに慣れていない場合は。

さらに、ライブ・ストリームの外観をカスタマイズできないため、ウェブサイトのブランディングに合わない可能性もある。

良いニュースは?

Facebookのコンテンツを自動的に埋め込んでくれるWordPressプラグインを使えばいい。

そして、すぐに始めることができる最高のプラグインがFacebook Feed Proだ。

Facebook Feed Proを使用すると、わずか数分であなたのウェブサイトにFacebookのあらゆる種類のコンテンツを表示することができます。

プラグインを有効化すると、3ステップのガイドフローが 表示されます。 

Facebookのフィードを作成、カスタマイズし、サイトに埋め込むまでの全プロセスをご紹介します。

これらのFacebookフィードでは、ライブストリーム、FacebookフォトギャラリーFacebookアルバム、ビデオ、Facebookイベント、レビューなどを表示することができます。あなたはここから選択するオプションのトンを取得します!

facebookフィードタイプ選択

さらに、Facebookのフィードは、自動的にあなたのウェブサイトのデザインを継承します。そのため、ライブストリームを埋め込めば、あなたのブランディングに完璧にマッチします。

また、Facebookのコンテンツがあなたのサイトにどのように表示されるかを変更するための、さまざまなカスタマイズオプションが多数用意されているライブフィードエディタも利用できます。

Facebook Feed Proはまた、世界中の25万人以上のユーザーから 4.9/5つ星の評価を得ています。ご覧の通り、これは本当に市場で最高のFacebookフィードプラグインです。

カスタム・フェイスブック・フィード・プロ

Facebookのフィードを簡単に表示したいですか?Facebook Feed Proはこちらから

それでは、このプラグインがあなたのウェブサイトにライブストリームを埋め込むのにどのように役立つかを見ていこう。

Facebookライブストリームをウェブサイトに埋め込む方法

WordPressにFacebookライブ動画を埋め込む方法を学ぶ準備はできていますか?

以下の簡単なガイドに従うだけで、すぐに始めることができる!

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

まず、ここからFacebook Feed Proプラグインを入手し、あなたのウェブサイトにインストールしてください。

その方法を簡単に復習したい場合は、WordPressのプラグインをインストールする方法について、こちらのガイドに従ってください。

プラグインの準備ができたら、ステップ2に進み、Facebookフィードを作成します。

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

Facebookのフィードを使用すると、あなたのウェブサイトにライブストリームを表示することができます。

フィードを作成するには、まずWordPressのダッシュボードエリアからFacebookフィード " すべてのフィードメニューを開きます。

その後、上部にある新規追加 ボタンをクリックする。

新しいfacebookフィードを作成する

その後、Facebookのフィードに表示したいコンテンツの種類を選択できます。このプラグインはページのタイムライン、フォトギャラリー、イベントカレンダー、レビューなどをサポートします。

ライブストリームを表示するには、「ビデオ」オプションを選択し、「次へ」をクリックします。

facebookの動画フィードタイプを選ぶ

これで、あなたのウェブサイトにライブストリームを表示するための新しいFacebook動画フィードができました。ステップ3では、Facebookアカウントをこのフィードに接続します。

ステップ3:Facebookページとの接続

Facebookページと接続することで、フィードはFacebookからライブストリームを取得し、あなたのウェブサイトに表示することができます。

新規追加ボタンをクリックしてください。

フェイスブック・フィード・プロにソースを追加

その後、プラグインはあなたのFacebookアカウントを接続するようにリダイレクトします。先に進み、Facebookに接続をクリックします。

そうすると、ウェブブラウザでフェイスブックが開きます。ここで、「続ける」ボタンをクリックして、使用しているアカウントを確認できます。

ソースとして接続するために使用するFacebookアカウントを確認したら、プラグインにFacebookへの読み取り専用アクセス権を与え、ウェブサイトにライブストリームを表示できるようにします。

この読み取り専用アクセス権では、Facebook Feed Proはコンテンツの閲覧のみが可能で、アカウントに変更を加えることはできません。

Done ボタンをクリックして、読み取り専用アクセスを確定するだけです。

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

これで、プラグインはあなたをもう一度あなたのウェブサイトに送ります。ここから、このFacebookライブビデオフィードのソースとしてあなたのFacebookページを確認することができます。

そのためには、Addボタンをクリックする。

フェイスブックのグループページを選択

新しいフェイスブック・フィードを作成する際、ワンクリックでこのページをソースとして選択できるようになった。

Nextボタンをクリックして次のステップに進むことができます。

フェイスブック・フィード・プロ

これで、あなたのFacebookのフィードは、あなたのウェブサイト上でライブストリーミングビデオを表示する準備が整いました。

しかし、あなたのライブFacebookフィードを埋め込み始める前に、ステップ4でそのデザインをカスタマイズすることができます。

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

プラグインは自動的にあなたのウェブサイトのデザインを継承するので、あなたのFacebookライブストリームは、箱から出してすぐに素晴らしい外観になります。

Facebookライブストリームのデザインをもっとコントロールしたいですか?このプラグインがあなたをカバーします。

まず、あなたのフィードのために事前に構築されたフィードテンプレートをインポートすることを選択することができます。7つのオプションから選択できます:

  • デフォルト
  • シンプルな石積み
  • ウィジェット
  • 大型グリッド
  • 大型アルバム
  • ショーケース・カルーセル
  • シンプルなカルーセル

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

facebookフィードテンプレートを選択する

その後、プラグインは、Facebookライブストリームを表示する2つの異なる方法を提供します:

  • ページにすべてのストリームを表示する
  • 選択したプレイリストのコンテンツのみを表示

お好みのオプションを選択したら、「Next」ボタンをクリックします。

facebookの動画配信タイプを選択

この例では、「すべてのビデオを表示」オプションを使用します。

今、プラグインは、ライブフィードエディタを開きますので、あなたのFacebookライブストリームを詳細にカスタマイズすることができます。

左側のオプションを使って、レイアウト、フィードサイズ、色、ヘッダー、投稿スタイル、もっと読み込むボタンなどを変更できます。

ライブ・フィード・エディター

変更を加えると、右側のライブ・プレビューにFacebookのライブ・ストリームがどのように見えるかが表示されます。

ここから、配色 オプションをクリックしてカスタマイズを開始する。

フェイスブック・フィード・プロの配色オプション

Facebookライブ・ストリームの色を設定するには、4つの配色から選ぶことができます:

  • テーマから継承:WordPressテーマの色をコピーする
  • 明るい:暗いフォントで明るい背景を表示する
  • 暗い:明るい文字色とともに暗い背景を表示します。
  • カスタム:フィードのすべての色を手動で選択
フェイスブック・フィード・プロ

オプションから配色を選択し、上部の保存ボタンをクリックします。

次に、[カスタマイズ] ボタンをクリックして、ライブ ストリームのデザインの設定を続行できます。

カスタマイズボタン facebookフィード ライブストリーム

次に、ストリームの上にあるFacebookのヘッダーの外観を選択できます。

そのためには、左側のヘッダーオプションをクリックします。

facebookフィードプロライブストリームのヘッダーオプション

ヘッダータイプオプションを 使用すると、ヘッダの外観を選択できます:

  • ビジュアル: カバー写真、プロフィール写真、「いいね!」数などのビジュアルヘッダーを表示します。
  • テキストライブストリームの上に見出しとして使用するテキストを手動で記述します。
ヘッダー型フェイスブック・フィード・プロ

お好きなヘッダーを選択してください。ヘッダーのデザインを確認するには、 保存をクリックすることを忘れないでください。

ご覧のように、プラグインのライブフィードエディタを使用して、Facebookライブストリームをカスタマイズするのは非常に簡単です。残りのオプションを使用して、動画の数、レイアウト、ボタンのデザイン、いいねボックスなどを設定することができます。

最後に、Saveボタンをクリックして変更を保存します。

これで、最後のステップに進み、Facebookライブストリームを埋め込むことができる。

ステップ5:ウェブサイトにFacebookライブストリームを埋め込む

Facebookのライブストリームを埋め込むには、2種類の方法があります:

  • ウェブサイトのページにFacebookのライブストリームを埋め込む
  • ウェブサイトのサイドバーまたはフッターにFacebookライブストリームを埋め込む

この2つの方法を以下に見てみよう。

Facebookライブ・ストリームをウェブサイトのページに埋め込む

朗報は、このライブ・フィード・エディターから直接Facebookストリームを埋め込むことができることだ。

上部の埋め込み ボタンをクリックするだけで、簡単に始められます。

ライブストリーミングビデオをワードプレスに埋め込む

そうすると、Facebookライブストリームの場所を選択できるポップアップが開きます。

ウェブページに追加するので、Add to a Page オプションをクリックします。

ウェブサイトにライブ・ストリーミング・ビデオを追加する

次に、あなたのサイトで利用可能なページのリストが表示されます。

Facebookライブストリームを表示するページを選択し、[次へ]をクリックします。

ピック・ワードプレス・ページ・フェイスブック・ライブ

プラグインはWordPressのエディターでそのページを開き、Facebookのコンテンツを埋め込むことができます。

そのためには、プラスアイコン(+)をクリックし、カスタムFacebookフィードブロックを選択します。

更新 ボタンをクリックすると、Facebookライブストリームがウェブサイトに埋め込まれます。

このページを開くと、ライブ・ストリームがウェブサイトの訪問者にどのように見えるかをチェックできる。

フェイスブック・ライブ・ストリーミング・ビデオの例

次に、WordPressにFacebookストリームを追加する方法を見てみよう。

ウェブサイトのサイドバーまたはフッターにFacebookライブストリームを埋め込む

ライブフィードエディタを使って、サイドバーやフッターにFacebookのウィジェットとしてストリームを埋め込むこともできます。

まず、WordPressのダッシュボードエリアからFacebookフィード " すべてのフィードメニューに移動します。

その後、ライブストリームがあるFacebookのビデオフィードをクリックします。

facebookライブストリームをエディタで開く

そうすることで、あなたのFacebookライブストリームが再びライブフィードエディタに表示されます。

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

ライブストリーミングビデオをワードプレスに埋め込む

その後、ポップアップを使用してFacebookストリームの場所を選択することができます。

Facebookのライブ・ストリーミング・ウィジェットを埋め込むので、ここで「 ウィジェットに追加」をクリックする。

フェイスブック・ライブ・ストリームのウェブサイトのサイドバー・フッターを追加する

その後、プラグインはあなたのウェブサイトのウィジェットページにあなたを送ります。そこから、WordPressウィジェットを追加、削除、管理できる。

Facebookのライブストリームをサイドバーに表示するには、サイドバーパネルを クリックします。

インスタグラムのライブフィードを埋め込むサイドバーパネルを開く

代わりにライブストリームをフッターに表示したいですか?フッターパネルをクリックしてください。

ここではサイドバーを例に説明する。

フッターパネルを開き、インスタグラムのライブフィードを埋め込む

新しいウィジェットを追加するには、下部にあるプラス(+)アイコ ンをクリックするだけです。

最後に、カスタムFacebookフィード・ウィジェットをクリックして、WordPressサイトにライブ・ストリームを埋め込む。

フェイスブック・ソーシャルメディア・フィード・ウィジェット

新しいウィジェットを確認するには、上部の更新ボタンをクリックしてください。

あなたのライブストリームを表示する新しいFacebookウィジェットができました。あなたのサイトを開くと、それがどのように見えるか見ることができます:

フェイスブックのライブ・ストリームをウェブサイトのサイドバーに埋め込む

これで完成だ!

あなたのウェブサイトにFacebookライブストリームを埋め込む方法を紹介しました。あなたは今、簡単にウェブサイトの訪問者を視聴者やフォロワーに変えることができます。

Facebook Feed Proプラグインを使えば、Facebookのソーシャルメディアコンテンツをこれまで以上に簡単に表示できます。

Facebookライブストリームを埋め込む準備はできましたか?こちらからFacebook Feed Proを入手してください

YouTubeのライブストリームをウェブサイトに埋め込みたいですか?あなたは、ライブストリーミングビデオを埋め込む方法についての私達の完全なガイドに従うことができます。

参考になりましたか?Facebookや Twitterで、ソーシャルメディア・マーケティングのヒントやコツをご紹介しています。

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

コメント2

  1. フランシス・マクドゥーガル 2年前

    ライブストリーム「だけ」を埋め込み、ライブストリームが再生されていないときに画像を表示したいと考えています。このツールでできますか?

    返信
    1. マヌエル・エスコバル 2年前

      こんにちは、フランシス、

      この場合、動画を埋め込むとサムネイルが表示されるので、訪問者は動画を再生する前にそれを見ることになります。

      その他ご不明な点がございましたら、こちらのフォームよりお問い合わせください、

      ありがとう! ᙂ。

      返信

フランシス・マクドゥーガルへの返信を残す 返信をキャンセルする

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