ウェブサイトにFacebookリールを埋め込む5ステップガイド(簡単方法)
ホーム ブログ ウェブサイトにFacebookリールを埋め込む5ステップガイド(簡単方法)

ウェブサイトにFacebookリールを埋め込む5ステップガイド(簡単方法)

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

Facebook Reelsは、素早く、軽快で、瞬時に引き込まれるように設計されている点がユニークです。 

従来の長い動画のように時間と集中力を必要とせず、リールはわずか数秒で訪問者の注意を引く。

これにより、読者の体験を損なうことなくエンゲージメントを高める最適なツールとなります。ユーザーが興味を失ったりスクロールして離脱したりする前に、素早く価値を提供できるのです。

しかし、これらの縦型クリップをWordPressサイトで正しく表示させるのは、往々にして厄介な作業です。多くのサイト運営者が埋め込みエラーやコーディングに苦労しているのを目にしてきました。

このガイドでは、5つの簡単な手順でFacebook Reelsをウェブサイトに埋め込む方法をご紹介します。 

技術的なスキルがなくても、最高のコンテンツを美しく表示できるようになります。

なぜWordPressサイトにFacebook Reelsを埋め込むべきなのか?

リールは素早く注目を集めるように設計されており、訪問者がスクロールして離れる前に興味を引く必要があるウェブサイトに最適です。

WordPressサイトにFacebook Reelsを埋め込む主な利点は以下の通りです:

  • エンゲージメント向上:リールは長い動画や長文記事に時間を割く必要なく、瞬時に注目を集めます。
  • ブランドパーソナリティを表現:舞台裏の映像や手軽なヒントは、静止画よりも訪問者に親しみを感じさせ、ブランドとの個人的なつながりを築きます。
  • 訪問者の滞在時間を延長:ユーザーがFacebookに遷移せずにサイトでReelsを視聴すると、コンテンツへの関与が持続します。
  • 自動更新コンテンツ: Facebookに新しいリールを投稿するとフィードが 自動的に更新され、手動作業なしでサイトを最新の状態に保ちます。
  • モバイル体験の向上:縦型リールは、トラフィックの大半を占めるスマートフォン上でネイティブかつプロフェッショナルな表示を実現します。

Facebookリールをサイトに埋め込む最も簡単な方法

WordPressサイトにFacebook Reelsを埋め込む方法には、主に2つの選択肢があります:手動で埋め込みコードを使用する方法と、WordPressプラグインをインストールする方法です。

手動埋め込みでは、個々のリールごとにコードをコピー&ペーストする必要があります。10個のリールを表示したい場合、管理すべきコードは10個分になります。 

ウェブサイト上のFacebookフィードの例

さらに、Facebookのデフォルトのスタイルに縛られ、サイトのデザインに合わせる方法がありません。

このプラグイン方式は、これらすべての問題を即座に解決します。すべてのReelsを自動取得し、あらゆる視覚要素をカスタマイズ可能にし、新しいコンテンツを投稿するたびにフィードを更新します。

私がFacebook Feed Proをお勧めする理由

Facebook Reelsを埋め込むには、現在利用可能な選択肢の中でFacebook Feed Proをお勧めします。

フェイスブック・フィード・プロ ホームページ

Facebook Feed ProがReelsの表示に最適な理由は以下の通りです:

  • リール専用フィルター:他のソリューションとは異なり、フィードをフィルターしてリールのみを表示し、通常の動画を完全に除外できます。
  • 複数のレイアウトオプション: サイトデザインに完璧にマッチするグリッド、リスト、マソンリー、またはカルーセルレイアウトからお選びいただけます
  • 完全なカスタマイズ制御:コードに触れることなく、色、間隔、フォント、ボタンスタイルなどを調整できます。
Facebook Reelsフィード用ライブエディター
  • 自動更新: Facebookに新しいリールを投稿すると、フィード自動的に更新され、コンテンツが常に最新の状態に保たれます。
  • モバイル対応:リールは すべてのデバイスで美しく表示され、特にモバイル視聴向けに最適化されています。
  • パフォーマンス最適化:プラグインはキャッシュと遅延読み込みを採用し、Reelsがサイトの速度を低下させないよう保証します。
  • 読み取り専用アクセス:このプラグインはFacebookコンテンツを閲覧するのみで、変更を加えたり、ユーザーに代わって投稿したりすることはできません。

このプラグインは、裏側で全ての技術的な複雑さを処理します。Facebook APIの変更、認証トークン、コーディングについて心配する必要は一切ありません。 

すべてはシンプルなビジュアルインターフェースを通じて動作します。WordPressが初めての方でも、誰でも簡単に使用できます。

Facebook Feed Proを今すぐ入手し、魅力的なFacebook Reelsを簡単に追加できます

ウェブサイトにFacebook Reelsを埋め込む方法

準備が整いましたので、WordPressサイトにFacebook Reelsを埋め込む完全な手順を順を追って説明します。 

各ステップをご案内しますので、ほんの数分であなたのリールを美しく表示できるようになります。

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

まず、ウェブサイトに「Custom Facebook Feed Pro」プラグインをインストールする必要があります。プラグインをインストールして有効化してください。

この部分で助けが必要な場合は、WordPressプラグインのインストールに関するこの初心者向けガイドを参照してください。

ステップ2: Facebookリールズのフィードを作成する

それでは、最初のリールフィードを作成しましょう。WordPressダッシュボードから「Facebookフィード」→「すべてのフィード」へ移動してください。

次に、[新規追加] ボタンをクリックして、新しいフィードの作成を開始します。

ガイド付きフローを使用して新しいFacebookフィードを追加する

画面にいくつかのコンテンツタイプの選択肢が表示されます。

利用可能なオプションから動画を選択してください。これは通常の動画とリールズの両方を含むコンテンツタイプです。

その後、「次へ」をクリックして接続ステップに進みます。

facebookの動画をワードプレスに埋め込むには、facebookの動画オプションを選択します。

ステップ3: Facebook Reelsを接続する

この手順では、WordPress サイトを Facebook ページに接続し、プラグインが Reels にアクセスできるようにします。 

表示される新しいページで、「新規追加」ボタンをクリックしてください。

facebookフィード・プロに新しいソースを追加

「Facebookに接続」ボタンが表示されます。クリックして認証プロセスを開始してください。 

これによりFacebookの許可画面が開き、プラグインへの読み取り専用アクセスを許可できます。

elementorサイトをfacebookに接続する

このプラグインは情報閲覧のみ可能で変更を加えることができないため、この接続は完全に安全です。 

Facebookは、許可を承認する前に、あなたがどの権限を許可しようとしているかを正確に表示します。

「続行」をクリックするだけで、Facebookに戻ります。

フェイスブックへのアクセス

リストから接続したいFacebookページを選択してください。複数のページを管理している場合、WordPressサイトにリンクするページを選択できます。

接続を完了するには、[追加]をクリックしてください。

フェイスブック・フィードのソースを確認する

新しいページをソースとして選択したら、[次へ]をクリックして進みます。 

facebookのソースを選んでから続ける

フィードのテーマオプションが表示されます。

ウェブサイトのデザインスタイルに合ったテーマを選択してください。プラグインでは、後続のステップでさらにカスタマイズ可能な複数の事前デザイン済みテーマを提供しています。

テーマを選択したら「次へ」をクリックしてください。

ワードプレスにfacebookの動画を埋め込む際にfacebookのテーマを選択する

次に、フィードのレイアウト用テンプレートを選択します。

以前と同様に、テンプレートをクリックし、「次へ」ボタンを 使用して続行してください。

フィードテンプレートfacebookウィジェットを選択

2つのオプションが表示されます:「すべての動画を表示」または「特定のプレイリストから表示」。 

ページ上のすべての動画を表示したい場合は、最初のオプションを選択し、「次へ」をクリックしてください。

Facebookページからすべての動画を表示する

ただし、特定のプレイリストの動画コンテンツを表示したい場合は、2番目のオプションを選択してください。

プレイリストオプションについては、ブラウザでプレイリストを開き、上部のURLをコピーしてください。

FacebookプレイリストのURLをコピーしてください

このURLをプラグインの「プレイリストURLを追加」フィールドに貼り付けてください。これにより、プラグインがどのプレイリストからコンテンツを取得するかが指定されます。

選択内容を保存し、カスタマイズ設定に進むには「次へ」をクリックしてください。

FacebookにYouTubeのプレイリストのリンクを貼り付ける

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

いよいよ楽しい部分です——ウェブサイト上でリールがどのように表示されるかをカスタマイズしましょう。

このプラグインは、フィードの外観とフィルタリングオプションを完全に制御できます。

ライブカスタマイザーのFacebookビデオフィード

まず、フィードに通常の動画ではなくリールのみが表示されるように設定する必要があります。

始めましょうか?画面上部の「設定」タブをクリックしてください。

次に、左側のメニューから「フィルター」をクリックします。 

ビデオフィードのオープン設定とフィルター

ここで、フィードに表示されるコンテンツの種類を正確に指定できます。

ビデオタイプのオプションを探し、そのドロップダウンメニューを使用してください。

利用可能な選択肢から「リールのみ」を選択すると、通常の動画がすべて除外されます。

フェイスブックのビデオフィルターを選択

保存」をクリックしてフィルター設定を保存してください。これでフィードにはFacebookページのリールのみが表示されます。

両方の動画タイプを表示することも、Facebook動画のみを表示することも可能です。

それではフィードの視覚的なレイアウトをカスタマイズしましょう。左上の「設定」をクリックしてメイン設定画面に戻ります。

Facebook Reelsのカスタマイズオプションに戻る

次に「カスタマイズ」をクリックして外観オプションにアクセスします。 

これによりビジュアルエディターに戻り、Facebook Reelsフィードのデザインが可能になります。

戻ってFacebookリールフィードのカスタマイズを始めましょう

この仕組みを簡単に実演してみせます。

まず、フィードレイアウトをクリックして、お好みの表示スタイルを選択しましょう。

Facebook Reelsフィードのレイアウトを編集する

ウェブサイトのさまざまな部分に適したレイアウトオプションがいくつか表示されます。

お好みのレイアウトデザインに応じて、 リスト、グリッド、マソンリー、 またはカルーセルから選択してください。

Facebookリールで利用可能なレイアウトをチェック

保存」をクリックしてレイアウトの選択を適用してください。プレビューが更新され、フィードの表示状態を確認できます。

残りのカスタマイズオプションをじっくりと探ってみてください。ヘッダーのスタイルを調整したり、ブランドに合わせて配色を変更したり、ボタンの外観をカスタマイズしたり、間隔を変更したりできます。

ステップ5:Facebook Reelsをウェブサイトに埋め込む

フィードのカスタマイズが完了したら、次はウェブサイトに追加しましょう。プラグインでは、表示したい場所に応じて、リールを表示する2つの柔軟な方法を提供します。

方法1:Facebook Reelsをページに表示する

Facebook Reels専用のページやセクションを丸ごと作りたい場合に最適な方法です。

ビジュアルカスタマイザーで、フィードエディタの上部にある「埋め込み」ボタンをクリックしてください。

Facebookのビデオフィードを簡単に埋め込む

そうすると、新しいFacebook Reelsフィードを埋め込む方法がすべて表示されたポップアップが表示されます。

次に、ポップアップから「ページに追加」オプションを選択します。

フェイスブックのフィードをページに追加する

これにより、既存のWordPressページの一覧が表示されます。

Facebook Reelsを表示したいページを選択してください。既存のページから選択するか、まず新しいページを作成してからこの手順に戻ることができます。

ページを選択した後、[追加]ボタンをクリックして進みます。 

facebookフィードのページを選択

その後、プラグインがWordPressのページエディターに遷移し、フィードが挿入可能な状態で表示されます。

まず、リールを表示させたい場所に新しいWordPressブロックを追加するため、プラス(+)アイコンをクリックします。

facebookフィードにコンテンツブロックを追加

検索バーを使ってカスタムFacebookフィードブロック を検索し、ページに追加してください。

これで、ブロックには作成したばかりのフィードが自動的に表示されます。

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

配置に満足したら、更新ボタンをクリックしてページを公開してください。

Facebook Reelsがウェブサイトに表示されるようになりました。訪問者がお楽しみいただけます。

ウェブサイト上のFacebookリールズの例

サイドバーやフッターなどのウィジェット領域にリールを表示したい場合、この方法が適しています。 

WordPressダッシュボードから 「Facebookフィード」»「すべてのフィード」へ移動してください。

リストからFacebookリールズのフィードをクリックすると、ビジュアルエディターで再度開きます。

Facebookのビデオフィードをもう一度開きます

ここにFacebookフィードを埋め込むことができます。

始めるには、画面上部の「埋め込み」ボタンをクリックしてください。 

Facebookのビデオフィードを簡単に埋め込む

ページに追加する代わりに、今回はウィジェット領域に追加します。

メニューから「ウィジェットに追加」オプションを選択してください。 

facebookフィードをウィジェットとして追加

その操作を行うと、ウェブサイトのウィジェット領域に移動します。ここでは、サイト上で利用可能なウィジェット領域の一覧が表示されます。

リールを表示させたい場所に応じて、サイドバーまたはフッターパネルのいずれかをクリックしてください。

フッターパネルを開く

その後、選択したパネルのプラス(+)アイコンをクリックしてください。

最後に、利用可能なオプションからカスタムFacebookフィードウィジェットを選択してください。 

facebookフィード・ウィジェットをサイドバーに挿入する

更新」をクリックするとFacebook Reelsのウィジェットがウェブサイトに表示されます。

Facebookビデオフィードのサイドバーの例

それだけだ! 

Facebook ReelsをWordPressサイトに埋め込みました。Facebookに新しいReelsを投稿するたびにフィードが自動更新されるため、追加作業なしでサイトを常に最新の状態に保てます。

ご覧の通り、Facebook Feed Proを使えば、ウェブサイトに動的で魅力的なFacebookコンテンツを追加するのは非常に簡単です。

WordPressサイトに魅力的なFacebookリールを追加する準備はできていますか?

今すぐFacebook Feed Proを入手し、数分でReelsの公開を始めましょう。

Facebookマーケティングのヒントとガイド(専門家厳選)

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

コメント1

  1. アメリア @EMUCoupon 4ヶ月前

    このガイドはとても分かりやすく、簡単に従えます。技術的な印象を与えずに各ステップを説明してくださった点が気に入りました。Facebook Reelsの埋め込みがずっとシンプルに感じられるようになりました。共有してくださりありがとうございます。

    返信

コメントを追加する

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