【保存版】X（旧Twitter）の埋め込みをJavaScriptで実装する方法

〜公式Widgetの使い方から動的埋め込みまで徹底解説〜

こんにちは。今回は「X（旧Twitter）のポスト（ツイート）」をあなたのWebサイトやアプリに埋め込む方法について、JavaScriptでの実装方法を丁寧に解説します。

「HTMLに貼るだけじゃなくて、動的にURLを変えて埋め込みたい」
「ReactやNext.jsのようなSPA（シングルページアプリ）でも動かしたい」
「複数のXポストを一括で表示したい」

そんなニーズに応える、実用的で再利用可能な埋め込み構成を学べる内容になっています。

---

🔰 1. X（旧Twitter）の埋め込みとは？

Xは、ポスト（旧ツイート）を外部のサイトに表示できるように、公式の埋め込み用JavaScriptライブラリ（widgets.js） を提供しています。

例えば、以下のようなコードをHTMLに貼り付けるだけで1つのポストを埋め込むことができます：

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/username/status/1234567890123456789"></a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

✅ これは静的HTML向けのやり方です。
✅ 複数表示したり、JSで制御したい場合は「JavaScriptによる埋め込み」が有効です。

---

⚙️ 2. 基本の埋め込み構成（JavaScript編）

ここからは 複数のXのポストをJavaScriptで動的に埋め込む方法 を紹介していきます。

✅ 最小構成

<div id="x-embed-container"></div>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
  const postUrl = 'https://twitter.com/username/status/1234567890123456789';
  const container = document.getElementById('x-embed-container');

  window.twttr.ready(function (twttr) {
    twttr.widgets.createTweet(
      postUrl.split('/').pop(), // ポストIDだけを渡す
      container
    );
  });
</script>

🔍 解説

行	説明
script src	X公式のウィジェットスクリプト（widgets.js）
createTweet(id, container)	指定のDOMにポストを埋め込む関数
postUrl.split('/').pop()	URLからステータスID（19桁の数値）だけ抽出

---

🧩 3. 複数ポストをループで表示する

<div id="x-embed-container"></div>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<script>
  const tweetUrls = [
    'https://twitter.com/user1/status/1111111111111111111',
    'https://twitter.com/user2/status/2222222222222222222',
    'https://twitter.com/user3/status/3333333333333333333'
  ];

  const container = document.getElementById('x-embed-container');

  window.twttr.ready(function (twttr) {
    tweetUrls.forEach(url => {
      const wrapper = document.createElement('div');
      container.appendChild(wrapper);

      const id = url.split('/').pop();
      twttr.widgets.createTweet(id, wrapper);
    });
  });
</script>

✅ これで複数のポストが縦に順番に表示されます。

---

⚛️ 4. React（Next.js）で使うには？

Next.jsなどのSPAでは、ページが遷移するたびに widgets.js がリロードされないため、以下のように対処します。

'use client';
import { useEffect } from 'react';

type Props = {
  urls: string[];
};

export default function XEmbed({ urls }: Props) {
  useEffect(() => {
    const scriptId = 'x-embed-script';

    if (!document.getElementById(scriptId)) {
      const script = document.createElement('script');
      script.id = scriptId;
      script.src = 'https://platform.twitter.com/widgets.js';
      script.async = true;
      document.body.appendChild(script);
    } else if (window.twttr && window.twttr.widgets) {
      window.twttr.widgets.load();
    }
  }, [urls]);

  return (
    <div id="x-embed-container">
      {urls.map((url, i) => (
        <blockquote
          key={i}
          className="twitter-tweet"
          data-lang="ja"
        >
          <a href={url}></a>
        </blockquote>
      ))}
    </div>
  );
}

✅ ポイントは widgets.js を 二重に読み込まないようにすることです。

---

💡 5. よくあるエラーとその対処法

エラー	原因	対処法
"Cannot read property 'widgets' of undefined"	twttr オブジェクトがまだ読み込まれていない	window.twttr.ready() を使う or widgets.js の読み込み後に処理を実行
ポストが表示されない	URLが無効、非公開アカウント、削除済みなど	URLを確認し、公開中のものを使用する
リロードや動的切り替えで表示されない	SPA（React等）では再描画時に widgets.load() が必要	useEffect内で再度 .load() を呼ぶ

---

🧠 6. 応用：Xポストをまとめて一覧表示するUI

HTML側：

<div id="x-embed-grid" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;"></div>

JavaScriptで表示：

window.twttr.ready(function (twttr) {
  const container = document.getElementById('x-embed-grid');
  urls.forEach(url => {
    const div = document.createElement('div');
    const id = url.split('/').pop();
    twttr.widgets.createTweet(id, div, { align: 'center' });
    container.appendChild(div);
  });
});

✅ カラム形式にして、おしゃれにプロフィールに並べる構成です。

---

🔐 7. 注意：API制限とレート制限について

2023年以降、X社の方針により埋め込みAPIの挙動にも多少の制限が導入されています。

• 埋め込み自体は無料・APIキー不要で利用可能（2024年現在）
• ただし「ツイート数が非常に多い」「高頻度で切り替える」場合、制限の対象になる可能性あり
• 非公開・鍵アカウントのポストは表示されません

---

📌 まとめ

内容	ポイント
静的HTMLに埋め込み	<blockquote> + <script src> で完了
複数表示	JavaScriptで createTweet() をループ
React/Next.js	widgets.js の読み込みと再描画に注意
SPAでの再読み込み	.load() を忘れずに呼び出す
デザイン調整	GridやFlexboxで整えると◎

---

📝 最後に

X（旧Twitter）の埋め込みは、使い方を少し工夫するだけでプロフィールページの信頼感やアクティビティの可視化につながります。
Procomのようなプロフィールまとめサービスとも相性抜群です✨

もし「動的に表示」「プロフィールURLから自動表示」「複数ユーザー対応」などの応用実装をしたい場合は、お気軽にご相談ください！