Facebook Reelsは大きな注目を集めており、多くのユーザーが日常的なコンテンツを発信する手段として活用しています。
ブランドもまた、モバイルでのインタラクティブ性の高さを背景に、このトレンドに積極的に参加しています。
そのため、24時間で消えてしまうこうしたコンテンツを長く活かし、再利用するには、新しい方法が必要です。
その一つが、ほかのソーシャルメディアフィードと同じように、公開済みのFacebook Reelsをウェブサイトに同期させる方法です。
その具体的な手順を、EmbedSocialを使って以下でご紹介します。
Facebook Reelsを埋め込むメリット
なぜFacebook Reelsを埋め込む必要があるのか疑問に思われる方のために、主なメリットをいくつかご紹介します。
- コンテンツを再利用でき、ウェブサイトに表示する手間と時間を節約できます
- Facebookページの枠を超えて、Facebook Reelsのリーチを拡大できます
- ウェブサイトの訪問者をFacebookページのフォロワーへと誘導できます
- ウェブサイト上でエンゲージメントを高め、訪問者との信頼関係づくりに役立ちます
- Google検索結果にインデックスされることで、ウェブサイトへのトラフィック増加にもつながります
上記のメリットの一部またはすべてを実現したい方は、コーディングの知識がなくても簡単にFacebook Reelsをウェブサイトに表示できる、以下の手順をご覧ください。
Facebook Reelsを埋め込む手順ガイド
Facebook Reelsをウェブサイトに表示する手順は次のとおりです。
- Facebook Reelsウィジェットにサインアップします
- SourcesでFacebookを選択し、Facebookコンテンツへのアクセス権限を付与します
- 次に、Facebook Reelsを生成したいFacebookページを選択します。
- Facebook Reelsウィジェットのテンプレートまたはスタイルを選びます。
- ウィジェットを作成し、埋め込む準備ができたらEmbedをクリックして埋め込みコードをコピーします。
- 最後に、ウェブサイトのコードを開き、表示したい位置にウィジェットコードを貼り付けます。
なお、popupスタイルを選んだ場合は、ウェブサイトのフッターにある<body>タグ内にコードを追加できます。ウェブサイト全体で、画面下部に浮かぶフローティングポップオーバーとして表示されます。
あらゆるWebページやサイトビルダーへのFacebook Reelsの埋め込み
先ほど述べたとおり、Facebook Reelsをウェブサイトに埋め込むには、表示したいWebページに埋め込みコードを貼り付けるだけです。
これはほとんどのサイトビルダーやeコマースプラットフォームで機能します。以下では、各プラットフォームでコードを埋め込む具体的な手順を説明します。
WordPressにFacebook Reelsを埋め込む方法
WordPressにFacebook Reelsを埋め込む手順
始める前に、EmbedSocialプラットフォームを使えば、WordPressプラグインの有無にかかわらずFacebook Reelsを埋め込めることを覚えておいてください。
EmbedSocialはInstagram APIと直接連携しているため、ユーザーIDの設定やアクセストークンの更新は不要です。ボタンをクリックし、投稿をWordPressサイトに同期する許可を当プラットフォームに与えるだけで済みます。
EmbedSocialは、Facebook Reelsを埋め込む2つの方法を提供しています。WordPress投稿内に直接埋め込むためのJavaScriptコードと、ショートコードでFacebook Reelsを埋め込むためのプラグインです。両方の手順を以下にご紹介します。
オプション1： Facebook Reelsプラグイン
EmbedSocialは、ソーシャルメディアアグリゲーターの一部として無料のFacebook Reels用WordPressプラグインを提供しており、あらゆるWordPressテーマで動作します。
WordPress用Facebook Reelsを使えば、Facebookの動画を集めたフル動画フィードを作成できます。
始める前に、まずFacebookアカウントを接続する必要があります。その後、次の手順でWordPressサイトにFacebookプラグインを有効化します。
- WordPressの管理画面を開き、プラグインに移動します。
- 検索欄にEmbedSocialと入力し、検索結果からインストールをクリックします。
- インストールが完了したら、プラグイン一覧で有効化をクリックします。
- 次に、フィードを表示したいWordPressのページを開きます。
- +ボタンをクリックしてブロックを追加し、カスタムHTMLブロック（またはショートコードブロック）を選択します。
- 提供されたHTMLコードを貼り付けます。
- そのページで「保存」/「公開」をクリックします。
以上です。WordPressサイトのフロントエンドを開くと、最新のInstagram投稿がウェブサイトに表示されます。
EmbedSocialなら、レイアウトや列数、フォローボタンを選べるほか、Facebookフィード、Instagramフィード、TikTokフィードの投稿を1つのソーシャルメディアウィジェットにまとめて表示することもできます。
オプション2： JavaScriptでFacebook Reelsを埋め込む
このオプションは、ウェブサイトのサイドバーにFacebook Reelsウィジェットを表示するなど、一度きりの埋め込みに通常おすすめです。
そのためには、EmbedSocialアカウントからコードを取得し、サイドバーがあるウィジェットエリアにそのコードを貼り付けます。
さらに詳しく：
ShopifyサイトにFacebook Reelsを表示する方法
ShopifyにInstagramフィードを表示する手順
ShopifyにFacebook Reelsウィジェットを埋め込む方法はいくつかあります。以下のチュートリアルでは、選択したページにJavaScriptコードを埋め込む方法を説明します。
1. Shopifyにログインし、ストア > オプション > ページへ移動して、対象のページを開きます。
2. Shopifyのページエディターで、右上のコードアイコンをクリックします。
3. HTML/コードアイコン（右上）をクリックし、提供されたコードを貼り付けます。
4. 最後に「保存」をクリックすると、選択したページにFacebook Reelsフィードが表示されます。
さらに詳しく：
WixサイトにFacebook Reelsを表示する方法
WixサイトにFacebook Reelsを表示する手順
以下の手順でWixにFacebook Reelsを埋め込みます。
1. まず、Wixアカウントにログインし、サイトエディターを開きます。
2. 左上の**「+」ボタンをクリックして新しいブロックを追加し、ポップアップでiFrame**ブロックを選択します。
3. iFrameブロックが表示されたら、左上の**「コードを入力」ボタンをクリックします。
4. ウィジェットエディターからコピーしたウィジェットコードを貼り付け、「更新」**をクリックします。
5. ウィジェットに合わせてiFrameブロックのサイズを調整し、「公開」をクリックします。
HubSpotにFacebook Reelsを埋め込む方法
HubSpotにFacebook Reelsを埋め込む手順
HubSpotのサイトビルダーは、専門的な技術スキルがないユーザーの間でも、ランディングページの作成に非常に人気のあるプラットフォームです。
InstagramフィードをHubSpotのCMS Hubに埋め込むには、次の手順に従います。
- HubSpotアカウントにログインします。
- 上部メニューの**「Marketing」をクリックし、「Landing Pages」**をクリックします。
- Instagramフィードを表示したいページの編集をクリックします。
- ランディングページエディターで、上部メニューの**「File」をクリックし、「Page Settings」**を選択します。
- ここで**「Advanced」を選び、「Footer」**のテキストエリアに移動します。
- ウィジェットコードを貼り付けます。
- **「Save」または「Publish」**をクリックします。
以上です。Facebook Reelsウィジェットは一度設定すれば、あとは気にかける必要がありません。Facebookページに投稿するたびに、自動で更新されます。
NotionにFacebook Reelsフィードを埋め込む方法
NotionにFacebook Reelsを埋め込む手順
ランディングページの作成にNotionをお使いですか。そうであれば、次の手順でInstagramのアクティビティをNotionのページに同期できます。
まず、ウィジェットURLが必要です。ウィジェットエディターを開き、「Embed」タブの下にある**「iFrame code」ボタンをクリックすると取得できます。ポップアップが表示されたら、（一覧の3番目にある）「URL」をクリックし、「Copy URL」**をタップします。
Facebook ReelsをNotionのページに埋め込むには、次の手順に従います。
- Notionアカウントにログインし、フィードを埋め込みたいページを開きます。
- ウィジェットを配置する場所を選び、/embedと入力して「Embed」オプションを選択します。
- 「Embed link」タブをクリックし、URLタブにウィジェットURLを貼り付けます。
SquarespaceにInstagramフィードを表示する方法
SquarespaceにInstagramフィードを表示する手順
Facebook Reelsウィジェットが提供するコードは、Squarespaceでも機能します。
まず、Squarespaceアカウントにアクセスし、ホームページからウィジェットを表示したいサイトに移動します。
次に、Facebook Reelsウィジェットの埋め込みコードを貼り付ける手順を以下に示します。
1. ウィジェットを追加したいページのセクションに移動し、プラスボタンをクリックして新しいコンテンツブロックを追加します。
2. **「Embed」ブロックを選択し、「Embed Data」**コードアイコンをクリックします。
3. 挿入ポイントにコードを貼り付け、「Set」をクリックします。
Facebook ReelsフィードをHTMLでウェブサイトに埋め込むには？
HTMLにFacebook Reelsを埋め込む手順
純粋なHTMLでウェブサイトを構築している場合は、次の手順で埋め込みコードを簡単に貼り付けられます。
- （前述のとおり）EmbedSocialアカウントから提供されたFacebook Reelsコードをコピーします
- ウェブサイトのフォルダーに移動し、コードを追加したいHTMLを開きます
<body>セクション内でウィジェットを表示したいdivを見つけ、そこにコードを貼り付けます。
埋め込んだFacebook Reelsウィジェットのカスタマイズ
EmbedSocialなら、Facebook Reelsウィジェットのカスタマイズの幅は無限大です。ここでは、カスタマイズできる主な項目をご紹介します。
- ウィジェットのレイアウトを選択（slider、feed、popover）。
- ウィジェットのカードを選択（キャプション付きのfeed形式や、縦型のReels形式など）。
- 動画の自動再生を選択。
- 動画をLightboxで表示するか、元のリンクを開くかを選択。
- CTAボタンを追加したり、動画内で紹介した商品をタグ付けしたりすることで、訪問者がそのままクリックして商品をウェブサイトで購入できるようにします。
- Custom CSSを使って、ウィジェットの色や見た目をウェブサイトに合わせて自由に変更。
Facebook Reelsを埋め込む際のベストプラクティス
Facebook Reelsをウェブサイトに埋め込む際には、いくつかのベストプラクティスを実践できます。ここでは、ユースケースやウェブサイトに同期したいコンテンツに応じて複数のウィジェットを作成するという、最も代表的な方法をご紹介します。
1. 商品紹介ウィジェット
Facebookで商品を宣伝するために制作したFacebook Reelsをウェブサイトに同期させましょう。主力商品や新商品を際立たせるのに非常に効果的です。
2. ユーザー生成コンテンツ（UGC）ウィジェット
顧客が作成し、あなたがFacebookページにリポストしたReels（実際の利用シーンで自社商品を紹介するもの）を、ブランドイメージに合致するものに絞って掲載しましょう。このウィジェットはソーシャルプルーフ（社会的信用）になるだけでなく、他の顧客にも自身のReelsの作成・共有を促します。特に、さらなる購入を促すCTAを含めると効果的です。注目のUGC Reelsを定期的に入れ替えることで、コンテンツに動きと魅力を保てます。
3. イベントハイライトウィジェット
イベントハイライトウィジェットは、ライブイベントやウェビナー、カンファレンスの重要な瞬間を切り取って共有するのに最適です。イベントのハイライトや講演セッション、参加者同士の交流を映したReelsを埋め込むことで、訪問者にイベントの効果を高めるビジュアルな振り返りを提供できます。このウィジェットは、イベント終了後もオーディエンスのブランドへの関心を維持し、ライブに参加できなかった人にとっても貴重なリソースとなります。
4. ニュース・最新情報ウィジェット
業界ニュースや会社の最新情報を扱うウェブサイトでは、Facebookにも投稿しているFacebookのReelsを使って、タイムリーで魅力的なコンテンツを表示できます。速報や会社からのお知らせ、業界の知見を取り上げたReelsを埋め込むことで、訪問者に最新情報を分かりやすい動画形式で届けられます。
5. 季節限定プロモーションウィジェット
Facebookやウェブサイトで展開している期間限定オファーや季節商品、特別キャンペーンを紹介しましょう。Reelsウィジェットを現在の季節や近づく祝祭日に合わせて更新することで、緊急性と関連性を演出できます。Facebookで見慣れた形式のまま、訪問者がウェブサイト上で今すぐ行動を起こしたくなるよう促せます。
このウィジェットのデモをご覧ください。
重要なポイント
- Facebook Reelsをウェブサイトに埋め込むことは、エンゲージメントを高め、オーディエンスとつながる優れた方法になります。
- このガイドで説明した手順に従えば、WordPress、Wix、Shopify、その他の人気のサイトビルダーのいずれで構築したウェブサイトであっても、簡単にFacebook Reelsを埋め込めます。
- 埋め込んだ動画プレーヤーをブランドに合わせてカスタマイズし、動画が正しく再生されるかをテストしましょう。
