Facebookに動画を投稿し、それをWordPressサイトにも表示させたいと思っている方は、あなただけではありません。
これは、Facebookを積極的に活用しているものの、まだWordPressサイトと連携させていないサイト運営者の方々から、私が最もよく受ける質問の一つです。
朗報です。WordPressにFacebookの動画を埋め込む方法はいくつかありますが、ここではそのすべてを順を追って解説します。
私が実際に使用し、お勧めしているのは「Smash Balloon Facebook Feed Pro」というWordPressプラグインです。これは、Facebookの動画をサイトに直接取り込み、自動的に最新の状態に保ってくれるものです。
ただし、状況に合わせて選べるよう、手動での設定方法もご紹介します。
簡単な答え：はい、プラグインを使わなくても、動画のURLをWordPressのブロックに貼り付けるか、Facebookの埋め込みコードを使用することで、WordPressにFacebookの動画を埋め込むことができます。どちらも単一の動画であれば可能です。
Facebookに投稿するたびに自動的に更新される、動画フィード全体を表示したい場合は、「Smash Balloon Facebook Feed Pro」のようなプラグインが必要です。設定には約5分かかります。
私が実際にやっている方法は、次の通りです。
率直に申し上げると、私はSmash Balloonに勤務しているため、当社のプラグインをおすすめすることになります。しかし、どの方法がご自身のサイトに適しているかを判断していただけるよう、3つの方法すべてについて正直な見解をお伝えします。
この記事で
- WordPressにFacebook動画を埋め込む3つの方法
- Facebook動画をウェブサイトに埋め込む最も簡単な方法
- Facebook動画をウェブサイトに埋め込む6つの手順
- WordPressにFacebook動画を埋め込むには自動か手動か？
- Facebook動画をウェブサイトに手動で埋め込む方法
- なぜWordPressサイトにFacebook動画を埋め込むのか？
- よくある質問
WordPressにFacebook動画を埋め込む3つの方法
手順に入る前に、簡単に比較してみましょう：
| URLの貼り付け（ブロックエディタ） | Facebook埋め込みコード | Smash Balloon Facebook Feed Pro ⭐ おすすめ | |
|---|---|---|---|
| 1つの動画が表示されるのか、それとも全フィードが表示されるのか？ | ❌ 一度に1本の動画 | ❌ 一度に1本の動画 | ✅ Facebookの動画フィードすべて |
| 自動的に更新されますか？ | ❌ いいえ、各動画は手動で追加する必要があります | ❌ いいえ、毎回新しいコードをコピーします | ✅ はい、新しい動画は自動的に表示されます |
| コードを編集する必要がありますか？ | ✅ いいえ | ⚠️ はい、HTMLを「カスタムHTML」ブロックにコピー＆ペーストしてください | ✅ いいえ |
| レイアウトはカスタマイズできますか？ | ❌ いいえ、Facebookプレイヤーのスタイルは固定されています | ❌ いいえ、固定スタイルのみです | ✅ はい、グリッド、リスト、メイソンリー、またはカルーセル |
| Facebookが埋め込みルールを変更したら、機能しなくなるのでしょうか？ | ⚠️ 時には、どうすることもできないことがあります | ⚠️ 時には、どうすることもできないことがあります | ✅ プラグインが自動的に更新を処理します |
| その動画はFacebookで「公開」設定にする必要がありますか？ | ✅ はい | ✅ はい | ✅ はい |
| 最適 | 単発のブログ記事に動画を1本掲載する | プラグインを使わずに、もう少し細かく設定したい人 | 自動的に更新される、スタイリッシュなライブ動画フィードを導入したいWordPressサイト |
ブログ記事に特定の動画を1つだけ埋め込みたい場合は、URLを貼り付ける方法が最も手っ取り早く、所要時間は約30秒です。
しかし、投稿するたびに手動でサイトを更新することなく、訪問者に最新のFacebook動画を閲覧してもらいたいのであれば、Facebook Feed Proが最適な選択肢です。
Facebook動画をウェブサイトに埋め込む最も簡単な方法
WordPressのウェブサイトにFacebookの動画を埋め込む最も簡単な方法は、Smash BalloonFacebook Feed Proプラグインを使用することです。
WordPressのための最高のFacebookフィードプラグインであるFacebook Feed Proは、あなたのウェブサイトにFacebookのビデオフィードを埋め込むことができます。コーディングは必要ありません。
また、このプラグインでFacebookのライブストリームをWordPressに埋め込むことができるのもありがたい。
Smash Balloon Facebook Feed Proは、WordPressサイトにFacebookの動画を埋め込むだけでなく、以下のようなあらゆるタイプのFacebookコンテンツをサイトに表示することができます：
- フェイスブックのイベント
- Facebookの投稿
- 写真
- アルバム
- フェイスブックのレビュー
- フェイスブックギャラリー
- その他にもいろいろある！
そう、このFacebook動画プラグインを使えば、Facebookの開発者や技術専門家でなくても、これらすべてのタイプのフィードを埋め込むことができる！
技術に詳しくない？ご心配なく！
私が個人的にこのFacebook用の最高のソーシャルメディア・プラグインで気に入っているのは、数回のクリックで動画フィードのデザインとコンテンツをコントロールできるビジュアルフィード・カスタマイザーが付属していることだ。
その結果、コードを一行も触ることなく、Facebookのフィードを思い通りに表示させることができる。
スマッシュバルーンの親切なカスタマーサポートと、ソーシャルメディアフィードをウェブサイトに追加するための、ユーザーフレンドリーかつ強力なソーシャルフィードプラグインは、世界の大手ブランドを含む175万人以上のユーザーから信頼を得ています。
数クリックでFacebook動画をウェブサイトに追加する準備はできましたか？今すぐFacebook Feed Proを始めましょう！
Facebook動画をウェブサイトに埋め込む6つの手順
それでは、Facebookの動画コンテンツをウェブサイトに埋め込む方法を、コーディング不要のステップ・バイ・ステップで説明しましょう。
ステップ1： Smash Balloon Facebook Feed Pro プラグインをインストールする
WordPress に Facebook ビデオを埋め込むための最初のステップは、 Facebook Feed Pro プラグインをインストールし、Web サイトで有効にすることです。
WordPressプラグインのインストール方法については、こちらのステップバイステップガイドをご覧ください。
ステップ2：Facebook動画フィードを作成する
Facebook Feed Proをサイトに設置したら、WordPressダッシュボードからFacebook Feed " All Feeds メニューにアクセスしてください。
次に、新しいページで新規追加ボタンをクリックします。
次に、Facebookフィードの種類を選択できる新しいポップアップが表示されます。
続行するには、オプションから「ビデオ」を 選択し、「次へ」をクリックします。
ステップ3：動画フィードをFacebookに接続する
フェイスブックの動画をサイトに表示したい場合は、新しいフィードをフェイスブックページに接続する必要がある。
始めるには、このポップアップの新規追加 ボタンをクリックします。
次に、 「Facebook に接続」をクリックして続行します。
これを行うと、Web ブラウザでwww.facebook.comが開きます。
ここで、プラグインはアカウントへの読み取り専用アクセスを要求します。
Facebook Feed Proは読み取り専用アクセスを使用して、Facebook上の投稿のみを読み取ります。投稿に変更を加えることはできないため、プラグインは完全に安全です。
ポップアップで、「続行」ボタンをクリックします。
その後、プラグインはあなたをあなたのウェブサイトに戻す。
接続したいページを選択し、 「追加」をクリックします。
新しい動画フィードのFacebookへの接続を完了するには、「次へ」をクリックします。
ステップ4：動画フィードの種類を選択する
美しいFacebookフィードを簡単に作成するには、テーマを選ぶことができます。各テーマには、独自のレイアウト、アイコンデザイン、投稿スタイルなどが用意されています。
好みのテーマを選択して、 「次へ」をクリックします。
次に、新しいフィードのテンプレートを選択します。テンプレートごとに、Facebook動画とヘッダーのレイアウトが異なります。
前と同じように、テンプレートを選択して「次へ」をクリックします。
その後、新しいFacebook動画フィードに2つの埋め込みオプションを選択できます：
- Facebookページからすべての動画を埋め込む
- Facebookページから特定のプレイリストを埋め込む
では、どうすればこれらのことができるのか、チェックしてみよう：
Facebookページのすべての動画を埋め込む
すべてのFacebook動画を表示するには、ポップアップで「すべての動画を表示 」オプションを選択し、「次へ」をクリックします。
これでFacebookの動画フィードには、そのFacebookページで利用可能な動画がすべて表示される。
Facebookページから特定のプレイリストを埋め込む
Facebookの動画フィードに単一のプレイリストを表示するには、代わりに「特定のプレイリストから表示 」オプションを選択します。
ブラウザでFacebookの動画プレイリストを開き、一番上にある動画のURLをコピーする。
次に、「次へ」をクリックする前に、動画のURLを「プレイリストのURLを追加」 フィールドに貼り付けます。
ステップ5：Facebookの動画フィードをカスタマイズする
これで、Facebook ビデオ フィードがライブ プレビュー付きのビジュアル フィード エディターで開きます。
左側には、すべてのカスタマイズオプションがあるパネルがあります。このパネルを使って、フィードの種類、レイアウト、ヘッダースタイル、ライクボックスのスタイル、背景などをカスタマイズすることができます。
そして右側には、Facebookフィードのライブプレビューが表示されている。
フィードレイアウトを クリックして、カスタマイズを開始する。
Facebookの動画フィードのレイアウトは、4つのフィードレイアウトオプションから選ぶことができます：
- リスト
- グリッド
- 石工
- カルーセル
リストレイアウトを使用すると、Facebook 動画が 1 列に表示され、より多くのスペースが得られます。
個人的に、私はこのレイアウトが好きです。なぜなら、各ビデオがはっきりと見えるので、Facebook ライブを WordPress に埋め込むのに最適な方法だからです。
ただし、一度にたくさんの Facebook ビデオを表示したい場合は、グリッドレイアウトを試してみてください。
これにより、Facebook のビデオ コンテンツが行と列のグリッドに表示されます。
その後、Facebookの動画を複数のカラムで表示するメイソンレイアウトができる。
メーソンリーレイアウトを使えば、Facebook動画のオリジナルのプロポーションを維持することもできる。私は、視聴者にさまざまなアングルやスタイルの動画を見せたいときに、このフィードレイアウトを使うのが好きだ。
最後に、カルーセルレイアウトは 、訪問者があなたのサイトと交流するもう一つの方法を提供します。これを使えば、Facebookカルーセルスライダーで動画コンテンツを表示することができます。
サイト訪問者がスライダーの矢印をクリックすることで、私のFacebookフィードに参加することができるので、これは私のお気に入りのレイアウトの一つでもある。
お好みのフィードレイアウトを選択したら、右上の「保存」 ボタンをクリックしてください。
その後、小さなカスタマイズ ボタンをクリックして、以前のカスタマイズオプションに戻ることができます。
この後、Color Scheme オプションをクリックして、Facebookビデオフィードの色を変更することができます。
次に、フェイスブックの動画フィードで選べる4つの配色をご覧ください：
- テーマから継承する：ウェブサイトの色をコピーする
- 明るく：明るい背景と暗めの文字を使う
- Dark：暗い背景色と明るいテキストを適用します。
- カスタム：手動ですべての色を選ぶ
お好みの配色を選択し、「保存」をクリックするだけです。
そうしたら、Facebookの動画フィードのすべての部分をカスタマイズすることができます。ヘッダーのスタイル、ボックスのような投稿要素、フィードの余白、背景などを変更できます。
Facebookの動画フィードをカスタマイズしたら、忘れずに「保存」 ボタンをクリックしよう。
ステップ6：Facebookの動画フィードをウェブサイトに埋め込む
このプラグインを使用すると、ライブフィードエディタからFacebookのビデオフィードを埋め込むことができます。さらに、フィードを埋め込むための2つの異なる場所があります：
- Facebookの動画フィードをページに追加する
- Facebookの動画フィードをサイドバーやフッターに追加する
Facebookの動画フィードをウェブサイトページに追加
最初の方法は、WordPressページにFacebookの動画フィードを埋め込むことです。そのためには、上部の埋め込み ボタンをクリックしてください。
次に、WordPressウェブサイトのどこにFacebookフィードを掲載するかを尋ねるポップアップが表示されます。ページに追加」オプションを選択して次に進みます。
次に、WordPressサイト上のすべてのページのリストからページを選ぶことができます。ページを選択したら、追加ボタンをクリックして次に進みます。
WordPressエディタでそのページを開きます。エディター内でプラス（+）アイコンをクリックし、新しいWordPressブロックを追加します。
検索ボックスに「Facebook」と入力し、カスタムFacebookフィードブロックをクリックしてページに追加します。
最後に、「公開」ボタンをクリックします。これで、ページをプレビューすると、Facebook動画フィードがウェブサイト上でどのようにライブ表示されるかがわかります。
Facebookの動画フィードをウェブサイトのサイドバーに追加する
もう1つの方法は、サイドバーやフッターにFacebookのウィジェットとしてFacebookの動画フィードを埋め込むことです。
始めるには、ライブ・フィード・エディターを開く必要があります。そのためには、WordPressダッシュボードからFacebookフィード " すべてのフィードメニューに移動します。
そのページには、すべてのFacebookフィードを含むリストがあります。続行するには、先ほどのFacebookのビデオフィードをクリックします。
これで、ライブフィードエディターでFacebookの動画フィードが開きます。
その後、上部のEmbed ボタンをクリックして次に進みます。
Facebookのフィードの場所を尋ねるポップアップが表示されます。ここで「ウィジェットに追加 」オプションを選択すればよい。
プラグインにより、Web サイトのウィジェットページに移動します。
ここで、サイドバーパネルをクリックして、Facebook ビデオ フィード ウィジェットの埋め込みを開始します。
ご希望であれば、ここでフッターパネルを選択することもできます。
このガイドでは、サイドバー領域を選択します。
新しいウィジェットを追加するには、パネルのプラスアイコン（+）を クリックします。
その後、オプションからカスタムFacebookフィードウィジェットを 選択します。
Facebook Feed Proには既製のウィジェットが付属しているので、それをクリックするだけで自分のウェブサイトにFacebookのビデオ・ウィジェットを追加できる点が気に入っている。
最後に、Update ボタンをクリックして変更を保存します。
ウェブサイトをプレビューすると、このようにFacebookのフィード動画がウェブサイトのサイドバーに埋め込まれます：
WordPressにFacebook動画を埋め込むには自動か手動か？
WordPressにFacebookの動画を追加するには、2つの方法があります：
- 埋め込みコードを使った手動方式、または、
- WordPressプラグインによる自動化
Facebookの動画を手動で埋め込むには、Facebookの動画リンクにアクセスする必要があります。それから、Facebook動画の埋め込みコードを探してみてください。
その後、手動でFacebookの動画埋め込みコードを貼り付けるか、ウェブサイト上の動画を表示したい場所に埋め込みブロックを使用する必要があります。
この方法は簡単そうに見えるが、いくつかのステップが必要だ。それに、いろいろなウェブサイトを切り替えて使う必要があるので、時間もかかるし大変だ。
また、この方法では、埋め込む動画や含まれる情報の種類をカスタマイズする余地があまりありません。
あなたがiFrameコード、CSS、JavaScript、あるいはあらゆるコーディング言語の専門家でない限り。
一方、以下のようなWordPressのFacebookプラグインを使えば、Facebook動画を自動的に埋め込むことができる。 Facebook Feed Pro を使えば、インストールしていくつかの設定をクリックするだけで、簡単にFacebook動画を埋め込むことができる。
異なるサイトを行き来する必要もなく、ショートコードをコピー＆ペーストする必要もない。
WordPressのプラグインは、動画に含まれる情報やそのデザインを完全にコントロールすることもできます。
これは、もしあなたがコードの書き方を知らないのであれば、非常に大きな利点となる。なぜなら、あなたのビデオを素晴らしいものにカスタマイズするのは、あなたが望むオプションをクリックするだけでいいからだ。
Facebook動画をウェブサイトに手動で埋め込む方法
はい、WordPressのウェブサイトにFacebookの動画を手動で埋め込むことは可能です。
しかし、個人的には、手動で埋め込む方法はあまり好きではない。なぜなら、プラグインでできるような方法で動画のレイアウトや設定をカスタマイズすることができないからだ。
しかも、コード・スニペットをコピー＆ペーストすることになるので、技術的な経験があまりないと怖く感じるかもしれない。
また、ビデオに含まれるテキスト、色、情報をカスタマイズしたい場合は、見栄えを整えるために開発者を雇う必要がある。
さらに、手作業でコード・スニペットを埋め込んだために誤ってウェブサイトを壊してしまった場合、それを解決してくれるカスタマー・サポート・チームを利用することができない。
手動でFacebookの動画を埋め込むのが面倒なら、上記のFacebook Feed Proを使う方がずっと簡単だ。
それ以外の場合は、次の手順に従って、Facebook ビデオを WordPress に手動で埋め込むことができます。
まず、Facebookに埋め込みたい動画を探します。次に、Facebookの動画のURLをクリップボードにコピーします。
次に、このリンクをクリックして、 Facebook プラグインのドキュメントを開きます。
そこに到達したら、 URL フィールドに動画の URLを貼り付けます。その下に動画のプレビューが表示されます。
コードを取得]ボタンをクリックすると、ウェブサイトに動画を埋め込むために必要な埋め込みコードが生成されます。
ウェブサイトに追加するさまざまな種類のコードを含むポップアップが開きます。
最も簡単なオプションとしては、上部のIFrameタブを選択し、以下のコードをコピーします。
これで、この iFrame コードを WordPress ページまたは Web サイトの投稿に挿入できるようになりました。
ページまたは投稿を開き、上部のプラス (+) アイコンをクリックしてブロックを追加します。
次に、オプションからカスタム HTMLブロックを選択できます。
完了したら、先ほどの iFrame をカスタム HTML ブロックに貼り付けます。
ページをプレビューすると、選択したビデオが手動でウェブサイトに追加された Facebook ビデオ プレーヤーが表示されます。
次に「公開」をクリックし、ページまたは投稿を開いて埋め込まれた動画を確認します。これで完了です！
Facebookの動画をサイトに表示する準備はできましたか？Smash Balloon Facebook Feed Proが接続、レイアウト、自動更新をすべて処理するので、一度設定すれば後は何もする必要がありません。 Facebookの動画フィードの埋め込みを開始する →
なぜWordPressサイトにFacebook動画を埋め込むのか？
Facebookの動画をウェブサイトで紹介することは、読者とのエンゲージメントを高めるのに理想的です。Facebookの動画は、文章で書かれたコンテンツよりもインタラクティブです。
さらに、Facebook動画を埋め込むと、単にそのスクリーンショットを投稿するよりも魅力的でしょう？非常に視覚的なので、ユーザーはあなたのウェブサイトを離れた後もずっと覚えているはずです。
また、Facebookの動画を見せることは、サイト訪問者にあなたから購入するよう説得するための強力な社会的証明にもなります。
実際、最新のソーシャル メディア マーケティング統計によると、ソーシャル メディア ユーザーの 90% が少なくとも月に 1 回はオンラインで動画を視聴していると回答しています。
TikTokの動画と同様に、Facebookの動画を表示することも、いくつかの点であなたのサイトに利益をもたらします：
- ウェブサイトのユーザーがあなたのFacebookビジネスページを見つけやすくします
- FacebookのライブストリームをWordPressに埋め込むことで、視聴者を増やし、SEOを向上させることができます。
- Facebookコンテンツへのユーザーエンゲージメントを高め、ニュースフィードでの可視性を高めるのに役立ちます。
- いいね！」とエンゲージメントを増やし、Facebook上のソーシャルコミュニティの拡大に貢献します。
プロヒント：あなたのウェブサイトにFacebookのライブビデオを埋め込むことができるかどうかを知りたいですか？また、WordPress上でFacebookのライブストリームを埋め込む方法については、この記事をチェックアウトすることをお勧めします。
よくある質問
Facebookの動画をWordPressに埋め込んだのに、なぜ表示されないのでしょうか？
最もよくある原因は、Facebookの動画の公開設定が「公開」になっていないことです。動画のプライバシー設定が「友達のみ」または「非公開」になっている場合、どの方法を試しても、サイト上に埋め込み動画は表示されません。
Facebookにアクセスし、その動画を見つけて、3つのドットをタップし、公開範囲を「公開」に変更してください。そうすれば、埋め込みが正しく表示されます。
WordPressにFacebookの動画を埋め込むには、プラグインが必要ですか？
いいえ、動画1本を埋め込むのにプラグインは必要ありません。Facebookの動画URLをWordPressの段落ブロックに直接貼り付ければ自動的に表示されますし、カスタムHTMLブロックでFacebookの埋め込みコードを使用することもできます。どちらも、単発の動画を埋め込む場合には問題なく機能します。
Facebookに投稿するたびに自動的に更新される完全な動画フィードを表示したい場合、プラグインが必要になります。これは、標準の機能では実現できないからです。
WordPressで埋め込んだFacebook動画を自動再生させることはできますか？
必ずしもそうとは限りません。Chrome、Safari、およびほとんどの最新ブラウザでは、動画の音量がミュートされていない限り、自動再生がブロックされます。Facebookの埋め込みプレイヤーはこれらのブラウザのルールを順守しているため、自動再生に設定された動画は、ほとんどの訪問者に対して音が出ない状態でブロックされます。最も安全な方法は、訪問者自身に動画を再生してもらうことです。また、自動再生は、ヘッドホンを装着して閲覧しているユーザーにとって煩わしいと感じられる傾向があります。
Facebookの動画を埋め込むと、WordPressサイトの表示速度は遅くなりますか？
埋め込み動画を1つ追加するだけで、Facebookのプレーヤースクリプトが読み込まれるため、読み込み時間がわずかに長くなります。手動で埋め込みコードを使用して1つのページに10本や15本の動画を個別に埋め込むと、パフォーマンスの著しい低下を実感することになるでしょう。
Smash Balloon Facebook Feed Proは、この処理をより効率的に行うように設計されており、ページの他の部分の表示を妨げない形でフィードを読み込みます。
自分のページ全体ではなく、特定のプレイリストにあるFacebook動画だけを埋め込むことはできますか？
はい。Smash Balloon Facebook Feed Pro を使用してフィードを設定する際、ステップ 4 では、Facebook ページのすべての動画を表示するか、特定のプレイリストの動画を表示するかを選択できます。プレイリストを選択する場合は、Facebook からプレイリストの URL をコピーし、プラグインに貼り付けます。これは、複数のシリーズを運営している場合や、ウェブサイトのフィードを特定のトピックに絞りたい場合に便利です。
ボーナス：WordPressにソーシャルメディア・フィードを追加するための人気チュートリアル
Facebook動画をWordPressサイトに統合したい場合は、Smash Balloon Facebook Feed Proプラグインが最適です。
ただし、ビジネスオーナーやブロガーがYouTube チャンネル、Twitter フィード、TikTok フィード、Instagram プロフィールなど、さまざまなソーシャル メディア プラットフォームで存在感を維持するのは一般的です。
例えば、YouTubeでも動画を公開しているのであれば、YouTubeのプレイリストをWordPressに埋め込むことができる。
また、TikTokのコンテンツをWordPressのウェブサイトに表示したい場合は、TikTok Feeds Proのようなプラグインが役立ちます。TikTok動画をWordPressに追加するためのステップバイステップガイドはこちらです。
この記事が、WordPress に Facebook ビデオを埋め込む方法を学ぶのに役立つことを願っています。
Smash Balloon の Facebook Feed Pro プラグインを使用すると、技術的な知識がなくても、Facebook の動画、写真、アルバム、イベント、レビュー、その他のあらゆる種類の Facebook コンテンツを WordPress に簡単に表示できます。
さっそくFacebook Feed Proプラグインを使ってみよう。
ページのエンゲージメントを高めるのに最適なFacebook投稿のタイプをご紹介します。
