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