localhost:8080から配信しています。以下のスクリーンショットはすべてこのセッションのものです。自社に不都合な結果も削っていません。先に結論。 Facebookページをサイトに表示する方法は2つあります。方法1はFacebook公式のページプラグインで、無料です。ただし幅は500pxが上限で、見た目は変えられず、モデレーションもできません。方法2はCollectSocialsのようなウィジェットで、自分のページを接続して1行のスニペットを貼ると、ページ幅いっぱいの、サイトの雰囲気に合ったフィードになります。手が伸びやすいのは方法1、実際に使えたのは方法2でした。以下、両方を同じ条件で試した記録です。
Facebookページをサイトに表示する手順（6ステップ）
先に、実際に1回で通った手順を置いておきます。詳しい画面つきの説明は後半のセクションにあります。
- CollectSocialsのアカウントを作成し、ダッシュボードで新しいフィードを作ります。
- Add Sourceを押して、プラットフォームの一覧からFacebookを選びます。
- MetaのOAuthでFacebookアカウントを接続し、表示したいページを選びます。
- Collectの画面で投稿を整えます。ピン留め、非表示、テキストの編集、絞り込みが公開前にできます。
- Design Studioでレイアウトを選び、既製のテンプレートか自分で作ったテーマで見た目を決めます。
- Get Codeでスニペットを受け取り、サイトのHTMLに貼って、スマートフォンでも確認します。
公式のプラグインと違って、貼るコードは1か所だけで、最初の1回で表示されました。ではなぜ公式のほうを使わなくなったのか、その理由から書きます。
そもそもFacebookのフィードをサイトに載せる意味
Facebookで告知やキャンペーン、問い合わせ対応を続けている会社はまだ多く、その活動はFacebookの中に閉じたままになりがちです。埋め込みフィードはそれをサイト側に持ってきて、「今も動いている会社だ」ということを訪問者に見せます。実際の投稿にいいねやコメントが付いていること自体が社会的証明になりますし、ページを書き換えなくても内容が新しくなります。レビューや他のSNSと混ぜれば、1つのウィジェットで信頼を積み上げる形（英語）にもできます。
ページからサイトへ、投稿が移動する流れ
左のカード（Your Page / facebook.com）に投稿が積み上がり、Auto-Syncと書かれた点線の橋を渡って、右のブラウザ枠（yoursite.com）のSocial Feedの中にタイル状に並び、最後にLiveの印が灯るアニメーションです。手で貼り直す作業が挟まらないという、この記事の後半で実際に確認した動きをそのまま図にしています。
公式のページプラグインを実際に試した記録
2026年6月、まっさらなHTMLページにページプラグインだけを置き、DevToolsで読み込まれるものを確認し、ネットワークとCookieを計測し、Lighthouseを走らせ、そのあと同じ構成でCollectSocialsのFacebookフィードを通しました。順番に書きます。
まずコードが受け取れない
Metaの開発者サイトにあるページプラグインの設定ツールにページのURLを入れていきました。個人プロフィールのURLを入れてGet Codeを押すと、ボタンが小さく揺れるだけで何も起きません。エラーも説明も出ません。アプリ側の権限制限がかかっている認証済みのMeta Business Suiteのページでも、同じく無言で失敗しました。https://を付けずにfacebook.com/...の形で入れると「The href entered is not recognized as a valid URL」というエラーになりますが、そのすぐ下のプレビューはページを正しく描画したままです。そして完全なURLを入れてGet Codeを押すと、モーダルが開いてスピナーが回り続け、コードは最後まで返ってきませんでした。検証した期間、公式のコード生成は壊れていました。
結局、埋め込みコードは手で書きました
設定ツールがコードを渡してくれないので、標準のSDKローダーとfb-pageのdivを自分で書き、公開ページを指定しました。ローカルのfile://で開いても何も起きません。FacebookのSDKはセキュリティ上の理由でfile://からは動かないためで、localhost:8080にローカルサーバーを立てて配信しました。生のHTMLにFacebookのフィードを埋め込みたい場合に必要なのは、次のSDKローダーとfb-page のdivです。
<!-- 1. FacebookのJavaScript SDKを1回だけ読み込む（<body>の先頭付近） -->
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v23.0">
</script>
<!-- 2. フィードを表示したい場所にこれを置く -->
<div class="fb-page"
data-href="https://www.facebook.com/YourPage"
data-tabs="timeline"
data-width="500"
data-height="700"
data-small-header="false"
data-hide-cover="false"
data-show-facepile="true">
</div>data-width="500"が上限値そのものです。動かしてみると、細いスクロール枠の中に投稿が5件だけ入り、キャプションは途中で切られ、投稿をクリックするとFacebookへ飛ばされ、動画はその場で再生できず、末尾には「See more on Facebook」のボタンが置かれていました。このプラグインの役割は、訪問者を自分のサイトからFacebookへ連れ戻すことです。
幅の上限。最小180px、最大500px
Meta自身のドキュメントに、プラグインの幅は最小180pxから最大500pxの間に固定され、既定値は340pxだと書かれています。実際に確かめました。data-widthを500にして横幅いっぱいのセクションに置き、ブラウザを1179pxまで広げたところ、プラグインは左側の細い箱のまま、右側におよそ680pxの灰色の空白が残りました（1179 − 500 = 679）。広いコンテナに合わせて伸ばす設定は存在せず、500pxを超えては広がりません。
ウィンドウ幅の変化に反応しません
Metaのドキュメントには、プラグインは「読み込み時に幅を決定する」「読み込み後のボックスモデルの変化には反応しない」とも書かれています。レスポンシブモードで試しました。1179pxでは最初に描画した細い幅のまま固まって広がらず、184pxでは最小の180pxまで縮み、83pxでは完全に崩れて、見出しの文字が縦に積み上がる状態になりました。スマートフォンや画面の向きを変えたあとに表示が壊れて見えるという報告が絶えないのは、これが理由です。1回測ったきり、あとは調整しません。
Cookie。ここがいちばん効きます
DevToolsのApplication、Cookiesを開きました。localhostのドメインには自分のGoogle Analyticsのもの（_gaと_ga_で始まる2つ）しかありません。これは私のCookieです。ところがプラグインが読み込んだだけの.facebook.comドメインには、私が何も操作していないのに6つのFacebookのCookieが入っていました。
datr：ブラウザの識別。有効期限は2027年fr：Facebookの主要な広告用Cookie。有効期限は2026年ps_lとps_n：ログイン・セッション状態の判定sb：ブラウザのセキュリティ。有効期限は2027年wd：値がそのまま画面サイズ（1470x835）で、それをFacebookに送っています
6つとも、訪問者が何かをクリックする前、ページの読み込み時点で書き込まれています。GDPRなどの規則の下では、frのような第三者の広告・トラッキング用Cookieは、原則として事前の同意がなければ置けません。日本のサイトでも、欧州からの訪問者がいるなら同じ話になります。無料のはずのプラグインが、静かに同意管理の宿題を持ち込むということです。プラグインの利用自体もMeta Platform Termsの対象になります。
ネットワークで何が読み込まれるか
拡張機能なしのシークレットウィンドウで、キャッシュを無効にしてNetworkタブを見ました。ページプラグインしか置いていないページが、FacebookのSDKと難読化されたスクリプトの連鎖を引き込み、読み込みが終わるまでに数秒かかります。SDKは小さなローダーと本体のsdk.jsの2段構えで、そのあとに難読化されたスクリプトが次々と続きます（1つは130 kB、別のものが96.2 kB、さらに68.5 kB）。加えて、Facebookのロギング用エンドポイントへのリクエストが404を返していました。私のページ自身のHTMLは25msで用意できていて、そのあとはすべてFacebookです。
正直に付け加えます。合計の転送量はページとセッションによって変わります。そのページが今出している画像が最適化されないまま引かれるので、重い表紙画像や写真の多いページならもっと大きくなります。単一の数字を掲げても意味がありません。ただしSDKとスクリプトの分は、どのページを埋め込んでも一定でかかります。そしてトラッキングCookieを持ち込み、次の項目でLighthouseを壊すのは、その一定の部分です。
Lighthouseはスコアを出せませんでした
モバイルとデスクトップの両方でLighthouseを走らせました。どちらもNO_FCPで失敗します。「ページが何も描画しませんでした」という意味です。SDKの読み込みが非同期すぎて、Chrome自身の計測ツールがFirst Contentful Paintを捕まえられません。Googleの標準的な計測ツールで測れないということです。プラグインを外して見出しだけのページで走らせると普通にスコアが出たので、原因はページ側ではなくプラグインです。CollectSocialsのフィードは、同じページ、同じシークレットウィンドウで計測が最後まで完了しました。
言葉だけでは伝わりにくいところなので、画面収録も残しました。設定ツールがコードを返さないところ、プラグインが500pxで止まるところ、LighthouseがNO_FCPで落ちるところ、そして同じページ・同じブラウザセッションでCollectSocialsのフィードが幅いっぱいに出て計測も通るところが順に映っています。収録は英語の画面です。
CSSはまったく効きません
ページ側に強めのCSSを流し込みました。フォントを赤いGeorgiaのセリフ体にして、背景を紫にし、角丸と影を全部消しています。プラグインの周囲はすっかり変わりましたが、プラグイン自身は1ピクセルも変わりません。iframeの中に描画されていて、こちらのCSSが届かないからです。公平に言えば、この分離は意図されたもので、サイト側のスタイルでプラグインが壊れることを防いでいます。ただし裏返せば、デザインの自由はゼロです。色もフォントもレイアウトもカードの形も、Facebookが決めたものがそのまま訪問者に見えます。
スマートフォンでの見え方
iPhone 12 Proのエミュレーションでは、プラグインは画面幅いっぱいに広がります。ひと目では悪くありません。ただしページ名が3行に折り返し、紹介文は途中で切られ、ウィジェットの下に大きな白い空白が残りました。同じ端末で見たCollectSocialsのフィードは、カルーセルでもリストでも端から端まで埋まり、文字の折り返しの問題も出ていません。
実際にうまくいった手順（CollectSocials）
500pxの箱とFacebookのスクリプトに付き合うのをやめて、CollectSocialsで同じページのフィードを作り直しました。1回目から幅いっぱいで、サイトの見た目のまま表示されています。Facebookのアプリ IDもSDKローダーも要らず、ウィジェットが原因で同意バナーが必要になることもありません。ページを接続して、レイアウトを選んで、スニペットを1つ貼るだけです。以下、同じ2026年6月のセッションの画面です。
ステップ1：フィードを作る
登録するとダッシュボードに入ります。ここでFacebook用のフィードを作ります。フィードは複数持てるので、メインのページ用と、キャンペーン用や特定のページ用を分けて運用できます。
ステップ2：ソースにFacebookを選ぶ
Add Sourceを押して、プラットフォームの一覧からFacebookを選びます。Facebookは無料プランでも使えて、上位プラン限定にはなっていません。CollectSocialsはInstagram、YouTube、Googleレビュー、TikTok、X（旧Twitter）、Pinterest、Tumblr、RSS、Vimeoにも対応しているので、あとから同じフィードにまとめることもできます。
Facebookを選ぶと、次に集める内容の種類を聞かれます。ページの投稿を取り込むPageを選びます。
ステップ3：Facebookページを接続する
Connect Facebookを押すと、MetaのOAuthに進みます。対象のページを管理しているFacebookアカウントでログインした状態が必要です。CollectSocialsがパスワードを保存することはありません。使うのは失効できるトークンで、Facebookの設定からいつでも取り消せます。接続すると、そのアカウントで管理しているページが一覧されるので、表示したいページを選びます。投稿（テキスト、写真、動画、リンク）はそのまま取り込まれます。接続できるのは自分が所有または管理しているページだけで、これはMetaのGraph API側のルールです。自社のページを自社サイトに載せる用途なら、むしろこれで十分です。
ステップ4：出す投稿を選ぶ
接続すると、投稿はCollectの画面に入ります。公式のプラグインに決定的に足りないもの、つまり「出すものを選べる」がここです。見せたい投稿をピン留めし、サイトに置きたくないもの（終わったイベントの告知、内輪のアンケート、雰囲気の合わない雑談）を外し、ソースで絞り込み、Web向けに文章をその場で書き足せます。
複数人でフィードを管理する場合はチームを招待できます。モデレーションの操作は操作ログに残るので、誰がどの投稿をピン留めし、外し、編集したかを後から確認できます。公式のページプラグインには、そもそもモデレーションという概念がありません。
ステップ5：Design Studioで見た目を決める
ここは公式のプラグインが手を出せない領域です。Design StudioでレイアウトをGrid、Carousel、Masonry、Slider、Mosaic、Coverflowなどから選び、そのうえで見た目を作ります。差が出るのは後者で、既製のテンプレートから始めることも、独自テーマをゼロから作ることもできます（色、フォント、枠線、影、余白、カードの形）。作ったテーマは保存できるので、Facebookの見た目ではなく自分のブランドの見た目に合わせられます。
Facebookのフィードを自分のサイトの見た目に寄せる
Design Studioの画面を模したアニメーションです。左のサイドバーでレイアウトのアイコンとテーマの見本が切り替わり、右のプレビューがGrid、Masonry、Carousel、List、Marqueeと、配色ごと入れ替わっていきます。プレビューの見出しはFacebook Feedのまま、中身の投稿も同じで、変わるのは並び方と色と余白だけです。見た目が完全に固定される公式のページプラグインとの差がここに出ます。
ステップ6：プレビューしてコードを受け取る
Previewを押すと、デスクトップ、タブレット、モバイルを切り替えながら実際の見え方を確認できます。よければGet Codeで設置用のスニペットを受け取ります。ウィジェットはShadow DOMの中に描画されるため、サイト側のCSSと干渉せず、どの幅でもレスポンシブに追従します。iPhone 12 Proでカルーセルと縦のリストの両方を試しましたが、どちらも画面の端まで使えていました。
「ライブ」という言葉について： これは一定の間隔で自動更新されるフィードであって、リアルタイム配信ではありません。新しい投稿は自動で取り込まれるので、貼り直しや手動更新は不要です。
公式ページプラグインとの比較（実測した項目だけ）
以下の各行は、2026年6月に私が実際に確認したことです。同じ公開Facebookページを、同じ構成の空のページに置いて、同じDevToolsのセッションで測っています。
| 実測した項目 | Facebookページプラグイン | CollectSocials |
|---|---|---|
| 読み込まれるスクリプト | FacebookのSDKと難読化スクリプトの連鎖 | 1つ |
| 画像 | ページが出しているものを無最適化のまま | 表示サイズに合わせたもの |
| 同意前のFacebookのCookie | 6つ（datr, fr, ps_l, ps_n, sb, wd） | 0 |
| Lighthouse | NO_FCPで失敗（スコアが出ない） | 計測が完了 |
| 最大幅 | 500pxで上限 | コンテナの幅いっぱい |
| 画面幅の変化 | 読み込み時に固定 | 追従する |
| デザインの変更 | 不可（iframeで分離） | レイアウト、テンプレート、独自テーマ |
| 出す投稿の選別 | なし | ピン留め、非表示、絞り込み、その場での編集 |
| 他のSNSとの併用 | Facebookのみ | Facebook、Instagram、Googleレビュー、YouTubeなど |
| 費用 | 無料 | 無料プランから（料金ページ・英語） |
WordPress・Shopify・Webflow・Squarespace・Wix・Googleサイトへの貼り方
コードを受け取ったら、あとは貼るだけです。主要なサイト作成ツールごとに、どこへ貼るかを書いておきます。
WordPress（ブロックエディタ）
- Facebookのフィードを出したい固定ページか投稿を開きます。
- +のブロック挿入から「カスタムHTML」を検索します。
- カスタムHTMLブロックを追加して、コードを貼ります。
- ブロックのツールバーのプレビューで表示を確認してから公開します。
カスタムHTMLブロックに貼るところ
WordPressのエディタを模したアニメーションです。+ボタンを押すとカスタムHTMLのブロックが挿入され、スクリプトタグが1文字ずつ入力され、入力が終わるとコードの表示がタイル状のウィジェットプレビューに切り替わり、最後に公開済みの表示が出ます。プラグインの追加は挟まらず、貼るコードも1か所だけ、という実際の流れをそのまま追ったものです。
ウィジェットはShadow DOMの中に描画されるので、テーマ側のCSSと干渉しません。ブロックエディタでも、Elementor、Divi、Beaver Builderといったページビルダーでも、テーマの組み合わせを問わず同じように動きます。
ページビルダーの場合。 ElementorならHTMLウィジェット、Diviならコードモジュール、Beaver BuilderならHTMLモジュールに貼ります。やることは同じで、貼って保存するだけです。
サイドバーやフッターに出す場合。 サイト全体に出したいときは、外観 > ウィジェットでカスタムHTMLのウィジェットを追加して、そこに貼ります。テーマのテンプレートファイルに直接書けば、ページごとに貼り直さずに全ページへ出せます。
WooCommerceの場合。 商品ページにFacebookのフィードを置くと、購入を検討している場所で、実際のお客さまの反応や商品に関する投稿がそのまま社会的証明になります。
Shopify（Online Store 2.0）
- 管理画面でオンラインストア > テーマ > カスタマイズを開きます。
- フィードを置きたいページでセクションを追加を押します。
- カスタムLiquidを選び、Liquidの入力欄にコードを貼ります。
- セクションの位置を決めて保存します。
Webflow
- WebflowのDesignerでプロジェクトを開きます。
- フィードを置きたい場所にEmbedの要素（Components内）をドラッグします。
- コード入力欄にスニペットを貼って、エディタを閉じます。
- サイトを公開すると表示されます。
Code EmbedとCode Blockの違い、ブレークポイントごとの調整、CMSコレクション内への設置までは、Webflowにソーシャルフィードを埋め込む記事（英語）で詳しく扱っています。
Squarespace
- ページを編集し、挿入位置をクリックしてブロックを追加します。
- コードブロックを選び、種類をHTMLのままにしてコードを貼ります。
- 適用してページを保存します。
Wix
- Wixのエディタで追加 > 埋め込み＆ソーシャル > カスタム埋め込み > ウィジェットを埋め込むを選びます（Wix StudioではEmbedの要素）。
- 要素のコード入力欄を開いてコードを貼り、適用を押します。
- 要素の大きさと位置を整えて公開します。
Wixには独特のつまずきどころがいくつかあります。HTMLの埋め込みは無料プランのサイトでも使えること、Wix ADIで作ったサイトは通常のエディタに切り替える必要があること、モバイル表示は別に設定すること。画面つきの手順はWixにFacebookフィードを埋め込む記事（英語）にまとめています。
Googleサイト
- Googleサイトのエディタでサイトを開き、挿入 > 埋め込むを選びます。
- 埋め込みコードのタブにスニペットを貼り、次へ、挿入と進みます。
- キャンバス上で大きさを調整して公開します。
同じコードはHubSpot（カスタムモジュール）や、手書きの静的HTMLのサイトでも使えます。カスタムHTMLやJavaScriptを受け付ける場所であれば同じです。
Facebookの動画だけを並べたい場合
リールやライブの録画、商品紹介の動画が中心のページなら、テキストのタイムラインに混ぜるより、動画だけを見せる形にしたほうが伝わります（公式のページプラグインでは、そもそも動画をその場で再生できません。クリックするとFacebookへ飛ばされます）。
公式の単体動画の埋め込み。 Facebookには動画1件ごとの埋め込みがあります。動画の投稿を開いて三点メニューから埋め込みを選び、出てきたコードを貼る形です。会社概要のページに推薦の動画を1本置く、といった用途なら十分機能します。ただし1回に1本だけで、見た目はFacebookのものに固定され、差し替えるにはコードを書き換える必要があります。複数の動画を動的に並べる仕組みはありません。
動画だけを集めたフィードにする。 CollectSocialsならページを1回接続したうえで、Collectの画面で動画の投稿だけに絞り込めます。結果として、生のタイムラインではなく設計された動画ギャラリーになります。レイアウトはカルーセルやスライダーが向いていて、訪問者はスクロールせずに横に送って見られます。取り込めるのは次のようなものです。
- ページにアップロードした動画。新商品の紹介、使い方の説明、お知らせなど。
- Facebookライブの録画。配信が終わると通常の投稿として残るので、見逃した人のための置き場所になります。
- Facebookリール。縦型の短い動画を、サイト側の新しい訪問者に届けられます。
- 反応の付いた動画。いいねやコメント、シェアの数が投稿と一緒に運ばれるので、動画プレーヤー単体では出せない社会的証明になります。
フィードをページのどこに置くか
置き場所で効果はかなり変わります。実際にうまくいく位置をいくつか挙げます。
どのページに置くかを考える
ブラウザ枠の中のサイト（yourwebsite.com）を、トップページのファーストビューと、その下のAboutと商品ページの2つのブロックに分けて示すアニメーションです。3か所の候補が順に光り、それぞれの狙いが吹き出しで切り替わります。トップページは信頼を積む位置、Aboutは会社の人柄が出る位置、商品ページは買う直前の後押しになる位置、という違いです。
トップページ（ファーストビューより下）。 アクセスの多いトップページの下のほうにFacebookのセクションを置くと、主要なメッセージを邪魔せずに「動いている会社だ」と伝えられます。ここは公式のプラグインの500px上限がいちばん響く場所でもあります。セクションの幅に対して箱が小さすぎるからです。
会社概要のページ。 整えられた紹介文では出せない実際の空気が、投稿にはそのまま出ます。
問い合わせ・サポートのページ。 更新が続いているフィードがあると、返事が来る会社だという印象になりますし、見逃されたお知らせを拾ってもらえます。
商品・サービスのページ。 特定の商品に触れた投稿やお客さまの声を、購入を決める場所に置けます。
Facebookだけで終わらせない
公式のプラグインと決定的に違うのがここです。1つのフィードの中で、FacebookにインスタグラムのフィードやGoogleの口コミ、YouTubeの動画を混ぜられます。最新のFacebookの投稿の隣に星5つの口コミと直近のインスタグラムの写真が並ぶウィジェットは、どれか1つのSNSだけを出すよりも強い証明になります。
もっと大きなものを作るなら、あらゆるサイトにソーシャルウォールを設置する記事（英語）も参考になります。
結局どちらを使うべきか
Facebookページをサイトに載せる作業は本来単純で、公式のページプラグインは確かに単純です。ただしその単純さは、Facebookの見た目の500pxの箱を受け入れ、そこから来るスクリプトの読み込みを受け入れ、同意前に置かれる6つのCookieを受け入れ、出す投稿を選べないことを受け入れ、Lighthouseがそのページを計測できなくなることまで受け入れたうえでのものです。小さな「Facebookはこちら」の箱なら、それでも釣り合うかもしれません。
幅いっぱいに出したい、サイトの見た目に合わせたい、軽く保ちたい、画面幅に追従してほしい、出す投稿を選びたい。あるいはインスタグラムや口コミと混ぜたい。そのどれかが必要なら、こちら側で制御できる道具が要ります。同じ条件で両方を通したあと、私はCollectSocialsを使っています。Facebookのcookieは1つも増えず、公式のプラグインがスコアを出せなかった場所で計測は普通に通り、出てくるのはFacebookの窓ではなく自分のサイトの一部に見えるフィードです。しかもFacebookのフィード自体は無料プランでも作れます。
サイトにFacebookだけが載ることはあまりありません。同じ仕組みでX（旧Twitter）のフィードも、TikTokのフィード（英語）も、同じウォールの中にページの投稿と一緒に並べられます。
CollectSocialsを今すぐ試す
500pxの箱に収まらないFacebookフィードを、ページ幅いっぱいに、自分のサイトの見た目で。ページを接続して、デザインを選んで、コードを1か所に貼るだけです。
よくある質問
Facebookページの埋め込みコードはどこで取得しますか
Metaの開発者サイトにあるページプラグインの設定ツールです。無料で使えます。ただし2026年6月の検証では、そのコード生成が動きませんでした。個人プロフィールのURLや権限制限のかかったページではGet Codeが無反応になり、正しいURLで押してもモーダルのスピナーが回り続けてコードが返ってきませんでした。生成さえできれば、コード自体は無料で使えます。この記事で扱った表示速度とCookieの前提つきです。
ページプラグインが表示されない・反応しないのはなぜですか
検証で再現できた原因は4つあります。（1）設定ツールがそもそもコードを生成しない。Get Codeが回り続けるか、個人プロフィールや権限制限のあるページで無言で失敗します。（2）幅が500pxで固定されているため、それより広いセクションを埋められません。（3）Metaのドキュメントにあるとおり、読み込み時に幅を測ったあとは「ボックスモデルの変化に反応しない」ので、画面幅を変えたときやスマートフォンで崩れます。（4）必要なFacebookのSDKが読み込めていない、あるいは同意管理ツールやCookieのブロックで止められている。確実にコンテナ幅に合わせたいなら、この制約の外にあるウィジェットを使うほうが早いです。
幅を500pxより広げる方法はありますか
ありません。Metaのドキュメントで最小180px、最大500px、既定340pxと決まっていて、実際に1179pxのページでdata-widthを500にしても、右側におよそ680pxの空白が残りました。コンテナ幅に合わせて伸ばす設定は存在しません。
ページプラグインを置くとCookieは設定されますか
されます。読み込んだだけで.facebook.comのCookieストアができ、datr、fr、ps_l、ps_n、sb、wdの6つが、訪問者が何も操作していない時点で入りました。GDPRの下ではfrのような第三者の広告・トラッキング用Cookieは原則として事前の同意が必要なので、同意管理の対象になり得ます。同じ検証で、CollectSocialsのウィジェットは.facebook.comのドメインもCookieも作りませんでした。
ページプラグインは無料ですか
無料です。ただし引き換えになるものがあります。2026年6月の検証（シークレットウィンドウ、拡張機能なし）では、操作の前に6つのFacebookのトラッキングCookieが置かれ、Lighthouseはスコアを出せませんでした。加えて500pxの上限と、変更できない見た目です。
サイトが重くなりますか
検証ではかなり重くなりました。ページプラグインだけを置いた空のページが、FacebookのSDKと難読化されたスクリプトの連鎖を引き込み、読み込みの完了までに数秒かかります。転送量はページが出している画像によって上振れします。プラグインはその画像を最適化しないまま引くためです。LighthouseはFirst Contentful Paintすら捕まえられませんでした。同じページに置いたCollectSocialsのFacebookフィードは、計測が最後まで通っています。
個人アカウント（プロフィール）は埋め込めますか
フィードとしては埋め込めません。公式のページプラグインが対応しているのはFacebookページだけで、個人プロフィールのURLを入れたときは無反応でした。CollectSocialsのようなツールで接続できるのも、自分が所有または管理しているページだけです。これはMeta Graph APIのプライバシー上の制約です。サイトにフィードを出したい場合はページを使ってください。
WordPressやShopify、Wixではどこに貼りますか
WordPressならカスタムHTMLブロック、Shopifyならオンラインストア > テーマ > カスタマイズから追加するカスタムLiquidのセクション、WixならEmbed（埋め込み）の要素です。CollectSocialsのスニペットはそのまま描画されるので、プラグインやアプリの追加は不要です。上のWordPressの手順か、Wix向けの記事（英語）も参照してください。
Squarespaceではどうすればいいですか
エディタでページにコードブロックを追加し、種類をHTMLのままにしてコードを貼って保存します。CollectSocialsの埋め込みはその場に描画されてレスポンシブのまま動きます。公式のページプラグインは、コードブロックの中でもやはり500pxで止まります。
Facebookの動画だけを並べられますか
できます。ページを接続したうえで、Collectの画面で動画の投稿だけに絞り込み、カルーセルやスライダーのレイアウトを選びます。ページにアップロードした動画、ライブの録画、リールが対象で、いいねやコメントの数も一緒に表示されます。Facebook公式にも動画1件ごとの埋め込みはありますが、1回に1本だけで、見た目は固定、差し替えにはコードの書き換えが必要です。
他のSNSと同じフィードに混ぜられますか
混ぜられます。1つのフィードにFacebookとインスタグラム、Googleの口コミ、YouTubeなどをまとめて表示できます。公式のページプラグインで扱えるのはFacebookだけです。
検証条件と参考リンク
検証は2026年6月。拡張機能を無効にしたChromeのシークレットウィンドウ、キャッシュ無効で、localhost:8080から配信した同一構成の空のページに、公式のページプラグインとCollectSocialsのFacebookフィードをそれぞれ設置して比較しました。CookieはDevToolsのApplication、読み込みはNetwork、スコアはLighthouseで確認しています。MetaはSDKと社会的プラグインの仕様を随時変更するので、重要な判断の根拠にする前に必ず現状を確認してください。