※本記事の検証内容とスクリーンショットは2026年8月時点のものです。
Xの埋め込みが表示されない7つの原因
「Twitter 埋め込み 表示されない」という検索が絶えないのには、はっきりした理由があります。原因は大きく分けて次の7つです。ご自身の症状がどれに当てはまるか、まず確認してください。
- 旧twitter.comのURLを使っている——2023年のXへのリブランドでURLがx.comに移行し、古い埋め込みコードやキャッシュされたコードが壊れました。
- widget.jsが読み込まれない——埋め込みコードをタイムラインに変換する公式スクリプトは、CMSやモダンなフレームワークとの競合で読み込みに失敗することが頻繁にあります。
- 未ログイン訪問者への表示制限——2023年以降、ログインしていない状態での閲覧が段階的に制限され、サイト訪問者に埋め込みタイムラインが表示されないケースが多発しています。
- タイムライン埋め込み自体の劣化——現在のpublish.x.comは、プロフィールを指定しても「Posts by ○○」というテキストリンクしか生成しません（後述の検証で実際の画面をお見せします）。
- X APIの有料化——API v2への移行で無料枠が大幅に縮小され、無料でフィードを取得していた外部サービスの多くが停止しました。
- 鍵アカウント化——埋め込んでいるアカウントが非公開に切り替わると、エラー表示もなく埋め込みがただの空白になります。
- 編集画面だけの制限——Squarespaceは編集画面でスクリプトを無効化し、WebflowのDesignerは埋め込みを一切描画しません。どちらも公開後のページでは正常に表示されます。故障と勘違いしやすい代表例です。
このアニメーションについて
同じWebページのセクションを左右に並べて比較するアニメーションです。左は埋め込みのない状態、右は各プラットフォームの投稿・レビュー・エンゲージメント表示を含むソーシャルウォールが表示された状態。正常に機能する埋め込みが届けるのはこの右側の状態で、壊れた公式埋め込みではここが空白のままになります。
公式ツールpublish.x.comを実際に検証した結果
publish.x.comを開くと「What would you like to embed?」と聞かれ、ポストのURL・プロフィールのURL・ハンドル名（@ユーザー名）・ハッシュタグの4種類を入力できることになっています。4つすべてを実際に試しました。結果は次のとおりです。
単一ポストの埋め込み——これは使えます
SpaceXのポストURLを入力すると「Embedded Video」と「Embedded Post」の2つの表示形式が提示され、本文・画像・エンゲージメント数まで含んだきれいなカードがプレビューされました。コードをサイトに貼り付けると、そのまま正常に表示されます。1件のポストを記事内に引用したいだけなら、公式ツールで十分です。
プロフィールURL（タイムライン）——壊れています
次に https://x.com/SpaceX を入力し「Embedded Timeline」を選択しました。ところがプレビューに表示されたのは、フィードではなく「Posts by SpaceX」というテキストだけ。さらに生成されたリンク先は https://s.com/SpaceX——x.comですらない、存在しないURLです。コードをサイトに貼っても結果は同じで、タイムラインは一切表示されず、壊れたリンクだけが残りました。
ハンドル名（@XDevelopers）——同じ症状
X自身が入力例として挙げている @XDevelopers でも試しましたが、結果は同じでした。「Posts by XDevelopers」というテキストと、https://s.com/XDevelopers という壊れたリンクが生成されるだけです。
ハッシュタグ（#WhatsHappening）——そもそも選択肢がない
#WhatsHappening を入力すると、今度は「Embedded Timeline」という選択肢自体が表示されません。生成されるのは「Post #WhatsHappening」という投稿ボタンだけ。つまり、公式ツールでハッシュタグのフィードを埋め込む方法は存在しません。イベントやキャンペーンでハッシュタグウォールを作りたい場合、公式ツールは選択肢から外れます。
確実な方法：CollectSocialsでXタイムラインをホームページに埋め込む手順
公式ツールに見切りをつけて、筆者が実際に使っているのが CollectSocials です。APIキーの発行も開発者アカウントも不要で、widget.jsのデバッグに悩まされることもありません。流れは次の6ステップです。
- CollectSocialsに登録し、Organizeダッシュボードで新しいフィードを作成する
- 「Add Source」からプラットフォーム一覧でX/Twitterを選択する
- OAuth 2.0でXアカウントを接続し、「My Tweets」（自分のタイムライン）か「Hashtag」（ハッシュタグ収集）を選ぶ
- Collectページで投稿をモデレーションする（ピン留め・除外・フィルタリング）
- Design Studioでレイアウトとデザインを選ぶ
- 「Get Code」で埋め込みコードを取得し、サイトに貼り付ける
sync
このアニメーションについて
X上のポストが自動的に同期され、自社サイトに埋め込んだウィジェットに表示されるまでの流れを示しています。一度設定すれば、Xに投稿するたびにサイト側のフィードも更新されるため、コピー＆ペーストの手作業は発生しません。
ステップ1：新しいフィードを作成する
登録後に表示されるOrganizeダッシュボードで「Create New Feed」をクリックします。フィードは複数作成できるので、会社のタイムライン用とキャンペーンのハッシュタグ用を分ける、といった運用も可能です。
ステップ2：ソースとしてX/Twitterを選択する
「Add Source」をクリックするとプラットフォームの選択画面が開きます。ここでX/Twitterを選びます。YouTube・Googleレビュー・TikTok・Facebook・Instagramなど他のプラットフォームにも対応しており、複数のソースを1つのウィジェットにまとめてソーシャルウォールとして表示することもできます。
ステップ3：Xアカウントを接続する
「Connect X」をクリックしてOAuth 2.0で認証します。パスワードがCollectSocialsに保存されることはなく、連携はXの設定画面からいつでも解除できます。接続後は「My Tweets」（自分のタイムラインを取得）か「Hashtag」（公開ハッシュタグを収集）のどちらかを選びます。ハッシュタグ収集は、公式ツールにはない機能です。
ステップ4：投稿をモデレーションする
接続すると投稿がCollectページに取り込まれます。ここが埋め込みフィード運用の要です。見せたい投稿をピン留めして上位に固定し、サイトに出したくない投稿は除外し、キーワードフィルターで自動的にふるいにかける——投稿単位でコントロールできます。
ステップ5：Design Studioでデザインを決める
Design StudioではCarousel（カルーセル）・Grid（グリッド）・Masonry（メイソンリー）・Timeline（タイムライン）といったレイアウトから選択し、色・フォント・カードのスタイルを自分のサイトに合わせて調整できます。Xは画像よりテキスト中心のプラットフォームなので、文字が読みやすいTimelineやListが特に相性の良い選択肢です。
ステップ6：プレビューを確認して埋め込みコードを取得する
「Preview」でデスクトップ・タブレット・モバイルの表示を確認し、問題なければ「Get Code」で埋め込みコードを取得します。あとはこのコードをサイトに貼り付けるだけです。貼り付け先ごとの具体的な手順は次のセクションで解説します。
このアニメーションについて
ウィジェット設定の流れを最初から最後まで示したアニメーションです。目的の設定、フィード種別の選択、アカウント接続、モデレーション設定、レイアウト調整、コードの設置という順に進みます。
X連携の料金について
知っておいていただきたいのは、X側のAPI有料化です。現在のX APIはアカウント接続や投稿の取得ごとに費用がかかる仕組みになっており、その影響でどの埋め込みサービスでもX連携は上位プラン限定になりがちです。CollectSocialsでもX連携は有料プランの機能ですが、タイムラインもハッシュタグ収集も、無料トライアル中は取得量の上限つきで試すことができます。まず自分のサイトで表示を確認してから判断できるということです。なお、トライアルの取得枠は1日ごとに少しずつ増えていく仕組みのため、複数のXソースを同時に試している場合、ハッシュタグの初回取得が翌日以降になることがあります。プランの詳細は料金ページ（英語）をご覧ください。
なお、フィードは一定間隔で自動同期される仕組みで、手動での更新作業は不要です。ただし「リアルタイム配信」ではありません。フィード設定の事前承認をオンにすれば、取り込み済みの投稿をいつ表示するかはモデレーション画面での承認でコントロールできますが、Xソースの同期間隔そのものは短くなりません。イベント会場のハッシュタグウォールのような使い方では、イベント中に投稿されたポストが反映されるのは次回の同期後になる点を踏まえて運用してください。
動画チュートリアル（英語）
音声は英語ですが、画面操作は本記事のスクリーンショットと同じ流れなので、映像だけでも手順を追えます。
公式埋め込みとCollectSocialsの比較
| 項目 | 公式埋め込み（publish.x.com） | CollectSocials |
|---|---|---|
| 料金 | 無料 | 有料プラン（料金ページ・英語）／無料トライアルあり |
| 単一ポストの埋め込み | ○ 正常に動作 | ○ 対応 |
| プロフィールタイムライン | × テキストリンクだけが表示される | ○ 自動更新されるフィードを表示 |
| ハッシュタグフィード | × 機能自体が存在しない | ○ 収集・モデレーション・埋め込みに対応 |
| レイアウト | 基本のタイムライン表示のみ | Carousel・Grid・Masonry・Timelineほか多数 |
| カスタマイズ | 高さ・幅・ライト／ダーク程度 | 色・フォント・テーマ・カードスタイルまで調整可 |
| モデレーション | なし | ピン留め・除外・キーワードフィルター・手動承認 |
| 自動更新 | 不安定 | 一定間隔で自動同期（手動更新は不要） |
| モバイル対応 | 表示崩れが起きやすい | レスポンシブ対応＋デバイス別プレビュー |
| 複数プラットフォーム | Xのみ | X・YouTube・Googleレビュー・TikTok・Facebookなど |
| CSSの分離（Shadow DOM） | なし（サイトのCSSと干渉することがある） | あり（サイト側のスタイルと干渉しない） |
プラットフォーム別の埋め込み手順（WordPress・Shopify・Webflowほか）
埋め込みコードを取得したら、あとは使っているサービスの作法に合わせて貼り付けるだけです。CollectSocialsはプラットフォームを選ぶと、そのプラットフォームに合った形式のコードを発行します——スクリプトが使えないサービスにはiframe形式、Shopifyにはテーマのレイアウト崩れを防ぐラッパー付きの形式、という具合です。
WordPress（Gutenbergエディタ）
- フィードを表示したい固定ページまたは投稿を開く
- 「＋」からブロックを追加し、「カスタムHTML」を検索する
- カスタムHTMLブロックに埋め込みコードを貼り付ける
- ブロックツールバーの「プレビュー」で表示を確認して公開する
プラグインのインストールは不要です。
Shopify（Online Store 2.0）
- Shopify管理画面で「オンラインストア > テーマ > カスタマイズ」を開く
- フィードを置きたいページで「セクションを追加」をクリックする
- 「カスタムLiquid」を選び、Liquid欄に埋め込みコードを貼り付ける
- セクションの位置を調整して保存する
Shopify向けには、テーマのflexboxレイアウトにウィジェットが押しつぶされないよう、ページ幅のコンテナで包んだ形式のコードが発行されます。発行画面でShopifyを選ぶだけで、この違いは自動的に処理されます。
Webflow
- WebflowのDesignerでプロジェクトを開く
- Embed要素（Components内）をフィードを置きたい位置にドラッグする
- コード欄に埋め込みコードを貼り付けてエディタを閉じる
- サイトを公開して表示を確認する
注意： WebflowのDesigner内では埋め込みは描画されません。壊れているわけではなく、公開後のページで初めて表示される仕様です。
Wix・Squarespace・その他のサービス
WixとSquarespaceは外部の<script>タグを制限しているため、CollectSocialsはこの2つにはiframe形式の埋め込みコードを発行します。WixならHTML埋め込み要素、Squarespaceならコードブロックに貼り付けるだけです。iframeの高さは埋め込んだフィードに合わせて自動調整されます。
Squarespaceで「表示されない」と感じたら： Squarespaceは編集画面上でスクリプトを無効化するため、編集中は表示が崩れたり「Script Disabled」と表示されたりします。これは編集画面だけの挙動で、公開されたページでは正常に表示されます。公開前に故障と判断しないようご注意ください。
NotionやGoogleサイトのようにスクリプトを一切実行できないサービス向けには、URLを指定するだけのiframe形式も用意されています。カスタムHTMLが使えるサービス（HubSpot・静的HTMLサイトなど）であれば、通常のコードがそのまま動作します。
Xのハッシュタグフィードをホームページに埋め込むには
検証パートでお見せしたとおり、公式ツールはハッシュタグのフィード埋め込みに対応していません。生成されるのは投稿ボタンだけです。X API自体にはハッシュタグ検索の機能がありますが、自前で実装するには開発リソースとAPI利用料が必要になります。そこで、APIまわりを肩代わりして埋め込みウィジェットまで用意してくれるサードパーティツールの出番です。
CollectSocialsでの手順は、タイムライン埋め込みとほぼ同じです。ステップ3で「My Tweets」の代わりに「Hashtag」を選び、追跡したいハッシュタグ（例：#自社ブランド名）を入力するだけで、そのハッシュタグの公開投稿が収集されます。ハッシュタグ収集も無料トライアル中に取得量の上限つきで試せます（プランの詳細は料金ページ・英語）。
ハッシュタグフィードではモデレーションを必ず有効にしてください。 公開ハッシュタグにはスパムや無関係な投稿、時には不適切な投稿も流れ込みます。フィード設定で事前承認をオンにすれば、承認するまで投稿はサイトに一切表示されません。これにキーワードフィルターを組み合わせ、表示される前に必ず内容を確認する運用にしておくべきです。イベントでの活用方法はイベント向けソーシャルウォールのガイド（英語）にまとめています。
よくある質問
Xの埋め込みが表示されないのはなぜですか？
主な原因は、(1) 旧twitter.comのURLを使った古い埋め込みコード、(2) widget.jsスクリプトの読み込み失敗、(3) 未ログイン訪問者への表示制限、(4) 埋め込み元アカウントの非公開化、(5) SquarespaceやWebflowの編集画面に限った制限——の5つです。「Posts by ○○」というテキストだけが表示される場合は、公式のタイムライン埋め込み自体が壊れているケースなので、コードを貼り直しても解決しません。本記事のCollectSocialsを使う方法をご検討ください。
無料でXのタイムラインを埋め込めますか？
公式のpublish.x.comは無料ですが、検証したとおり現在まともに機能するのは単一ポストの埋め込みだけです。タイムラインやハッシュタグのフィードを確実に表示するにはサードパーティツールが必要で、X APIの有料化の影響により、どのツールでもX連携は基本的に有料機能です。CollectSocialsの場合、タイムラインもハッシュタグも、無料トライアル中に取得量の上限つきで試せるので、契約前に自分のサイトでの表示を確認できます。
ハッシュタグのフィードは埋め込めますか？
公式ツールでは埋め込めません。ハッシュタグを入力しても投稿ボタンが生成されるだけです。CollectSocialsなどのサードパーティツールなら、ハッシュタグを指定して公開投稿を収集し、モデレーションを通したうえでサイトに埋め込むことができます。
WordPressにXのタイムラインを埋め込むには？
Gutenbergエディタで「カスタムHTML」ブロックを追加し、CollectSocialsで取得した埋め込みコードを貼り付けるだけです。専用プラグインのインストールは不要です。クラシックエディタの場合は「テキスト」タブに切り替えてコードを貼り付けてください。
WixやSquarespaceでも使えますか？
使えます。この2つのサービスは外部スクリプトを制限しているため、CollectSocialsはWix・Squarespace向けにiframe形式のコードを発行します。WixのHTML埋め込み要素、またはSquarespaceのコードブロックに貼り付けてください。なお、Squarespaceの編集画面ではスクリプトが無効化されるため表示が崩れて見えますが、公開後のページでは正常に表示されます。
CollectSocialsを今すぐ試す
表示されない公式埋め込みに悩む必要はもうありません。ソースを選んで、デザインを選んで、コードを貼り付けるだけです。