レスポンシブFacebook動画をウェブサイトに埋め込む方法
クリック・ソーシャル

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

無料トライアル開始 アングルライト
ホーム ブログ レスポンシブFacebook動画をウェブサイトに埋め込む方法

レスポンシブFacebook動画をウェブサイトに埋め込む方法

レスポンシブFacebook動画をウェブサイトに埋め込む方法

レスポンシブなFacebook動画の埋め込みをサイトに追加する方法をお探しですか?

フェイスブックの動画を見せることで、ウェブサイト訪問者の関心を引きつけ、新しいフォロワーに変えることもできる。

しかし、コードの扱いに慣れていない場合、レスポンシブなFacebook動画を埋め込むのは難しいかもしれない。

そこで、Facebookの動画をサイトに埋め込む最も簡単な方法をご紹介します。

その前に、Facebookからレスポンシブ動画を表示することがビジネスにどのように役立つかを見てみよう。

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

なぜレスポンシブFacebook動画埋め込みをサイトに追加するのか?

Facebookは最大のソーシャルメディア・プラットフォームであり、魅力的な動画コンテンツの素晴らしい供給源だ。

訪問者をウェブサイトに留めておく簡単な方法をお望みなら、関連するFacebookの動画を埋め込むだけでよい。

フェイスブック動画配信の例

また、Facebookの動画がレスポンシブであれば、どのデバイスでも同じアスペクト比になります。つまり、モバイル端末の人も動画をチェックできるのです。

サイト訪問者のエンゲージメントを高めるだけでなく、サイト滞在時間が長くなれば、SEO対策にもなります。

さらに、レスポンシブ・フェイスブック動画をサイトに埋め込むこともできる:

  • 訪問者を顧客に変えるために、商品ページにレビューや体験談の動画を表示する
  • ライブビデオを表示し、より多くの人にライブイベントに参加してもらう
  • 自分のFacebook動画を宣伝して、再生回数、「いいね!」数、フォロワー数を増やす
  • Q&Aセッション、インタビューなどのコンテンツを追加し、訪問者との関係を構築する。
  • その他にも... 

Facebookから動画を埋め込むことで、Facebookの存在感を高め、より多くの売上を獲得し、ビジネスを成長させることができます。

Facebook動画をサイトに表示するもう一つの方法は、iFramesを使うことです。しかし、ウェブサイトを成長させたいのであれば、iFramesよりもembedを使う方がよいでしょう。

結局のところ、Googleのような検索エンジンはiFrameのコンテンツを読むことができない。

代わりにFacebookの埋め込みを使えば、検索エンジンはあなたのサイトのキーワードが豊富なソーシャルメディアコンテンツを認識し、あなたのサイトをさらに上位にランク付けすることができます。

それでは、レスポンシブFacebook動画を埋め込む最も簡単な方法を見ていきましょう。

WordPressにレスポンシブFacebook動画埋め込みを追加する最も簡単な方法

Facebookの動画をウェブサイトに表示するには、2つの方法があります:

  • 手動の方法: Facebook動画の埋め込みコードを作成し、そのコードをウェブサイトに追加します。
  • 自動的な方法: WordPressのプラグインを使えば、Facebookの動画を自動的にサイトに埋め込むことができます。

手動の方法を選ぶと、多くの埋め込みコードを扱わなければならず、時間と労力がかかります。

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

デザイナーを雇うか、手動ですべてのコードをいじらない限り、Facebookの動画の見栄えを変えることはできません。そのため、埋め込み動画プレーヤーがウェブサイトのデザインと衝突する可能性があります。

さらに、あなたのサイトに埋め込みコードを追加するときに何か問題が発生した場合にあなたを助けるためにサポートチームを持つことはありません。

解決策は?

Facebookのフィードプラグインを使えば、レスポンシブ動画をサイトに埋め込むことができる。そのための最良の選択肢がFacebook Feed Proです。

カスタムfacebookフィードプロプラグイン

Facebook Feed Proは、わずか数クリックでFacebookのコンテンツを表示できるユーザーフレンドリーなプラグインです。

このプラグインはスピードを念頭に置いて作られているため、ユーザーがクリックするまでFacebookの動画が自動再生されることはありません。そのため、好きなだけ動画を埋め込むことができ、しかもサイトは高速で表示されます。

Facebookのフィードを作成し、カスタマイズし、サイトに埋め込むという3ステップのプロセスを踏むだけです。

スマッシュバルーン

Facebookのフィードを使って、反応するビデオ、ライブストリーム、写真、アルバム、Facebookの投稿などを表示することができます。

さらに、あらかじめデザインされたテンプレートやビジュアルカスタマイザーを使って、あなたのサイトでのフィードの見え方を選ぶことができます。

一番の魅力は?いつでも手を差し伸べてくれるWordPressの専門家チームからの支援が受けられることです。

これらの素晴らしい機能により、Facebook Feed Proは世界中の25万人以上のユーザーから4.9/5つ星の評価を得ています。

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

レスポンシブなFacebook動画エンベッドを表示する準備はできましたか?Facebook Feed Proをご利用ください

このプラグインを使って、レスポンシブ対応のFacebook動画を簡単に表示する方法を見てみましょう。

レスポンシブFacebook動画をウェブサイトに埋め込む方法

Facebook Feed Proプラグインを使ってモバイルフレンドリーなFacebook動画を表示するには、以下のステップバイステップのガイドに従ってください:

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

まず最初にすべきことは、ここからFacebook Feed Proプラグインを入手することだ。

プラグインを入手したら、WordPressサイトにインストールして有効化することができます。

やり方がわからない?WordPressプラグインのインストール方法をご覧ください。

プラグインをインストールして有効化したら、ステップ2に進んでください。

ステップ2:Facebook動画フィードを作成する

レスポンシブFacebook動画をサイトに表示するには、まず新しいFacebookフィードを作成します。

そのためには、WordPressのダッシュボードエリアからFacebookフィード " すべてのフィードメニューを開き、新規追加をクリックします。

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

その後、作成したいFacebookフィードのタイプを選択します。Facebook Feed Proを使えば、タイムライン、フォトアルバム、イベントカレンダー、レビューなどを埋め込むフィードを作成できます。

レスポンシブ動画を表示するので、動画フィードタイプを選択し、「次へ」をクリックします。

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

これで、WordPressサイトに新しいFacebook動画フィードができました。ステップ3では、このフィードをFacebookアカウントに接続してみましょう。

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

Facebookアカウントと接続することで、新しいフィードはFacebookから動画を取り込み、あなたのサイトに表示することができる。

まずは、こちらの「新規追加」ボタンをクリックしてください。

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

次に、ページ またはグループからレスポンシブ動画を表示するかどうかを選択できます。

ご希望のオプションを選択後、下の「Facebookに接続」ボタンをクリックしてください。

フェイスブック・フィード・プロを使ってフェイスブックに接続

WordPressのウェブサイトからFacebookにアクセスし、アカウントの接続を完了します。

その前に、ポップアップで接続したいページまたはグループを選択し、「次へ」をクリックします。

フェイスブックのページを選択する

次に、プラグインはFacebookのデータを見ることができるように、Facebookアカウントへの読み取り専用アクセスを要求します。このアクセスは読み取り専用なので、プラグインは一切変更を加えることができません。

読み取り専用アクセス権を与え、Facebookアカウントを接続するには、「完了」をクリックします。

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

そうすることで、あなたのウェブサイトが再び開き、このフェイスブックページやグループをソースとして追加することができる。

そのためには、ポップアップのAddボタンをクリックします。

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

次にフェイスブックのフィードを作成するときは、ここからソースを選択できます!

ここからNextをクリックしてこのステップを終了する。

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

アカウントの接続が完了したら、レスポンシブFacebook動画のウェブサイトでの表示方法をカスタマイズできます。

ステップ4:Facebookの動画フィードをカスタマイズする

このプラグインを使って作成したFacebookフィードは、自動的にレスポンシブになり、あなたのウェブサイトのデザインもコピーされます。

さらに、Facebookのビデオフィードをカスタマイズするさまざまな方法もある。

プラグインを開始するには、Facebookフィードのテンプレートを選択するよう求められます。これらのテンプレートはユニークなデザインで、ワンクリックでインポートできます。

あとは、使用したいフィード・テンプレートを選択し、「次へ」をクリックするだけです。

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

次に、レスポンシブFacebook動画を表示する2つの方法を選択できます:

  • すべての動画を表示 ページまたはグループにあるすべての動画を表示します。
  • 特定のプレイリストから表示する: 選択したプレイリストの動画のみを表示

お好みのオプションを選択し、「Next」をクリックして続行します。

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

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

そうすると、プラグインがビジュアルカスタマイザーでフィードを開きます。

ここでは、レイアウト、フィードサイズ、色、ヘッダー、投稿スタイル、より多くのボタンの読み込みなどを、左側のオプションを使用して数回クリックするだけで変更することができます。

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

右側には、あなたのFacebookフィードのライブプレビューが表示されます。これで、すべての変更をリアルタイムで追跡できます。

まずは、「配色」をクリックして、Facebookの動画フィードの色を編集してみましょう。

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

Facebook Feed Proには3つのカラースキームが用意されています:

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

配色を選択したら、「保存」ボタンをクリックします。

Facebookの動画フィードのデザインを続けるには、左上の「カスタマイズ」 ボタンをクリックします。

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

そうすると、メインのフィードカスタマイズメニューに戻ります。ビジュアルカスタマイザーを使って、Facebook動画フィードの上にヘッダーを表示することもできます。

ヘッダーの見栄えを変更するには、ここでヘッダーオプションをクリックします。

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

次に、左側にある「ヘッダーの種類」オプションを探し、希望するヘッダーの種類を選択する。

ここでは2つの異なるオプションから選ぶことができる:

  • ビジュアル: カバー写真、プロフィール写真、「いいね!」数などのグラフィックヘッダーを表示します。
  • テキスト短い見出しを書いて、Facebookの動画フィードの一番上に表示しましょう。
ヘッダー型フェイスブック・フィード・プロ

ヘッダータイプを選択したら、Save ボタンをクリックして変更を確定します。

残りのオプションを使って、動画の数、レイアウト、ボタンのデザイン、いいね!ボックスなどをカスタマイズできます。

レスポンシブFacebook動画フィードの外観に満足したら、保存ボタンをクリックしてください。

これで最後のステップに進み、新しいFacebook動画フィードを埋め込む準備ができました。

ステップ5:ウェブサイトにレスポンシブFacebook動画を埋め込む

Facebookの動画をWordPressに埋め込むには、2つの方法があります:

  • レスポンシブFacebook動画をページに埋め込む
  • レスポンシブFacebook動画をサイドバーやフッターに埋め込む

この2つの方法の使い方を以下で見てみよう:

レスポンシブFacebook動画をページに埋め込む

ビジュアルカスタマイザーを使えば、数回のクリックでFacebookのフィードを埋め込むことができます。

まず、埋め込み ボタンをクリックして、フィードの埋め込みオプションを開きます。

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

レスポンシブFacebook動画の場所を選択できるポップアップが表示されます。

とりあえず、Add to a Page オプションをクリックして続行する。

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

その後、プラグインはあなたのビデオを表示するために使用できるWordPressページのリストを表示します。

リストからページを選択し、下の追加 ボタンをクリックしてください。

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

WordPressエディターでページが開いているのが見えます。ここにFacebookの動画フィードを埋め込むには、コンテンツブロックを追加するだけです。

プラスアイコン(+)をクリックしてブロックを追加し、オプションからカスタムFacebookフィードを選択します。

更新 ボタンをクリックすると、フェイスブックの動画フィードがあなたのウェブサイトでライブ配信されます。

レスポンシブ・ビデオがどのように見えるかは、サイトを開いてご自分の目で確かめてください。

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

それでは、レスポンシブFacebook動画を埋め込む別の方法を見てみましょう。

サイドバーまたはフッターにレスポンシブFacebook動画を埋め込む

Facebookウィジェットを使って、サイトのサイドバーやフッターにレスポンシブ動画を表示することもできます。

はじめに、WordPressのダッシュボードからFacebookフィード " すべてのフィードメニューを開き、埋め込みたいフィードをクリックします。

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

ビジュアルカスタマイザーにFacebookのフィードが再び表示されます。

ここから、埋め込みボタンをクリックして、動画を表示する場所を選択します。

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

今度は、ポップアップの 「ウィジェットに追加」ボタンをクリックします。

そうすることで、WordPressサイトに新しいFacebookウィジェットを追加することができます。

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

これで、フッターとサイドバーのどちらかを選んでFacebook動画を表示できる。

レスポンシブFacebook動画エンベッドをサイドバーに表示したいですか?

サイドバーパネルを クリックしてください。

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

この例では、Facebookの動画を表示するためにサイドバーを使用します。

しかし、代わりにフッターエリアを使用したい場合は、代わりにフッターパネルをクリックすることができます。

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

サイドバーまたはフッターに新しいウィジェットを追加するには、下部にあるプラス(+)アイコ ンをクリックします。

その後、オプションからカスタムFacebookフィードウィジェットを選択します。

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

HTML、PHP、CSSなどのコーディングは一切不要です。

どのように見えるか見たい方は、今すぐウェブサイトを開いてください。

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

これで完成だ!

WordPressサイトにレスポンシブFacebook動画を埋め込む方法はお分かりいただけたでしょうか。ご覧のとおり、Facebook Feed Proを使えば、コーディングに慣れていなくても、とても簡単です。

そうするだけで、訪問者の関心を引きつけ、Facebookのフォロワーを増やし、人々を顧客に変えるなど、さまざまなことが可能になる。

レスポンシブFacebook動画を埋め込みたいですか?今すぐFacebook Feed Proを入手しましょう!

モバイルフレンドリーなYouTube動画を表示したい場合は、レスポンシブYouTube動画をWordPressに埋め込む方法をご覧ください。

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

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

コメントを追加する

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