ウェブサイトを常に新鮮に保つことが、もう一つの仕事のように感じられてはいけません。それでも多くのブランドは、Facebook を毎日更新しながら、自社サイトはデジタルのほこりをかぶったまま放置してしまっています。
そこで状況を一変させるのが、Facebook feed の埋め込みです。一度埋め込むだけで、最新の投稿・写真・動画がウェブサイト上で自動的に更新されます。
EmbedSocial のようなUGC プラットフォームを使えば、手作業でのコピー＆ペーストはもう必要ありません。シンプルなフィードを、インタラクティブなソーシャルハブへと効果的に変えられます。
それでは、ソーシャルプルーフ（社会的信用）を見せつつ、同時にエンゲージメントを高めるために、Facebook feed をウェブサイトに埋め込む正確な手順を解説していきます！
まずは、プロセス全体を紹介する短いインタラクティブ動画をご覧ください。
完全ガイド：Facebook feed をウェブサイトに埋め込む方法
何よりも先に、EmbedSocial アカウントを作成する必要があります。その後、次の手順に従ってください。
- AI プロンプトで widget を定義する
- Facebook ソースを接続する
- Facebook widget テンプレートを選ぶ
- AI プロンプトでテンプレートをカスタマイズする
- widget の埋め込みコードをコピーする
- コードをウェブサイトに貼り付ける
完了すると、次のような widget が手に入ります。
ステップ1：AI プロンプトで widget を定義する
‘Widgets’（ウィジェット）セクションに移動し、‘Start from scratch’（最初から作成）を押します。そこで、理想の widget を説明しましょう。たとえば「自分のECブランド向けに、スマートでモダンなFacebook page widget をデザインして」と入力できます。
ステップ2：Facebook ソースを接続する
widget エディター内で ‘Connect your source’（ソースを接続）をタップし、すぐにソーシャルメディアのソース（今回はFacebook）を接続します。
注意： これまでにFacebook アカウントを接続したことがない場合は、接続を求められます。
widget に追加したいソースをタップするだけです（複数選択できます）。
ステップ3：Facebook widget テンプレートを選ぶ
テンプレートライブラリを見て回ることで、widget の見た目をさらに洗練させられます。Facebook や他のソーシャルプラットフォームで絞り込めば、エンゲージメント向上の効果が実証済みの、すぐに使えるデザインが見つかります。
ステップ4：AI プロンプトでテンプレートをカスタマイズする
満足のいく結果になるまで、AI コマンドバーを使ってwidget の見た目を調整し続けられます。このリアルタイム編集により、widget をサイトのカラーパレットに完璧になじませられます。
ステップ5：widget の埋め込みコードをコピーする
最後に、左側のサイドバーにある ‘Embed’（埋め込み）タブを開きます。このセクションには、さまざまなウェブサイトビルダーやプラットフォームに必要な連携オプションが用意されています。ここで ‘Copy code’（コードをコピー）を押すだけです。
ステップ6：コードをウェブサイトに貼り付ける
最後に、ウェブサイトのエディターを開き、widget を配置したいページに移動して、空のHTML ボックスに貼り付けます。そして変更を保存し、ページを読み込みます。
これはダイナミックなスクリプトのため、後でダッシュボードで加えた変更は、コードを差し替えることなく、公開中のサイトに自動的に反映されます。
さまざまなウェブサイトビルダーでFacebook feed を埋め込む方法
EmbedSocial のプラットフォームの最大の利点は、当社のFacebook 埋め込みコードが、Drupal、Wix、Weebly、Shopify、WordPress、Joomla、Wix、Squarespace、Pagecloud など、世の中のほぼすべてのCMS プラットフォームやウェブサイトビルダーで動作することです（これらに限りません）。
しかも一番うれしいのは、何かをインストールしたり、高度なコーディング知識を持っていたりする必要がない点です。1 行のコードを、お好きなページにコピー＆ペーストするだけです。
主要なビルダー全般での手順は、次のとおりです。
どんな種類のFacebook feed を埋め込めるのか？
ウェブサイトには複数の種類のFacebook コンテンツを埋め込めますが、公式のFacebook API を通じて自動取得できるのは、そのうち3 種類だけです。
Facebook API ソース（自動同期）：
- Page posts（ページ投稿）：公開中のページ投稿を、自動更新されるライブフィードとして表示します。
- Page mentions（ページメンション）：他のユーザーによるメンションから、ユーザー生成コンテンツを表示します。
- Visitor posts（訪問者投稿）：訪問者があなたのFB ページのタイムラインに直接公開した投稿を埋め込みます。
ただし、次のようなコンテンツであれば、いつでも手動でアップロードしてFB フィードに追加できます。
- 写真とアルバム：特定のアルバムが必要な場合は、スクリーンショットや厳選したアップロードを埋め込みます。
- Facebook 動画の埋め込み：API 経由でアクセスできない場合は、動画を手動で追加します。
- Facebook プロフィール投稿：投稿が公開されており、手動でアップロードした場合に限り埋め込みます。
- レビュー：ネイティブAPI 経由で取得できない場合は、Facebook レビューを手動で埋め込みます。
注意： 埋め込むコンテンツがウェブサイトのページに追加される前に、必ず公開状態であり、Facebook の規約に準拠していることを確認してください。
ネイティブの方法でFacebook feed を埋め込むには？
Facebook ユーザーは、公式の Page plugin と Embedded Posts widget を使って、Facebook のウォールや個別の投稿を埋め込めます。その使い方は次のとおりです。
Facebook Page plugin を使ってページを埋め込むには？
Facebook page widget を埋め込むには、次の手順に従ってください。
- Facebook Page Plugin のページにアクセスします。
- ‘href’ フィールドにページのURL を入力します。
- 表示するページタブをカスタマイズします。
- タイムライン、メッセージ、イベントを追加できます。
- Facebook feed widget の幅と高さを設定します。
- ‘Get Code’（コードを取得）を押し、JavaScript またはiFrame のコードをコピーします。
- ウェブサイトの空のHTML ボックスにコードを貼り付けます。
注意： このFacebook ページタイムラインwidget には、色・レイアウト・表示するコンテンツなどをカスタマイズする機能がありません。
ネイティブツールで個別のFacebook 投稿を埋め込むには？
Embedded Posts のFacebook ページを使って、個別の投稿を埋め込むこともできます。
- Facebook Embedded Posts のページにアクセスします。
- ‘href’ フィールドにページのURL を入力します。
- widget の幅を設定します（他のカスタマイズオプションはありません）。
- ‘Get Code’（コードを取得）を押し、JavaScript またはiFrame のコードをコピーします。
- ウェブサイトの空のHTML ボックスにコードを貼り付けます。
正しく行えば、このwidget はウェブサイト上で次のように表示されます。
注意： カスタマイズできるのはwidget の幅だけです。それ以外は一切できません！
なぜFacebook feed をウェブサイトに埋め込むのか？
Facebook feed をウェブサイトに埋め込めば、手間をかけずに、新鮮でソーシャルかつ信頼できるコンテンツが手に入ります。その効果には、たとえば次のようなものがあります（これらに限りません）。
- ユーザーエンゲージメントの向上：最新の製品やサービスを紹介するリアルタイム投稿で、訪問者をより長くサイトにとどめられます。
- ソーシャルプルーフ（社会的信用）の強化：本物のオンラインレビュー、メンション、ユーザー生成コンテンツを見せることで、瞬時に信頼を築けます。
- SEO シグナルの改善：新鮮でインデックス可能なコンテンツを追加すると、Google のような検索エンジンにサイトがアクティブだと認識され、ランキングの維持につながります。
- 見た目の魅力の向上：ソーシャルメディアフィードがリッチメディア・写真・動画をページ上に直接もたらすため、静的なウェブサイトで妥協する必要がありません。
- コンテンツ作業の負担軽減：新しいウェブサイトコンテンツを作る代わりにFacebook 投稿を再利用でき、他の作業に時間と労力を回せます。
- Facebook フォロワーの拡大：Facebook のウォールをサイトに埋め込めば、訪問者があなたを見つけてFacebook でフォローしやすくなります。
このように、Facebook feed をウェブサイトに埋め込むことで、ページがブランドのソーシャルプレゼンスを映し出す、生き生きとした存在に変わります。きっとそれを望んでいるはずです。間違いありません。
Facebook feed の埋め込みにはEmbedSocial を使おう
EmbedSocial は、Facebook、Instagram、X、Threads など、主要なソーシャルメディアプラットフォームすべてとAPI で直接連携する、本格的なソーシャルメディアアグリゲーターです。
最もシンプルに言えば、Facebook やその他のソーシャルメディアフィードをウェブサイトに統合できるツールです。さらに、数多くのメリットがあります。
- すべてのビルダーに対応： EmbedSocial は、WordPress サイト、Shopify、Webflow など、ウェブサイトプラットフォームの99% と簡単に連携できます。
- 徹底したカスタマイズ： 標準エディターまたはAI エディターを使って、完全カスタムのFacebook feed を作成し、ウェブサイトのデザインやブランディングに合わせられます。
- レスポンシブデザイン： ウェブサイトに埋め込まれたFacebook feed はレスポンシブ対応で、デスクトップ・タブレット・あらゆるモバイル端末で美しく表示されます。
- コンテンツモデレーション： フィードに表示されるコンテンツを完全にモデレートし、関連性のあるコンテンツだけを正しく表示する自動フィルターを設定できます。
- 自動更新： ウェブサイト向けのFacebook feed は、Facebook に新しいコンテンツが投稿されると自動的に更新されるため、大幅な時間の節約になります。
- SEO 上のメリット： Facebook feed をウェブサイトに埋め込むことで、サイトのコンテンツを新鮮に保て、SEO に良い影響をもたらす可能性があります。
- ソーシャルフィードの統合： Instagram、TikTok、Threads など、他のソーシャルメディアの@handle からのコンテンツも組み込めます。
EmbedSocial に登録すれば、さまざまなFacebook 向けのウェブサイトwidgetを起点にカスタマイズできます。さらに、AI UGC widget 機能を使って、説明するだけでwidget を作ることもできます。
ウェブサイト向けのFacebook feed の例をお探しですか？ こちらに、Facebook feed をすぐにウェブサイトへ追加できる、いくつかのFacebook widget テンプレートをご用意しました。
まとめ：Facebook feed を埋め込んでウェブサイトを新鮮に保とう！
Facebook feed をウェブサイトに埋め込むことは、本物で常に新鮮なコンテンツでページを生き生きと保つ、最もシンプルな方法の一つです。投稿を書き直したり手動で更新したりする代わりに、投稿からメンション、訪問者コンテンツまで、サイトがすべてを自動的に取り込んでくれます。
ただし、ネイティブの埋め込みオプションは、カスタマイズや表示できるコンテンツの面で非常に限られているため、必ずしも最良の選択肢とは限りません。
そのため、EmbedSocial のような外部のソーシャルメディアアグリゲーターを検討してみてください。サイトに「ちょうどいい」と感じられるwidget を作るために必要なツールがすべてそろっています！
どの方法を使うにしても、目指すゴールは同じです。ウェブサイトを、あなたのソーシャルプレゼンスの生きた延長へと変えることです。そして当社のプラットフォームなら、高度なモデレーション、カスタムレイアウト、そして自動更新されるマルチネットワークフィードで、さらに一歩進められます。
もう待つ必要はありません！ フィードを一度追加すれば、あとはずっと自動で動き続けます！
