Webサイトに「今」の活気を。X（旧Twitter）連携のすべてをこの記事で一気に解説します。
日々皆さんがポストしているXの投稿やユーザーの生の声であるUGC投稿は、WEBサイトの信頼性を高める強力な武器になります。しかし、その実装には「デザインの崩れ」や「読み込みエラー」といった技術的なハードルがつきまといます。
そこでこのガイドでは、最新の仕様に基づいた個別ポスト・タイムラインの埋め込み術を紹介。サイトに合わせたカスタマイズ事例から、EmbedSocialなどの外部ツールを用いたプロ仕様のX表示デザイン例まで、Webサイトの価値を最大化するX連携の全体像をわかりやすく解き明かします。
Xの埋め込みとは何か？
Xの埋め込みとは、X（旧Twitter）上の投稿やタイムラインをウェブサイトやブログ上で直接表示させる機能のことです。専用の埋め込みコードを使用することで、デザインを崩さずに最新の投稿内容を共有でき、ユーザーとのエンゲージメント向上に役立ちます。
画像を貼り付けるのとは違い、Xの投稿の様々な要素をそのままウェブサイト上に表示でき、投稿の著作権の問題もクリアできるため、企業のウェブサイトやニュースサイト、さらに個人のブログでもX投稿の埋め込みが行われています。
X公式機能を使った場合の埋め込みの種類
Xの公式では、以下の種類の要素を埋め込むことができます。
- 個別ポスト(Embeded Post): 特定の投稿を一つずつピックアップして表示させます。記事の根拠や引用として最適です。
- タイムライン(Embeded Timeline): 指定したx アカウントの最新投稿をリスト形式で表示します。常に最新の情報を読者に届けられます。ただし現在は表示されないケースが頻出していて非推奨です。
- 動画(Embeded Video)：指定した投稿内の動画だけをサイトで表示させるオプションがあります。
- ボタン(X Buttons): クリックするだけで、サイトから離れずにあなたのアカウントをフォローできるボタンを設置します。
X投稿を埋め込む方法の選び方
X（旧Twitter）のポストやタイムラインをウェブサイトに埋め込む方法は、大きく分けて3つあります。手段を選ぶ際は、表示の安定性やデザインの自由度、そして費用を比較して検討しましょう。
| 埋め込み方法 | 費用 | 難易度 | 設定方法 | 特徴・注意点 |
|---|---|---|---|---|
|
[1] 公式コード利用 (x publish) |
無料 | 低 | 公式サイトでURLをコピーし、生成されたコードを貼り付け | X側の標準機能。単一投稿向き。タイムライン表示ができないケースが発生中。 |
| [2] 外部ツール利用 (EmbedSocial等) |
サブスク有料 | 低 | ツール内でアカウントを連携し、カスタマイズ後にコードをコピー | API連携ツールなら安定して表示。デザイン変更や自動更新が可能。 |
| [3] 自社開発 (API連携) |
開発費 + API利用料 |
高 | X APIを取得し、独自にシステムを構築 | 自由度は最大だが、APIの有料化により運用コストが非常に高い。 |
[3]の自社開発以外は、難しくありません。基本の流れはInstagramなど他のSNSと同様で、埋め込みコードをコピーしてWordPressなどのCMSにある埋め込み用HTMLブロック等に貼り付ける、これだけでXの投稿をウェブサイトに表示できます。
2026年現在の埋め込み方法の選び方のポイント
以前は手軽だった公式のタイムライン埋め込みですが、現在は閲覧者がXにログインしていないと表示されない、その他にもXの埋め込みスクリプト（プログラム）の問題、ブラウザに起因する問題、APIによる制限、など様々な要因でWEBサイト上でXのタイムラインが表示できないといった報告がされています。
そのため、コーポレートサイトなどで安定的に投稿内容を見せたい場合は、X公式API連携の外部ツールの利用するか、重要なポストを個別に埋め込むといった対処法の導入をおすすめします。
公式機能を使ってXの個別ポストを埋め込む方法
個別ポストの埋め込みは、特定の投稿を一つだけ選んで、ウェブサイト上に引用・表示する方法です。投稿のurlを直接活用するため、特定の情報を強調したい場合や、信頼性の高いソースとして引用したい場合に非常に有効です。
この方法では特定のポストデータのみを読み込むため、タイムライン全体を読み込むよりもデータ量が少なく、ページの表示速度への影響を最小限に抑えられます。
個別ポストの埋め込み手順
-
URLを取得する: 埋め込みたいポストの右上にある３点メニュー（…）をクリックし、「ポストを埋め込む」を選択します。
-
コードをカスタマイズ（任意）: x publishページに遷移後、埋め込みの種類を選びます。投稿を表示するため「Embeded Post」をクリックすると、すぐに埋め込み用コードが発行されます。WEBサイト表示用にカスタマイズしたい場合は、set customization optionsをクリックします。ダークモードへの変更や言語設定、返信の非表示設定などの調整が可能です。設定へを変更したらUpdateをクリックして確定します。
- 埋め込みコードをコピー: copy codeボタンをクリックして、埋め込み用HTMLコードを取得します。
-
ウェブサイトへ貼り付け: WordPressなどのWEBビルダーで「カスタムHTML」ブロックを追加し、コピーしたコードを貼り付けます。
公式コードをそのまま貼り付けるとこのように表示されます。
Have a nice day!#embedsocial活用デモ pic.twitter.com/BNM0H0YTit
— ESJP tester (@esjptester) February 2, 2026
AIによる表示調整
幅や表示位置を整えたい場合は、AIを使って調整する方法が簡単です。AIを使って表示を調整したものがこちらです。
Have a nice day!#embedsocial活用デモ
pic.twitter.com/BNM0H0YTit
— ESJP tester (@esjptester)
February 2, 2026
プロンプト例：
以下のX（Twitter）の埋め込みコードを, 指定の条件で表示されるように修正してください。
【元のコード】 （ここにコピーしたコードを貼り付け）
【条件】
- 中央揃えにする（親要素を div で囲んで margin: auto を適用）。
- 横幅を 350px に固定する（blockquote に data-width 属性を追加し、外側の div にも max-width を設定）。
- Xのスクリプトによる自動上書きを防ぐため、確実な方法で出力して。
公式機能を使ってXのタイムラインを埋め込み表示する方法
タイムラインの埋め込み機能を利用すると、自身のプロフィールや特定のリストの最新投稿をウェブサイトに直接表示できます。一度設置すれば、X側で投稿するたびにサイト上の表示も更新されるため、常に最新の情報を発信する手段として有効です。ただし現在、タイムラインが表示されない現在不具合が多く報告されているので注意が必要です。
公式機能でXタイムラインをWEBサイトに埋め込む手順
- URLをコピーする: タイムラインを埋め込みたいXアカウントのプロフィールページのURLをブラウザのアドレスバーからコピーします。
- X Publishへアクセス: x publish ページにアクセスし、入力欄にURLをペーストします。
-
表示形式を選択: Embedded Timeline（埋め込みタイムライン）をクリックすると、すぐに埋め込み用コードが発行されます。
- カスタマイズ（任意）: set customization optionsをクリックすると、WEBサイト上での表示の高さや横幅、デザインテーマ（デフォルト・light・dark）などを調整できます。編集が終わったらUpdateをクリックして確定します。
- 埋め込みコードをコピー: Copy Codeボタンをクリックして、埋め込み用HTMLコードを取得します。
- ウェブサイトへ貼り付け: WordPressなどのWEBビルダーで「カスタムHTML」ブロックを追加し、コピーしたコードを貼り付けます。
Xタイムラインが表示されない原因と解決策（2026年版）
現在、多くのWebサイトで「Tweets by —」という文字だけが表示され、タイムライン本体が出ない現象が発生しています。これは ユーザー側の設定ミスではなく、X（旧Twitter）側の仕様変更とブラウザのセキュリティ強化という2つの大きな要因が絡んでいることが多く指摘されています。
いかにネット上の情報をまとめました。ただし、2026年2月現在、これらを正しく設定してもタイムラインが表示されないことを筆者は確認していますので、参考情報としてご覧ください。
閲覧者のログイン状態による制限（最有力原因）
2024年以降、Xは未ログインユーザーへのコンテンツ露出を厳格に制限しています。公式ウィジェットは、閲覧者がブラウザでXにログインしている状態でないと、タイムラインの中身を取得できないケースが多発しています。
- 根拠: WordPress.orgやStack Overflowなどのエンジニアコミュニティにおいて、2025年〜2026年現在も「非ログイン環境での表示不可」が最も多いトラブルとして報告されています。
- 情報元: Medium: “Nothing to See Here?” – How to Reliably Render Twitter Timelines (2025)
ブラウザの「サードパーティ・クッキー」と「追跡防止」
ChromeやSafariなどの最新ブラウザは、プライバシー保護のために外部スクリプト（widgets.js）の通信をブロックすることがあります。特に広告ブロック拡張機能を入れている場合、表示される確率は極端に低くなります。
- 根拠: X公式のデベロッパーヘルプでも、ブラウザのセキュリティ設定がウィジェット実行に干渉する可能性が示唆されています。
- 情報元: X Developer Platform – Embedded Timelines Overview
APIの仕様変更とレートリミット
XのAPI有料化に伴い、公式の無料埋め込みツールであっても、同一IPからのリクエスト過多やデータ取得制限（レートリミット）により、一時的に遮断されることがあります。
2026年の今とるべき対策
公式機能でのタイムライン埋め込み表示が上手くいかない場合は、以下のような代替案を検討することをお勧めします。
| 対策案 | メリット | デメリット |
|---|---|---|
| 個別ポストを埋め込む | 無料で簡単 | 複数の投稿を見せるにはWEBサイトのデザインを調整する必要がある |
| ボタン形式で埋め込む | ボタン形式では安定的に埋め込むことができる | Xアカウントへ誘導するCTAでしかなく投稿はウェブサイトに表示されない |
| 外部ツールの利用 | 安定的な表示、高クオリティなデザインで投稿を表示できコンバージョンに寄与する | 利用料金がかかる |
| スクショ画像＋リンクに切り替え | サイトの読み込みが非常に速くなる。 | リアルタイム性は失われる。他人の投稿のスクショは著作権の問題が発生する |
公式機能を使ってXの投稿をボタンとして埋め込み表示する方法
フォロー ボタンは、ウェブサイトの訪問者がページを離れることなく、ワンクリックで特定のXアカウントをフォローできるようにするための機能です。タイムラインが表示されない場合の代替手段しても使える方法です。
フォローボタンの設置手順
- x publishを開く: x publish にアクセスします。
-
ボタンの種類を選択: 「Twitter Buttons」から「Follow Button」やHashtag buttonを選択します。
- アカウント情報を入力: フォロー対象とするアカウント名（@から始まるユーザー名）やハッシュタグを入力します。
- オプションの設定（任意）: set customization optionsをクリックし、ユーザー名の表示・非表示や、ボタンのサイズ（デフォルトまたは大）などを調整できます。
- コードをコピー: 生成された埋め込みコードをコピーします。
-
サイトへ貼り付け: wordpressなどCMSの「カスタムHTML」ブロックに、取得したコードを貼り付けます。
ボタンはこのように表示されます。
Follow @esjptester
WEBサイトにXポストを埋め込み表示するなら外部ツールの利用がベスト
ここまで公式機能によるXのポストやタイムラインの埋め込み方法をご紹介してきましたが、さまざまな制限があることもお伝えしました。
もし皆さんがコーポレートサイトやキャンペーンサイトなどで「確実な表示」と「高い訴求力」を求めるなら、多機能な外部ツールの導入を検討してみてください。
EmbedSocial のような外部ツールはAPI経由でデータを取得・保存するため、確実に投稿を表示できるのが最大の強みです。
X公式API連携ツールEmbedSocialで実現できること
中でも国内外で豊富な実績を持つAI UGCツールEmbedSocialは、業界初の生成AIによるウィジェットデザイン機能と搭載した最新鋭の埋め込みツールです。誰も簡単にプロ仕様のX投稿ウィジェットをWEBサイトに表示することができます。
| 実現できること | 特徴 |
|---|---|
| AIによるプロ仕様のセクション作成 | 投稿を活用したヒーローセクションやCTAセクションまで作成可能。100種類以上の豊富なテンプレートから最適なデザインを簡単作成。 |
| 投稿のショッパブル化などの付加価値追加 | Xを活用したヒーローセクションやCTAセクションを作成可能。さらに投稿のショッパブル化など機能追加ができる。 |
| 自動更新とメンテナンスフリー | 一度設定すれば、新規ポストを自動で取得し続けるため、貼り替えの手間がありません。 |
| ハッシュタグ・キャンペーンへの対応 | 特定のアカウントだけでなく、ハッシュタグに基づいた投稿収集も可能。UGC（ユーザー生成コンテンツ）の活用に最適です。 |
| 投稿の取捨選択（モデレーション） | 公開する内容を選別できるため、サイトのブランドイメージに合ったタイムラインを構築できます。 |
AI UGCツールEmbedSocialによるXタイムライン表示デザイン例
EmbedSocialはAI UGCツールとして、XをはじめとするSNS投稿をWEBサイトに埋め込み表示したいとお考えの企業様に、国内外で多くご利用いただいております。ここでは、Xのアカウントの投稿を、どのようなデザインで埋め込み方ができるのかいくつかのテンプレートを紹介します。
EmbedSocialユーザーなら、Xアカウントを接続して、デザインテンプレートを選ぶだけで、ここにあるような高クオリティなX投稿表示が可能になります。
EmbedSocialのデザインテンプレートページでは、より多くのデザインを確認できます。
Xタイムラインメディアカルーセル
ソーシャルメディアカルーセルは、企業のソーシャルメディア（XやInstagramなど）の投稿を、ウェブサイト上で視覚的に最も魅力的でインタラクティブな方法で紹介するために設計されています。
ヘッダーではコミュニティへの信頼性を示し、中央のカルーセルでは、動画コンテンツ（リールなど）が自動で再生され、再生完了後に次のカードへ自動的にスライドする高度な動的機能（アニメーション）を備えています。これにより、訪問者のエンゲージメントを高めながら、製品情報やコンテンツを途切れることなく提示し、インスピレーションから購入への動線を構築するのに最適です。
Xタイムラインポラロイド風グリッド
ポラロイド風・フォトグリッドは、デジタルな写真を温かみのあるレトロなインスタント写真風に変換し、ウェブサイトに懐かしくも新しいビジュアルエッセンスを加えるテンプレートです。
各画像に白いフレームと絶妙なドロップシャドウを施すことで、まるで壁に写真をピンで留めたような立体的なギャラリーを構築し、ブランドの親しみやすさとクリエイティビティを強調します。
Xタイムラインカードスライダー
画像カードフィードは、企業のブログ投稿、ルックブック、またはソーシャルメディアのコンテンツを、没入感のあるカルーセル形式でウェブサイトに統合するために設計されたテンプレートです。
このウィジェットは、画像、簡潔なキャプション、そして発信元アカウント情報を個別の「カード」として提示します。中央のカードがハイライトされ、左右のカードが背景にフェードアウトするような視覚効果により、訪問者の注意を最も重要なコンテンツに引きつけます。ファッション、ライフスタイル、製品紹介など、高品質な写真が主役となるサイトに最適です。
Xタイムライン活用CTAセクション
このテンプレートは、顧客の投稿や自社の投稿（画像/動画）を組み合わせた強力な社会的証明（Social Proof）セクションを丸ごとウェブサイトに埋め込めるように設計されています。
左側の固定されたヘッダーエリアでブランドのメッセージとコンバージョンページへの行動喚起をしつつ、右側のグリッドが自動で上から下へスクロールするダイナミックなアニメーション（無限スクロール効果を想定）により、訪問者に途切れることなく豊富な顧客が投稿したコンテンツや自社投稿を提示し続けます。静的なレビューページとは異なり、生き生きとした顧客体験を表現できます。
Xソーシャルメディアタイムライン
ソーシャルメディアタイムラインは、SNS上の投稿をスマートフォンのタイムラインを眺めているような感覚で表示できる、縦長フォーマットのウィジェットです。ウェブサイトのサイドバーなどに配置することを想定して、コンパクトに要素がまとめられています。
最新の投稿が自動で上から下へスクロールするダイナミックなアニメーションにより、常に新しい情報が目に飛び込み、サイトに「今この瞬間の活気」をプラスします。
Embedsocialの利用方法
ご覧いただいたデザインは、一度EmbedSocial とXアカウントを接続すれば、1クリックで異なるデザインをお試しいただけます。細かな調整はバイブコーディング（ノーコード、プロンプト入力）で行うことができます。
EmbedSocialを使ったXのタイムライン埋め込みの手順はとてもシンプルです。
- Embedsocialアカウントにログインするか、アカウントを開設します。（無料7日間トライアルをご活用ください。）
- XアカウントとEmbedSocialをガイドに従って接続・します
- AIデザインテンプレートを選びます
- バイブコーディングでデザインを調整し、埋め込み用のコードをコピーします。
- お使いのWEBビルダーに埋め込みコードを貼り付けるとXが表示されます。
一度設定した後は、新しい投稿が追加されるとWEBサイト上でも自動で更新されます。（自動更新を止めることもできます。）
EmbedSocialではX投稿の埋め込みはプレミアムプラン以上でご利用いただけます。7日間無料で機能をお試しいただける無料トライアル期間（いつでもキャンセル可能）をご提供していますので、ぜひ一度お試しください。
X（旧Twitter）をウェブサイトに埋め込む際の注意点
X（旧Twitter）の投稿やタイムラインを自社サイトやホームページに埋め込む際、単に埋め込みコードを貼り付ければ完了というわけではありません。X側の仕様変更やプライバシー保護の強化により、あらかじめ押さえておくべき重要な注意点がいくつか存在します。
閲覧者の「ログイン状態」に依存する
現在、公式の埋め込みコード（widgets.js）を使用した場合、閲覧者がブラウザでXにログインしていないと、タイムラインが正常に表示されない（または青いリンク文字だけになる）という仕様上の制限があります。
- 対策: ログインの有無に関わらず表示させたい場合は、API経由でデータを取得する外部ツール（EmbedSocial等）の導入を検討してください。
ページの読み込み速度（SEOへの影響）
埋め込みコードを多用すると、外部スクリプトの読み込みによってウェブサイトの表示速度が低下することがあります。これはGoogleのコアウェブバイタル指標に影響し、SEO評価を下げる要因にもなり得ます。
- 対策: 必要なポストのみを厳選して埋め込むか、遅延読み込みの設定を検討しましょう。EmbedSocialなどの専用ツールは、遅延読み込み等のオプションも組み込まれています。
著作権と利用規約の遵守
Xの投稿内容を埋め込むことは公式機能として許可されていますが、スクショ（画像）での掲載は著作権侵害のリスクがあります。必ず公式の埋め込みコードまたはAPI連携ツールを使用し、規約に沿った形で表示させることが重要です。
非公開アカウント（鍵垢）の制限
x アカウントが非公開に設定されている場合、その投稿やタイムラインを埋め込むことはできません。また、一度埋め込んだ後でも、元の投稿が削除されたり、アカウントが非表示設定になると、サイト上からもコンテンツが消滅します。
ブラウザの保護機能によるブロック
SafariやChromeの「トラッキング防止機能」や広告ブロック機能が有効な場合、Xのウィジェットがスクリプトエラーを起こし、正しく表示されないことがあります。
- 対策: 重要な告知などは埋め込みだけに頼らず、テキストやリンクでも併記するのが親切なサイト設計です。
まとめ：自社サイトに最適なX埋め込み方法を選ぼう
本記事では、X（旧Twitter）のポストやタイムラインをウェブサイトに埋め込む方法から、表示されない場合の対処法まで詳しく解説しました。
公式の埋め込みコードを利用する方法は手軽で無料ですが、現在のXの仕様では閲覧者のログイン状態に左右されるなど、ビジネス用途では安定性に不安が残るのも事実です。ホームページの信頼性を保ち、確実に情報を届けるためには、状況に応じた最適な手段を選択することが重要です。
確実な表示と運用効率を求めるなら「EmbedSocial」
企業のコーポレートサイトやキャンペーンページにおいて、より高度な活用や安定した表示を実現したい場合は、外部ツールである「EmbedSocial」の利用がおすすめです。
- 高い信頼性: 世界30万ユーザー以上に利用されており、ISO27001認証取得や99.9%のシステム稼働率（2024年4月時点）を誇ります。
- 充実のサポート: 日本法人が管理画面からカスタマーサポートまで全て日本語で提供。サポート満足度は平均95%以上の評価をいただいています。
- 柔軟なカスタマイズ: 公式機能では難しい豊富なレイアウト変更や、ログイン不要の表示、ハッシュタグ収集などが可能です。
「自社サイトでXをもっと効果的に活用したい」「不具合のない安定した表示環境を整えたい」とお考えの方は、ぜひお気軽にお問い合わせください。貴社のニーズに合わせた最適な活用方法をご提案いたします。
X（旧Twitter）埋め込みに関するよくある質問（FAQ）
Q1. 埋め込んだタイムラインが「Tweets by —」という文字だけで表示されません。
A. 最も多い原因は、閲覧者がブラウザでXにログインしていないことです。現在のXの仕様では、非ログイン状態のユーザーに対してコンテンツの表示を制限している場合があります。また、ブラウザの広告ブロック機能やトラッキング防止機能がスクリプトを遮断している可能性も考えられます。
Q2. 鍵垢（非公開アカウント）の投稿も埋め込むことはできますか？
A. いいえ、できません。非公開設定のアカウントの投稿やタイムラインは、公式の埋め込み機能では表示されない仕様になっています。ウェブサイトに表示させたい場合は、アカウントの公開設定を「公開」にする必要があります。
Q3. 埋め込みのデザイン（色やサイズ）を変更することは可能ですか？
A. はい、可能です。公式の x publish にある「set customization options」から、テーマを「Light」または「Dark」に変更したり、表示する高さや横幅をピクセル単位で指定したりできます。
Q4. 複数の投稿をまとめて表示させる「コレクション」が作れません。
A. 現在、Xの公式ツールではコレクションの新規作成機能のサポートが事実上終了しています。特定の投稿をまとめて表示したい場合は、公式の「リスト機能」を作成してそのURLを埋め込むか、外部のSNS連携ツール（EmbedSocialなど）を利用して特定の投稿をピックアップする方法が推奨されます。
Q5. 埋め込みが表示を遅くしてSEOに悪影響を与えませんか？
A. 外部スクリプト（widgets.js）を読み込むため、ページ全体の読み込み速度（LCPなど）に多少の影響を与える可能性はあります。表示速度を優先する場合は、ページの下部に設置する、あるいはJavaScriptの遅延読み込み（Lazy Load）などの対策を行うのが一般的です。