SNS埋め込みコード生成

X・Facebook・Instagram投稿のURLから埋め込みコードを生成

SNS埋め込みコード生成について

X(旧Twitter)、Facebook、Instagram、Threads の投稿URLを貼ると、ブログやウェブページに入れる埋め込みコードを作ります。方式は2つです。「スクリプト」方式は各社の公式ウィジェットスクリプト(widgets.js、sdk.js、embed.js)がプレースホルダーを実際の投稿に描き替え、「iframe」方式は各社の埋め込み専用URLを iframe で直接表示します。Threads は公開された iframe 用URLがないため、スクリプト方式のみです。

見た目は似ていても、自分のページに何を許すかが違います。ここではその違い、埋め込みが訪問者のプライバシーに与える影響、そして埋め込みコードの出どころである oEmbed を扱います。

スクリプト方式と iframe 方式の違い

スクリプト方式の <script src="https://platform.twitter.com/widgets.js"> は、自分のページの中で自サイトと同じ権限で動きます。原理的にはページのDOMを読み書きできます。その代わり、投稿の長さに合わせて高さを自動調整し、ダークテーマや言語を公式のやり方で反映します。

iframe 方式は投稿を別オリジンの窓に閉じ込めます。プラットフォームのコードは自ページのDOMに触れられず、外部スクリプトも一切不要です。弱点は高さで、iframe は中身の長さを知らないため、このツールは X 600px、Instagram 800px(キャプション非表示なら640px)という推定値を入れます。長い投稿は切れ、短ければ余白が残るので、高さ欄で調整してください。

CSP を厳しく運用しているサイトなら、script-src を広げずに済む iframe 方式が管理しやすいです。1ページに多数埋め込む長文記事なら、スクリプトは1回だけ入れて(「スクリプトを除く」オプション)プレースホルダーだけを繰り返す方が軽くなります。

埋め込みとサードパーティ Cookie

どちらの方式でも投稿はプラットフォームのサーバーから読み込まれるので、ページを開いた時点で訪問者のブラウザは x.com や facebook.com にリクエストを送ります。クリックは不要です。訪問者がそのサービスにログインしていればサードパーティ Cookie が一緒に送られることがあり、プラットフォームは「この人がこのページを見た」と知り得ます。

対応はブラウザで異なります。WebKit のドキュメントによれば、Safari の ITP は既定ですべてのサードパーティ Cookie を例外なくブロックします。一方 Chrome は2025年、サードパーティ Cookie の段階的廃止を実施せず、ユーザーが設定で選ぶ方式を続けると発表しました。同じ埋め込みでも、訪問者のブラウザによって追跡の有無が変わります。

このツールの X「トラッキング無効」オプションは、スクリプト方式では data-dnt="true"、iframe 方式では dnt=true を付け、パーソナライズに使わないよう X に求めます。要求であってリクエスト自体は止めません。Cookie 同意バナーを運用しているなら、埋め込みを同意前に読み込まない対象に含めるか検討してください。何も送らない確実な方法は、スクリーンショットと元投稿へのリンクで代替することです。

埋め込みコードの出どころ: oEmbed

WordPress などに投稿URLを貼るだけで埋め込みになるのは oEmbed という公開形式のおかげです。コンシューマー(CMS)がプロバイダーの oEmbed エンドポイントにURLを送ると、type、version(1.0)、html、width、height などを含むJSONが返ります。type は photo・video・link・rich の4種類で、ページ内の <link rel="alternate" type="application/json+oembed"> からエンドポイントを見つけられます。

oEmbed 仕様は、rich や video の html を表示するときは別ドメインでホストした iframe に入れるよう推奨しています。プロバイダーのHTMLをそのまま自ページに入れると XSS や Cookie 窃取の危険があるためです。このツールの iframe 方式は同じ隔離の考え方です。なお、このツールは oEmbed API を呼ばず各社の埋め込み形式をその場で組み立てるので、投稿が削除・非公開かどうかは実際のページで確認する必要があります。

表示されないときによくある原因

鍵アカウントの投稿、または削除済み。スクリプト方式では空の引用とリンクだけが残ります。
Instagram のURLに ?utm_source= などが付いている。このツールはクエリとハッシュを外し、末尾に / を付けて正規化します。
広告ブロッカーやトラッキング防止拡張機能がスクリプトや iframe のドメインを遮断している。
ページの CSP が platform.twitter.com、connect.facebook.net、www.instagram.com などを許可していない。
YouTube・TikTok・Vimeo のURL。認識はしますが、このツールの対象外なのでコードは作りません。

例

X の投稿、トラッキング無効、2方式の比較

入力: URL: https://x.com/jack/status/20 / トラッキング無効オン /(2)iframe 方式+遅延読み込み
結果: (1) <blockquote class="twitter-tweet" data-dnt="true" data-width="550"> <a href="https://x.com/jack/status/20"></a> </blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> (2) <iframe src="https://platform.twitter.com/embed/Tweet.html?id=20&dnt=true" width="550" height="600" loading="lazy" ... title="X post"></iframe>

(1)は外部スクリプトが自ページで動き、高さを自動調整します。(2)は投稿IDだけを取り出してスクリプトなしで表示し、高さは600px固定の推定値なので長いスレッドは切れることがあります。loading="lazy" は画面に近づくまでリクエスト自体を遅らせます。

追跡パラメータ付きの Instagram URL

入力: URL: https://www.instagram.com/p/ABC123/?utm_source=x / iframe 方式
結果: <iframe src="https://www.instagram.com/p/ABC123/embed/captioned/" width="400" height="800" ... title="Instagram post"></iframe>

クエリが除かれたパーマリンクに embed/captioned/ が付きました。キャプション非表示にすると embed/ になり、既定の高さは640pxになります。

使い方

投稿URLを貼り付けます。プラットフォームはURLから自動判定されます。
スクリプトか iframe かを選び、テーマ・幅・配置・キャプション非表示などを設定します。
1ページに複数入れるなら、2つ目以降は「スクリプトを除く」をオンにします。
コードをエディターのHTML編集画面に貼り、実際のページで表示を確認します。

よくある質問

iframe 方式の方が安全ですか?

プラットフォームのコードが自ページのDOMに触れられないという意味ではそうです。ただしリクエストはどちらもプラットフォームへ飛ぶので、追跡の面では大差ありません。

トラッキング無効にすれば Cookie は送られませんか?

送られることはあります。data-dnt は X にパーソナライズしないよう求める印で、Cookie を送るかはブラウザの設定が決めます。

はてなブログや note でも使えますか?

HTML編集ができ、外部スクリプトや iframe を除去しないエディターなら使えます。スクリプトが消される環境では iframe 方式を試してください。

Threads はなぜ iframe にできないのですか?

Threads は公開の iframe 埋め込みURLを提供していないため、公式の embed.js スクリプト方式だけで生成します。

出典

基準日: 2026-09-22

プライバシーとデータの扱い

SNS埋め込みコード生成

配置

プラットフォーム別

詳細