X（Twitter）埋め込みジェネレーター

はじめに

ToollectのX（Twitter）埋め込みジェネレーターは、任意のツイートURLを、Xが他サイトでの投稿表示のために公開している公式埋め込みコード – twitter-tweetのblockquoteとwidgets.js – にワンクリックで変換します。コピー前のライブプレビュー、X自身のインターフェースが提供するすべての表示オプションを備えています。リンクを貼り付け、オプションを選び、プレビューし、コピーして貼り付ける。一連の流れは数秒で完了します。

取り除かれるのは、手作業でツイートを埋め込んだことがある人なら誰でも知っている摩擦です。X独自の公開ダイアログはコードを生成してくれますが、選択肢を別々の画面に散らばらせ、メディアを隠す操作も配置の制御も公開しておらず、動画の埋め込みには数値的な幅の調整さえありません。blockquoteを手書きするのは、ひとつ属性を書き間違えるだけでツイートが永遠に素のリンクのままになるまで機能します。このツールはwidgets.jsが期待する正確なマークアップを組み立て、あなたのオプションを正しいdata-*属性へ翻訳し、何かがページに届く前に実際のレンダリングを見せてくれます。

ジェネレーターはタブバーの背後に2つのモードを提供します。投稿は任意のツイートのための定番カード – テキスト、写真、リンクプレビュー – を構築し、テーマ、220〜550pxの幅、インターフェース言語、配置、会話とメディアの表示、Do Not Track、共有スクリプトタグを省略するオプションを備えます。動画は同じツイートをプレーヤー向けに最適化し、大きなクリップにふさわしい最大1920pxの幅をdata-media-max-width属性に書き込みます。どちらのモードもXの公開oEmbedエンドポイントと直接通信します – APIキーなし、登録なし、間にToollectサーバーはありません。

使用例

Xコンテンツの埋め込みはブログ記事以上の場所で登場し、2つのモードが自然に仕事を分けます。

ブログと編集コンテンツ

公人を引用するコメンタリー記事、発表ツイートを埋め込んだ技術記事、ハイライトクリップを見せるスポーツブログ – 定番のケースです。デフォルト設定の投稿モードでテキストツイートをカバーできます。ツイートの主役がクリップであり、プレーヤーにカラムを任せたいときは動画モードへ切り替えてください。

ニュースルームと速報

ジャーナリストは目撃者の投稿や公式声明を展開する報道に取り込みます。速度がものを言い、検証も同様です – ジェネレーターは現場の連絡先が共有したどんなリンクでも、追跡パラメータ付きのアプリ共有リンクであれ、twitter.comのレガシー形式であれ、写真表示バリアントであれ、正規化してツイートへの正準な参照にまとめ、記事が出る前にプレビューがツイートがまだレンダリングできることを確認します。「会話を隠す」を使えば、引用した声明そのものにスレッドを集中させ、その上の論争を外せます。

ドキュメントと技術文書

リリースノート、変更履歴、チュートリアルは開発者のスレッドを一次資料として引用することが増えています。「メディアを隠す」はリンクプレビューを折りたたんで読みやすくし、言語セレクターはドキュメントの言語でアクションボタンやタイムスタンプを表示し、「スクリプトを省略」はwidgets.jsをすでにグローバルに読み込んでいるページ – コンポーネントライブラリやドキュメントテーマ – を重複タグから守ります。

マーケティングサイトとポートフォリオ

顧客の称賛ツイートをソーシャルプルーフとして、創業者のスレッドをブランドストーリーとして。中央揃えの配置で狭いカラムに単一の推薦文を収め、Do Not Trackでヨーロッパの訪問者にプライバシーの尊重を示し、出荷前にプレビューで各カードを確認します。

仕組み

ツールは4つのステップで動作します。

1. URLの解析と正規化 – 入力はツイート用のXリンク文法と照合されます – ユーザー名（@なし、1〜15文字の英数字またはアンダースコア）、statusルート、x.comまたはtwitter.com上の15〜19桁のsnowflake ID、オプションの www./mobile./m. プレフィックス。?s=20&t=…のようなクエリパラメータは除去ではなく無視されます – 再構築された正準URLにはそもそも含まれないからです。Webクライアントの/i/web/status/…のようなユーザー名のないルートは専用メッセージで拒否されます。oEmbedエンドポイントが解決できないためです。
2. 公式リクエストの構築 – あなたのオプションはXの公開oEmbedエンドポイント（publish.x.com/oembed?url=…）のクエリパラメータになります – maxwidth、theme、lang、hide_thread、hide_media、align、dnt、omit_script。エンドポイントはキーレスで、意図的にレート制限なし – CMSがURLを埋め込みに変換するために存在するからです。
3. 公式マークアップの取得 – ただ一度のHTTPS GETが、あなたのオプションをdata-*属性としてすでに焼き込んだ、Xが整形したままのblockquote HTMLを返します。ブラウザはXと直接通信します。Toollectサーバーはリクエストに触れません。
4. 後処理とプレビュー – サーバーのscriptタグは剥がされて別管理になり（何度再生成してもプレビューがwidgets.jsをちょうど1回だけ読むように）、動画モードは幅属性をクライアント側で書き換え（理由は下記）、blockquoteはプレビュー領域に入ります。ツールはレンダリングされたiframeを監視し、現れない場合は正直に報告します。

オプションをひとつ変えるたびにチェーン全体が再実行されます – 新しいリクエスト、新しいマークアップ、やり直されたプレビュー – コピーするコードが見ているものと常に一致するのはこのためです。

対応URL形式

ジェネレーターはユーザー名とともにツイートを識別するすべてのURL形状を受け入れ、それ以外は具体的なメッセージとともに拒否します。

受け入れる形式

ツイートID以降の表示バリアントやゴミパラメータは単純に無視されます – 埋め込みは常にツイート自体を指し、ツイートが自分のメディアをレンダリングします。https:// プレフィックスと末尾のスラッシュは任意です。

拒否される形式

/i/web/status/… 配下のユーザー名なしけーすは、もっともよくある驚きなので強調に値します。ツイートURLを開かずにWebクライアントからコピーすると、Xはこの形で提供します。ジェネレーターはこれを意図的に拒否します – エンドポイントに渡せば静かな失敗になるからです – 完全なリンクを求めます。URLを貼り直すよりも修復したい場合は、当サイトのX（Twitter）URLパーサーがこうしたリンクを正準形式へ解決します。

埋め込みコードの構造

出力はX自身の仕組みが生成するのと同じコードで、あなたのオプションが適用されています。デフォルト設定での投稿埋め込みは次のようになります（内容は略）：

<blockquote class="twitter-tweet" data-width="550">
  <p lang="en" dir="ltr">Just setting up my twttr</p>
  &mdash; Jack (@jack)
  <a href="https://x.com/jack/status/20?ref_src=twsrc%5Etfw">2006年3月21日</a>
</blockquote>
<script async src="https://platform.x.com/widgets.js" charset="utf-8"></script>

各部の説明：

• blockquoteのクラス – twitter-tweetはwidgets.jsが探すフックです。ページ上でこのクラスを持つ要素はすべてレンダリングされたカードになります。
• data-width（投稿）– レンダリングの最大幅（ピクセル）。Xは書かれた値にかかわらず内部的に約250〜550に丸めます – ジェネレーターはあなたの選択値を誠実な範囲内に保ちます。
• data-media-max-width（動画）– メディアがカード内で広がれる最大幅、最大1920px。動画モードのみに存在 – ジェネレーターがなぜこの属性を自ら書くのかは「投稿と動画」の章を参照してください。
• data-theme="dark" – ダークを選んだときのみ存在。暗いカードの見た目で明るい文字を暗い地にレンダリングします。
• data-lang – 具体的な言語が選ばれている限り存在します（英語も含む）。タイムスタンプの形式、「続きを読む」の橋渡し、アクションラベルといったウィジェット自身の文字列をローカライズしますが、ツイート本文は決して変えません。属性を省くのは自動だけで、その場合はwidgets.jsがページの言語にフォールバックします。
• data-conversation="none" – 返信に対する「会話を隠す」で追加。これがない場合、widgets.jsは親投稿の折りたたまれた要約を前置きします。
• data-cards="hidden" – 「メディアを隠す」で追加。リンクプレビュー・写真・動画は折りたたまれたままになり、テキストだけがレンダリングされます。
• data-align – カードをコンテナに対して左右にフロートさせたり中央揃えにしたりします。配置「なし」では存在しません。
• data-dnt="true" – パーソナライズのオプトアウトで追加。Xに対し、埋め込みとそのページ閲覧をパーソナライズされた提案や広告に使わないよう伝えます。
• 著者行を伴う段落 – widgets.jsが走る前に見える内容 – ツイート本文、作者、そして投稿へのリンク。JavaScriptがないか、スクリプトがブロックされた訪問者にとっての恒久的な体験であり、普通の引用へ优雅に劣化します。
• scriptタグ – platform.x.comからのwidgets.js、非同期で読み込み。ページに1つあればいくつの埋め込みにも足ります – まさに「スクリプトを省略」オプションの目的です。

投稿と動画

2つのタブ、1つのツイート、2つの異なる仕事。タブを切り替えると即座に再生成されます – 古い状態は残りません。

なぜツールが自らdata-media-max-widthを書くのか？XのoEmbedエンドポイントにはできないからです。テストにより、エンドポイントはあらゆるmaxwidthパラメータ – 動画つきツイートも含めて – 投稿の範囲220〜550に丸め、クリップ埋め込みが持つdata-media-max-width属性を決して出力しないことが確認されています。その属性はpublish.x.com内部のフロー、すなわちEmbedded Videoジェネレーターが後からマークアップを飾る工程に属します。ジェネレーターはまさにその装飾を再現します – サーバーが返した丸め済みのdata-widthを剥がし、選択した幅をdata-media-max-widthに書き込むことで、1200pxのクリップ埋め込みはあなたのページで本当に1200pxの幅になります。

実際の判断基準は単純です。カードとして読んで十分なら – 投稿。プレーヤーを除いたら空っぽになるなら – 動画、そしてプレーヤーに必要な余地を与えてください。

埋め込みオプション

各コントロールは1つの属性またはリクエストパラメータに対応します。既定値は括弧内。

言語（既定：ページの言語）– 自動と、Xがウィジェット文字列のために用意する34言語から選べます。具体的な言語を選ぶと、英語であってもlangパラメータとして送られ、data-langに書き込まれます——コードをどこに貼ってもウィジェットのchromeは同じ言語のままです。ツイートの言葉ではなく、ツイートを取り巻くタイムスタンプやアクションラベルをローカライズします。自動はパラメータも属性も省き、widgets.jsはホストページが宣言する言語で描画します——多言語サイトには適しますが、出力は貼り付け先に依存します。

テーマ（ライト、投稿タブのみ）– ダークはtheme=darkを送りdata-theme="dark"を書き込みます。ライトは属性がない状態です。

幅（投稿550、動画560）– 正確な数値として入力し、フィールドを出るとすぐ有効な範囲に丸められます。投稿はmaxwidthを送ります。動画はdata-media-max-widthのクライアント側書き換えを駆動します。タブの範囲外の値はフィールドを生き延びられません – 投稿で9999は550になり、動画で100は560になります。

配置（なし）– 左・右・中央はリクエストにalignを、blockquoteにdata-alignを書き込みます。中央は幅広の記事に単独のカードを静かに置く方法です。右は記事本文を回り込ませます。

会話を隠す（オフ、投稿タブのみ）– hide_thread=trueを送り、サーバーがdata-conversation="none"へ翻訳します。返信にのみ意味があり、独立したツイートでは何も変わりません。

メディアを隠す（オフ、投稿タブのみ）– hide_media=trueを送り、data-cards="hidden"へ翻訳されます。埋め込みは純粋な引用になります。

widgets.js スクリプトタグを省略（オフ）– omit_script=trueを送り、出力からscriptタグを抑制します。widgets.jsをすでにページ全体で1回読み込んでいるサイト向け – 複数の埋め込み、1つのスクリプト。ページにwidgets.jsがないならオフのままにしてください。blockquoteだけでは永遠に静的テキストのままです。

X のパーソナライズをオプトアウト（オフ）– dnt=trueを送りdata-dnt="true"を書き込みます。Xはこれを、埋め込みとそのページ閲覧をパーソナライズされた提案およびパーソナライズされた広告から除外することだと文書化しています。

使い方

1. ツイートURLを貼り付けます – 上の表の受け入れられる形式ならどれでも。
2. 生成を押します（またはEnter）。コードが出力ボックスに現れ、プレビューが自動的に開き、Xの本物のレンダリングが表示されます。
3. タブを選びます – 標準カードには投稿、クリップ中心のツイートには動画。切り替えるとそのタブのオプションと幅の範囲で再生成されます。
4. オプションを調整します – 言語、テーマ、幅、配置、表示チェックボックス。変更のたびに再取得・再レンダリングが起こり、コードボックスがプレビューからずれることはありません。
5. 診断を確認します – カードが現れない場合、出力の上の警告が、Xのスクリプトがブロックされたのか、ツイートが埋め込み不可能なのかを教えてくれます。
6. コードをコピーし、ツイートを表示したい場所のページHTMLに貼り付けます。

対応形式に一致しない入力は出力を消して自己説明します – 不正リンクのメッセージか、ユーザー名のないルートなら完全なリンクを求めるメッセージか。クリアは入力・コード・プレビューを一歩でリセットします。

チュートリアル

実在のリンクで両タブを通してみましょう。

ステップ 1 – アプリの共有リンクを貼り付ける。 モバイルアプリが共有する形のツイートURLを、追跡パラメータごとコピーします：

https://twitter.com/new27brigade/status/2090248985391014324?s=20&t=FakeNonce

生成を押します。パーサーはレガシードメインやs・tパラメータを越えてツイート本体まで読みます – new27brigade、ステータス2090248985391014324 – 生成されたコードは正準形を指します。プレビューが開き、カードがレンダリングされます。

ステップ 2 – 暗くする。 テーマをダークにします。コードはdata-theme="dark"を獲得し、プレビューはダークパレットで再レンダリングされます。再取得に注目してください – テーマはサーバー側で焼き込まれるため、文字列をローカルに編集する代わりにオプション変更のたびにエンドポイントを呼ぶのです。

ステップ 3 – 細くする。 幅に350を入力しEnterを押します。属性はdata-width="350"になり、カードが縮みます。試しに9999を入力して他の場所をクリックしてみてください – フィールドは550に戻ります。Xがそこで丸めるからです。

ステップ 4 – インターフェースをローカライズする。 言語を日本語にします。コードはdata-lang="ja"を獲得し、プレビューのタイムスタンプが日本式に整形されます。ツイート本文は書かれた通りそのまま – 設定が支配するのはX自身のラベルだけです。

ステップ 5 – 動画へ切り替える。 動画タブをクリックします。ツールは動画パラメータセットで再取得し、マークアップを書き換えます – data-widthが消え、data-media-max-width="560"が現れ、テーマセレクターがパネルから消えます。幅を1200までドラッグすると、プレーヤーが広がります。このツイートは軍事演習のクリップなので動画モードが似合います。テキストの発表なら投稿へ戻すでしょう。

ステップ 6 – コピーして出荷する。 コピーを押し、シンプルなHTMLページに貼り付けます。開くと – プレーヤーがフル幅でレンダリングされます。それが完全な契約です – 同じコード、同じレンダリング、あなたのページ上で。

プレビューと診断

プレビューはあなたの正確なblockquoteに対してXの本物のwidgets.jsを実行するので、あなたのページが失敗する箇所で正確に失敗します。2つの警告、2つの異なる意味：

両警告とも十分な待機時間の後に発火します – スクリプトのダウンロードに20秒、レンダリングにさらに15秒 – 接続が遅くても誤警報は起きません。埋め込み可能なツイートなら、これらの窓の中で余裕をもって表示されます。

知っておく価値のある機械的な詳細 – 最初の生成がwidgets.jsをダウンロードし、セッション中は保持します。再生成 – 新しいオプション、タブ切替 – はそれを再利用し、新しいblockquoteの処理を促すため、以降のプレビューは最初より速く現れます。

プロのヒント

• URLパーサーと組み合わせる。 パーサーはリンクを分析・清掃します – 種類、snowflake ID、追跡キー。ジェネレーターはきれいになったリンクをコードに変えます。解析はパーサーで、公開はジェネレーターで。
• 1つのスクリプトタグ、多数の埋め込み。 複数のツイートがあるページはwidgets.jsを1度だけ読むべきです – 最初の出力以外はスクリプトを省略にチェックを入れるか、サイトテンプレートで自分で読み込み、どこでも省略します。
• メディアを隠すとツイートが引用になる。 リンクプレビューが気を散らす編集上の引用には、「メディアを隠す」と「会話を隠す」で言葉と署名だけを残します。
• 単独の推薦文は中央へ。 広いレイアウトでの中央配置は意図的なデザインとして読めます。各CMSの既定である左寄せは、マーケティングページが望むものではまずありません。
• ウィジェットの言語をページの言語に合わせる。 英語のRETWEETボタンがある日本語のページは未完成に見えます – 具体的な言語の選択がchrome（あなたの責任である部分）を固定します。同じ埋め込みを多言語テンプレートで使い回すなら、代わりに自動を選び、widgets.jsに各ホストページに従わせましょう。
• EU向けページではDo Not Trackをオンに。 フラグはXによって文書化され、埋め込みを通じて伝播します – カードが訪問者のプライバシーを尊重するというワンクリックの合図です。
• カラムのために設計し、それから幅を設定する。 投稿は物理的に550pxで終わります。コミットする前に、プレビューがコンテナサイズでの本当の結果を見せます。

代替手段

ほかにどんな方法でツイートをページに置けるでしょうか？

X独自の共有ダイアログは最も近い代替であり、同じblockquoteの供給源です – しかしカスタマイズは言語、会話の非表示、パーソナライズのオプトアウト、大雑把な動画サイズで止まり、hide_media、align、正確なmaxwidthへの道はありません。APIルートは従量課金で完全な制御を買えますが、それでもレンダリングはあなた次第です。サードパーティサービスは彼ら自身のスクリプトを挟み込みます。ジェネレーターは実用的な中間地点を占めます – 公式マークアップ、完全なオプション、即時の視覚確認。

公式APIと比較して

投稿の埋め込みに関わる公式サーフェスは3つあり、ジェネレーターはそのうち最も穏やかなものに直接構築されています。

ジェネレーターはoEmbedエンドポイントを文書どおりに呼びます – CMSプラグインが送るのと同じリクエストを、あなたのブラウザが送る形で。エンドポイントに欠けているものを加えます – 入力の正規化、動画モードのdata-media-max-width装飾、スクリプトタグ管理、診断。X API v2は意図的に関与しません – 2026年2月の料金改定が無料枠を廃止して以来、それ経由でのツイート読み取りは、埋め込み目的において無料エンドポイントがすでにカバーする能力にお金を払うことになるからです。

ジェネレーターとURLパーサーの違い

Toollectは同じリンクを受け付けるXツールを2つ提供しており、役割分担を一目見ておく価値があります：

パーサーは分析者、ジェネレーターは建設者です。公開ワークフローは両方を順番に正当に使います – 混沌としたリンクが何を指すかを特定・正規化するために解析し、それからページに載せるために生成します。両者は構成上、文法的に一致します – パーサーがツイートとして受け入れるリンクは、ジェネレーターが埋め込むリンクです。

できないこと

過信されないための境界線を、名指しで示します。

• タイムライン・プロフィール・リスト・スペース・ハッシュタグは埋め込みません。 それらは別のマークアップを持つ別のXサーフェスです。oEmbedエンドポイントのプロフィールサポートはタイムラインアンカーを生成し、ツイートカードは生成しません。ジェネレーターはそれらを拒否します。需要があれば専用ツールが正直な手段です。
• ユーザー名のないリンクは解決しません。 /i/web/status/… は正準形が要求するユーザー名なしに届き、ツールは推測しません。リンクを開き、完全なURLをコピーしてください。
• t.co短縮子は解決しません。 素の短縮リンクはツイートの同一性を運びません。目的地を貼り付けてください。
• プライバシーも削除も覆しません。 保護アカウント、削除済み投稿、埋め込みを無効化した作者は、正しいのに何もレンダリングしないコードを生みます。どんなツールもそれは変えられません。
• リクエスト前にツイートを検証しません。 検証は文法的なものです。ツイートが存在するかどうかは、エンドポイントの応答だけが答えます – 利用不可のツイートは失敗したリクエストとして現れます。
• ウィジェットをスタイリングしません。 レンダリングされたカード内の色・フォント・chromeはXの管轄です。あなたのは配置（配置、幅）と存在（会話、メディア）だけです。
• コードを設置しません。 コピーしたものを貼り付けるのはあなたです。ツールがCMSやページビルダーの中へ手を伸ばすことはできません。

トラブルシューティング

プライバシーとデータ処理

このツールは自分のトラフィックについて正直です。ゼロリクエストの兄弟より大きいですが、それでもXへの直接接続です。

• 生成はアクションごとに1回、ツイートURLをXへ送ります。 生成を押すかオプションを変えると、正準なツイートURLとあなたのオプションとともに、publish.x.com/oembedへのHTTPS GETがちょうど1回発生します。リクエストはあなたのブラウザからXのインフラへ向かいます。Toollectサーバーはプロキシもログも閲覧もしません。
• プレビューはX自身の機構を読み込みます。 カードをレンダリングすると、platform.x.comからwidgets.jsを、Xのシンジケーションインフラからレンダリング済みiframeを、画像ホストからメディアを取得します – コピーしたコードがあなたの読者のブラウザで生むのとまったく同じトラフィックです。
• Do Not Trackは伝播します。 オプションをオンにすると、生成されたコードはdata-dnt="true"を運びます。Xが文書化する、埋め込みとそのページ閲覧をパーソナライズ提案・広告から除外する合図です。
• アカウントなし、保存なし、分析なし。 ツールは訪問間で状態を保持しません。タブを閉じればすべて終わりです。
• コードを公開すると、あなたの訪問者がXと通信します。 それが埋め込みの性質です – 明確に述べておく価値があります。厳密にオフラインのXワークフローが必要なら、当サイトのX（Twitter）URLパーサーはネットワークリクエストゼロで全業務を遂行します。

技術仕様

詳細：

• エンドポイント – GET https://publish.x.com/oembed?url={canonical}、キーレス、JSONレスポンス、文書化されたレート制限なし。パラメータはmaxwidth、theme、lang、hide_thread、hide_media、align、dnt、omit_script
• 入力文法 – ホスト x.com / twitter.com に www. / mobile. / m. のオプションプレフィックス。ユーザー名 [A-Za-z0-9_]{1,15}。ツイートIDは15〜19桁。スキーム、末尾スラッシュ、表示バリアント（/photo/1、/video/1 など）、クエリ文字列は許容のうえ破棄
• 正準出力URL – https://x.com/{username}/status/{id}
• 投稿幅の契約 – 220〜550px（端点は外れる値を丸めます。歴史的既定325、ツール既定550）。動画幅は560〜1920pxをクライアント側でdata-media-max-widthへ適用 – エンドポイントはそれを出力できないため
• 言語 – 自動またはXウィジェットの34ロケールから選択可。具体的な選択はenを含めdata-langに書き込み、自動だけが省略
• スクリプト管理 – サーバーのscriptタグは除去。https://platform.x.com/widgets.js はセッションごとに1回、20秒のタイムアウト付きで読み込み。レンダリングウォッチャーはiframeを500ms間隔で最大15秒尋ね、その後報告
• 再リクエスト方針 – オプションまたはタブの変更ごとに新しいoEmbedリクエスト。飛行中の同一リクエストはビジーガードで畳まれます
• 出力のセルフホスティングに必要 – script-srcとframe-srcで https://platform.x.com を許可（レガシースニペット用に https://platform.twitter.com も）。img-srcで https://abs.twimg.com と https://pbs.twimg.com を許可
• ブラウザ対応 – すべてのモダンブラウザ（クリップボードAPI。widgets.js自体が要求するES5ランタイム）

機能

• 任意のツイートURLからワンクリックでX（Twitter）公式の埋め込みコードを生成 – ひとつのツールに投稿モードと動画モードを搭載
• X独自の公開ツールと同じオプションを再現 – ライト/ダークテーマ、自動＋34言語のインターフェース、正確な幅、配置、会話を隠す、メディアを隠す
• コードを貼り付ける前にX公式のwidgets.jsがレンダリングするライブプレビューを確認
• 幅を正確に制御 – 投稿は220〜550px、動画はdata-media-max-widthで560〜1920px
• 訪問者への配慮 – Do Not Trackスイッチ内蔵と重複するwidgets.jsタグを省略するオプション
• Xのスクリプトがブロックされたときも明確な診断を表示する無料のブラウザジェネレーター – APIキー不要、登録不要

よくある質問