WordPressにFacebook動画を埋め込む方法

Facebookに投稿した動画は、WordPressウェブサイトの優れたコンテンツにもなります。Facebook動画フィードを埋め込むことで、サイトを新鮮で興味深いものに保ちながら、Facebookのフォロワーを増やすことができます。

インタビュー、製品デモンストレーション、またはユーザー生成コンテンツを共有する場合でも、Facebook動画を表示することでサイトの視覚的な魅力を高めることができます。

WPBeginnerでは、オーディエンスエンゲージメントの促進とフォロワー数の増加におけるソーシャルメディアの役割を認識しています。この記事では、WordPressにFacebook動画を簡単に埋め込む方法を紹介します。

WordPressにFacebook動画を追加する理由

動画は、視聴者とつながり、エンゲージメントを維持するための優れた方法です。これは、個人ブログを運営しているか、ビジネスウェブサイトを運営しているかに関わらず当てはまります。

しかし、特にブログでWordPressでブログを書いてオンラインでお金を稼ぎたい場合、動画は特に強力です。実際、最新のブログ統計によると、88%の人が動画を見た後に製品やサービスを購入したことがあります。

エンゲージメントとエンターテイメント性の高い動画コンテンツの作成には、時間と労力がかかります。Facebookに動画を投稿している場合、それらをWordPressウェブサイトで再利用するのは理にかなっています。

埋め込み動画は、Facebookページの成長にも役立ちます。訪問者が動画を楽しんでくれた場合、Facebookでフォローしてくれるようになるかもしれません。

それでは、WordPressにFacebook動画を簡単に埋め込む方法をステップバイステップで見ていきましょう。

ステップ1：WordPressにFacebook動画プラグインをインストールする

WordPress に Facebook 動画を埋め込む最も簡単な方法は、Facebook Feed Pro プラグインを使用することです。

これは 最高のソーシャルメディアフィードプラグイン であり、Facebook の投稿、アルバム、コメント、レビュー、コミュニティ投稿、動画などを WordPress サイトに簡単に埋め込むことができます。

Smash Balloonを使用してウェブサイトをFacebookアカウントにリンクすることで、Facebookに投稿する新しいビデオはすべてウェブサイトに自動的に表示されます。このようにして、日々の労力をほとんどかけずに、ウェブサイトを最新の状態に保つことができます。

このガイドでは、Smash Balloonのプロバージョンを使用します。これにより、HD、360^o、Facebook Liveビデオを含むWordPressへのビデオの埋め込みが可能になります。

Smash Balloon Pro は、カスタムFacebookフィードで写真を公開したり、各投稿の下にいいね、シェア、コメント、リアクションの総数を表示したりすることもできます。

ただし、始めたばかりで予算が限られている場合は、無料バージョンもあります。

まず、Facebook Feed Pro プラグインをインストールして有効化します。詳細については、WordPress プラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Facebookフィード » 設定ページに移動し、「ライセンスキー」フィールドにライセンスキーを入力してください。

この情報は、Smash Balloonのウェブサイトにあるアカウントの下にあります。

キーを入力したら、「有効化」ボタンをクリックしてください。

ステップ2：FacebookページまたはグループをWordPressに接続する

Smash Balloon を使用すると、Facebook ページまたはFacebook グループフィードから動画を埋め込むことができます。動画をライトボックスポップアップで表示することもできるため、ユーザーは WordPress ウェブサイトで直接動画全体を視聴できます。

最初の手順は、Facebook ページまたはグループを WordPress に接続することです。そのため、**Facebook フィード » すべてのフィード** に移動し、「新規追加」をクリックしてください。

Smash Balloon を使用すると、WordPress に Facebook イベントカレンダーを追加 したり、Facebook のステータスを表示したり、タイムラインを埋め込んだりできます。

WordPressにFacebook動画を埋め込みたいので、「動画」を選択してから「次へ」をクリックする必要があります。

次に、動画を取得するFacebookページまたはグループを選択する必要があります。

これを行うには、「新規追加」をクリックします。

次に、Facebookページまたはグループから動画を表示するかどうかを選択します。

これが完了したら、「Facebookに接続」をクリックします。

これにより、Facebookアカウントにログインして、Smash Balloonで使用したいページまたはグループを選択できるポップアップが表示されます。

その後、「次へ」をクリックします。

これで、FacebookはSmash Balloonがアクセスできるすべての情報と実行できるアクションを表示します。

Smash BalloonのFacebookアカウントへのアクセスを制限するには、スイッチを無効にするだけです。

これは、WordPressブログまたはウェブサイトに埋め込むことができる動画に影響を与える可能性があることに注意してください。そのため、すべてのスイッチを有効にしたままにすることをお勧めします。

パーミッションの設定が完了したら、「完了」をクリックします。

数秒後、ウェブサイトがFacebookに接続されたことを確認するメッセージが表示されるはずです。それが完了したら、「OK」をクリックする準備ができました。

Smash Balloonは自動的にWordPressダッシュボードに戻ります。

ステップ3：WordPressにFacebook動画を埋め込む

この時点で、ウェブサイトにリンクしたFacebookグループまたはページが表示されるポップアップが表示されます。

使用したいページまたはグループの横にあるラジオボタンを選択し、「追加」ボタンをクリックするだけです。

ポップアップを誤って閉じてしまっても、心配しないでください。ページを更新するだけでポップアップを再度開くことができます。

これが完了すると、WordPressは自動的にFacebookフィード » すべてのフィードページに戻ります。以前と同様に、「新規追加」をクリックし、「動画」を選択してから「次へ」をクリックします。

次に、Facebookページまたはグループを選択し、「次へ」をクリックします。

この画面で、動画フィードに使用したいテンプレートを選択できます。

これらのテンプレートはすべて完全にカスタマイズ可能なので、ウェブサイトでFacebook動画をどのように表示したいかに応じて、デザインを微調整できます。

「デフォルト」テンプレートを使用していますが、任意のテンプレートを選択できます。選択後、「次へ」をクリックしてください。

それを行うと、Facebookページまたはグループのすべての動画を表示するか、特定のプレイリストの動画のみを表示するかを選択できます。

「特定のプレイリストから表示」を選択した場合は、そのプレイリストのURLを入力する必要があります。

決定したら、「次へ」ボタンをクリックしてください。

Smash Balloonは、ソースと選択したテンプレートに基づいてフィードを作成します。これは良い出発点ですが、サイトでの動画の表示方法を微調整したい場合があります。

ステップ4：埋め込んだFacebook動画をカスタマイズする

Smash Balloon Facebookフィードプラグインは、ウェブサイトに動画を表示する方法をカスタマイズするための多くの方法を提供します。とはいえ、これらの設定を確認する価値はあります。

WordPressダッシュボードで、Facebookフィード » すべてのフィードに移動します。ここで、作成したばかりの動画フィードを見つけ、その横にある鉛筆のような「編集」ボタンをクリックします。

これによりフィードエディターが開かれ、WordPressでのソーシャルメディアフィードのプレビューが表示されます。

左側には、これらの動画がWordPressサイトにどのように表示されるかを構成するのに役立つさまざまなカスタマイズオプションが表示されます。これらの設定のほとんどは自己説明的ですが、主要な領域を簡単に説明します。

テンプレートを変更したい場合は、「テンプレート」をクリックしてください。

次に、「変更」ボタンを選択します。

これにより、ビデオフィードに使用できるさまざまなテンプレートが表示されるポップアップが開きます。

代わりに使いたいデザインを選択し、「更新」をクリックするだけです。

次の設定は「Feed Type」で、フィードに異なるコンテンツを表示できます。

例えば、WordPressにFacebookアルバムを埋め込む、タイムラインを表示する、またはイベントカレンダーを追加するといったことを決定するかもしれません。

Facebook動画を埋め込んでいるため、通常はこの領域を無視したいでしょう。

次に、「フィードレイアウト」をクリックします。

この画面では、さまざまなレイアウトを切り替えたり、フィードの高さを変更したりできます。さらに、'カルーセル'レイアウトを選択して レスポンシブスライダーを作成することもできます。

変更を加えるとプレビューが自動的に更新されるため、さまざまな設定を試して最適なものを見つけることができます。

デフォルトでは、Smash Balloonはデスクトップコンピューターとスマートフォンなどのモバイルデバイスで同じ数の動画を表示します。

右上隅のボタンの行を使用すると、デスクトップコンピューター、タブレット、スマートフォンで動画がどのように表示されるかをプレビューできます。

モバイルデバイスは通常、画面が小さく、多くの大きな高解像度動画の処理に苦労する場合があります。訪問者は無料Wi-Fiではなく、モバイルデータを使用している可能性もあります。

それを踏まえて、スマートフォンやタブレットでは動画の数を少なく表示したい場合があります。これを行うには、「投稿数」の下にある「モバイル」フィールドに別の番号を入力するだけです。

デフォルトでは、Facebookフィードはデスクトップコンピューターと比較して、スマートフォンやタブレットでは列数が少なくなります。これにより、すべての動画が小さな画面に快適に収まります。

ただし、WordPress ウェブサイトのモバイル版をテストした後、タブレットやスマートフォンでのカラムの表示方法に満足できない場合があります。

「列」設定を使用して、Smash Balloonがタブレット、モバイル、デスクトップコンピューターで使用する列数を変更できます。

次の設定ページは「カラー配色」です。

Smash BalloonはデフォルトでWordPressテーマから継承された色を使用しますが、この画面では代わりに「ライト」または「ダーク」の配色に切り替えることができます。

他のオプションとして、「カスタム」を選択して、コントロールを使用して背景色を変更し、WordPress のテキストの色を変更 するなどして、独自のカラー スキームを作成できます。

Smash Balloon は、Facebook のプロフィール写真とページまたはグループの名前であるヘッダーをフィードに追加できます。これにより、訪問者は埋め込まれた動画がどこから来たのか、Facebook でこのコンテンツをどこで見つけられるのかを知ることができます。

このセクションを追加するには、左側のメニューで「ヘッダー」をクリックします。

次に、「有効にする」トグルをクリックできます。

ヘッダーを追加した後、この領域の外観を変更できます。Facebookプロフィール写真の表示/非表示、自己紹介テキストのサイズの変更などが含まれます。

ヘッダーを完全に削除したい場合は、「有効にする」トグルをクリックしてオフにします。

デフォルトでは、Smash Balloonは各動画のタイトルを表示します。タイトルを非表示にしたい場合は、メインのSmash Balloonエディタメニューから「投稿」を選択します。

次に、「投稿スタイル」をクリックしてください。

この画面では、「動画タイトルを表示」スライダーをクリックして動画タイトルを非表示にできます。

これは、すべての動画にタイトルを追加していない場合や、Facebook の外ではタイトルが意味をなさない場合に役立ちます。

この画面では、動画の説明を表示または非表示にすることもできます。例えば、これらの説明を使用して動画に関する追加情報を提供することができます。

説明を追加するには、「動画の説明を表示」スイッチをクリックして有効にします。

デフォルトでは、Smash BalloonはFacebookの「いいね！」ボタンを動画フィードに追加しません。訪問者が埋め込まれた動画を気に入った場合、Facebookでフォローしたくなるかもしれません。

そうは言っても、エディタの左側メニューから「いいねボックス」を選択して、フィードに「いいね」ボタンを追加したい場合があります。

その後、「有効化」ボタンをクリックするだけで、青色になります。

Smash Balloonは、このボタンを動画フィードの下に追加しますが、「Position」ドロップダウンを開いて「Top」を選択することで変更できます。

この画面では、「いいね！」セクションの外観を変更することもできます。幅の変更、Facebookでのフォロワー数の表示、カスタムのコールトゥアクションの追加などが可能です。

ボタンの外観に満足したら、「さらに読み込むボタン」を選択して次の設定ページに進むことができます。

「もっと読み込む」ボタンは、訪問者が動画フィードをさらにスクロールするように促すため、Smash Balloon はデフォルトで埋め込みFacebookフィードに追加します。

これは非常に重要なボタンなので、背景色、ホバー状態、ラベルなどを変更してカスタマイズすることをお勧めします。

もう 1 つのオプションは、「有効化」トグルをクリックしてボタンを完全に削除することです。たとえば、このボタンを削除してから、訪問者に Facebook ページを確認して、より多くの動画を見るように促すことができます。

デフォルトでは、Smash Balloonを使用すると、訪問者はWordPressウェブサイトから離れることなくFacebook動画を視聴できます。

次の画像でご覧いただけるように、訪問者は動画のサムネイルをクリックするだけでライトボックスで開くことができます。

訪問者は矢印を使用してフィード内の動画をスクロールできます。

写真に「いいね！」を付けたり、コメントを残したり、動画を自分のページで共有したりしたい場合は、「Facebookで表示」リンクをクリックできます。

Smash Balloon のデフォルトのライトボックスをカスタマイズするには、いくつかの異なる方法があります。

オプションを表示するには、左側のメニューで「ライトボックス」をクリックします。

ここで、リンクの色を変更したり、テキストをカスタマイズしたり、背景色を追加したりできます。

ライトボックス機能により、訪問者はポップアップで動画を視聴できます。希望に応じてライトボックスを無効にすることもでき、その場合、すべての動画はページコンテンツ内に埋め込まれた小さなサムネイルとして再生されます。

このようにして、Facebookページへのアクセスを促し、フルサイズの動画を見てもらうことができます。ライトボックスを無効にするには、単に「有効にする」トグルをクリックして、青からグレーに切り替えます。

動画フィードの外観に満足したら、画面右上にある「保存」ボタンをクリックするのを忘れないでください。

これで、Smash Balloon フィードをウェブサイトに埋め込む準備が整いました。

ステップ 5: WordPress に Facebook 動画を追加する

Smash Balloonを使用すると、ブロック、ウィジェット、またはショートコードを使用して、WordPressウェブサイトにビデオフィードを追加できます。

Smash Balloonを使用して複数のフィードを作成した場合、ウィジェットまたはブロックを使用する予定であれば、そのフィードのコードを知る必要があります。

このコードを取得するには、Facebookフィード » すべてのフィード に移動し、「ショートコード」の下の値を確認します。このコードをブロックまたはウィジェットに追加する必要があるため、メモしておいてください。

次の画像では、 custom-facebook-feed feed=1を使用する必要があります。

Facebookフィードをページまたは投稿に埋め込みたい場合は、カスタムFacebookフィードブロックの使用をお勧めします。

Facebookビデオを埋め込みたいWordPressの投稿またはページを開きます。「+」アイコンをクリックして新しいブロックを追加し、「カスタムFacebookフィード」と入力し始めます。

右側のブロックが表示されたら、クリックしてページまたは投稿に追加します。

このブロックはデフォルトで、あなたの Smash Balloon フィードのいずれかを表示します。代わりに別の動画フィードを使用したい場合は、右側のメニューで「ショートコード設定」を探してください。

このボックスに `custom-facebook-feed feed=1` の埋め込みコードを追加できるようになりました。その後、「変更を適用」をクリックします。

このブロックには、Facebookページまたはグループの動画が表示されます。ウェブサイトで動画フィードを公開するには、ページを発行または更新するだけです。

他のオプションとして、サイドバーなどのウィジェット対応エリアにフィードを追加することもできます。これにより、訪問者はサイトのどのページからでもFacebook動画を視聴できます。

外観 » ウィジェットに移動し、青い「+」ボタンをクリックするだけです。

その後、「カスタム Facebook フィード」ウィジェットを探します。

次に、動画フィードを表示したい場所にドラッグするだけです。

ウィジェットには、Smash Balloon のフィードのいずれかが自動的に表示されます。

別のフィードを表示するには、フィードのコードを「ショートコード設定」ボックスに入力または貼り付けてから、「変更を適用」をクリックします。

「更新」ボタンをクリックすると、ウィジェットを公開できるようになりました。詳細については、WordPressでウィジェットを追加して使用する方法に関するステップバイステップガイドをご覧ください。WordPressでウィジェットを追加して使用する方法。

最後に、ショートコードを使用して、任意のページ、投稿、またはウィジェット対応領域に動画を埋め込むことができます。

Facebook Feed » All Feeds に移動し、「Shortcode」列のコードをコピーします。このコードを任意のショートコードブロックに追加できます。

ショートコードの配置方法については、ショートコードの追加方法に関するガイドを参照してください。

ステップ 6: WordPressに特定のFacebook動画を追加する

場合によっては、特定のFacebook動画をページや投稿に埋め込みたい場合があります。たとえば、最新のブログと同じトピックについて話しているFacebook動画や、立ち上げたばかりのオンラインストアの製品を紹介するプロモーション動画などがあるかもしれません。

特定の動画を埋め込むには、Featured Posts拡張機能を購入してインストールする必要があります。これにより、IDを使用して特定の投稿やイベントを表示できます。

まず、Facebook Feed » Extensions に移動します。

ここで、「注目の投稿」拡張機能を見つけて、「追加」ボタンをクリックします。

これは、拡張機能の購入方法に関する指示とともに、Smash Balloon のウェブサイトを新しいタブで開きます。

拡張機能をインストールしたら、プラグインをインストールするのと同じ方法でインストールできます。ヘルプが必要な場合は、WordPress プラグインのインストール方法に関するガイドをご覧ください。

プラグインを有効化した後、Facebook Feed » All Feeds に移動し、「新規追加」をクリックします。

「高度なフィードタイプ」の下で「シングルフィーチャー投稿」を選択し、「次へ」をクリックします。

上記と同じ手順で、ソースとして使用したいページまたはグループを選択できるようになりました。

次のページで、埋め込みたい動画のIDを入力する必要があります。

このIDを取得するには、新しいタブでFacebookにアクセスし、埋め込みたい動画を開くだけです。

これでURLをコピーできます。

その後、WordPressダッシュボードの「投稿URLまたはID」ボックスにURLを貼り付け、「次へ」をクリックするだけです。

それが完了したら、動画をスタイル設定し、上記と同じプロセスに従ってサイトに追加できます。

ボーナス: WordPressにソーシャルメディアフィードを追加する方法

WordPress に Facebook 動画を埋め込みたい場合、Smash Balloon Facebook Feed プラグインは素晴らしい選択肢です。

ただし、多くのウェブサイトは、YouTubeチャンネル、Twitterプロフィール、Instagramアカウントなど、複数のソーシャルメディアアカウントを持っています。各プラットフォームでユニークなコンテンツを作成している場合は、それをWordPressウェブサイトに表示するのが理にかなっています。

YouTubeでも動画を投稿している場合は、YouTubeチャンネルの最新動画を表示したいかもしれません。

オンラインストアやビジネスを運営している場合、訪問者に見せたいFacebookのレビューがいくつかあるかもしれません。

これらのレビューは、Reviews Feed Proを使用してウェブサイトに追加できます。

レビューフィードをサイトに埋め込んだ後、新しいレビューはサイトに自動的に表示されます。これにより、訪問者は手動でサイトに追加することなく、常に最新のレビューを見ることができます。

手順については、WordPressでGoogle、Facebook、Yelpのレビューを表示する方法に関する初心者向けガイドをご覧ください。

この記事でWordPressにFacebook動画を埋め込む方法がわかったことを願っています。WordPressにYouTubeライブストリームを埋め込む方法や、WordPress向けの最高のYouTube動画ギャラリープラグインに関するチュートリアルも参照してください。

動画チュートリアル

WPBeginnerを購読する

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。