プラグインなしでブログにX(旧Twitter)のポストを埋め込む方法

Twitter(ツイッター)ロゴ

気になるポストをブログで紹介したいのに、「専用プラグインを入れないと無理なのかな」と手が止まったことはありませんか。私もWeb制作を長年やってきて、SNS連携まわりの相談はしょっちゅう受けます。なかでも多いのが「Xのポストを記事に貼りたいだけなんだけど、何をどう触ればいいのか分からない」という声です。

結論から言うと、X(旧Twitter)のポストはプラグインを一切使わずにブログへ埋め込めます。公式が用意している埋め込みコードをコピーして貼るだけなので、HTMLやCSSの知識もほとんど要りません。昔ながらの「ブログパーツ」を探したり、新しいプラグインを入れて管理画面を重くしたりする必要もないのです。

この記事では、Xのポストをプラグインなしでブログに埋め込む手順を、公式コードの取得方法・WordPressブロックエディタでのURL貼り付け・うまく表示されないときの対処法まで、初心者の方にも分かるように一通り解説します。

かつてTwitterがXへ名称変更したころは埋め込みが一時的に不安定になり、私も実案件で表示が崩れて冷や汗をかいた経験があります。そのあたりの注意点や、ポストが消されたときに起きること、さらに1記事に複数貼ると表示が重くなる問題への対処も含めて、2026年時点の最新の状況に合わせてまとめました。読み終えるころには、気になるポストを自分のブログにサッと貼れるようになっているはずです。まずは一番ベーシックな「公式コードを貼る方法」から確認していきます。

Xのポストをプラグインなしで埋め込む基本の流れ

Xのポストをブログに埋め込む方法は、大きく分けて2つあります。1つはX公式が発行する「埋め込みコード」をコピーして貼る方法、もう1つはWordPressのブロックエディタにポストのURLを貼り付けるだけの方法です。

どちらもプラグインは不要で、ブログパーツのような外部サービスに頼る必要もありません。仕組みとしては、Xが配布しているwidgets.jsという小さなスクリプトが、貼り付けたコードを自動でツイート風の見た目に変換してくれる、というものです。YouTube動画を貼るのとほぼ同じ感覚だと思ってもらえれば大丈夫です。

まずは確実で応用も効く「公式の埋め込みコードを取得する方法」から説明します。背景色や言語などの細かい調整もできるので、本格的に使うならこちらを覚えておくと便利です。

X公式の埋め込みコードを取得する手順

埋め込みコードは、Xの各ポストから数クリックで取り出せます。手順は次のとおりです。

まず、埋め込みたいポストの右上にある(その他)メニューをクリックします。メニューのなかに「ポストを埋め込む」(Embed post)という項目があるので、これを選びます。

Twitterのツイートをブログに引用(埋め込み)する

すると、X公式の埋め込みコード発行ページであるpublish.x.comに移動します。以前はpublish.twitter.comでしたが、現在はpublish.x.comに統一されており、古いURLにアクセスしても自動で転送されます。

このページに該当ポストのプレビューと埋め込みコードが表示されるので、「Copy Code」ボタンを押してコードをコピーすれば完了です。なお、ポストのURL(例:https://x.com/ユーザー名/status/数字)を直接publish.x.comに貼り付けても、同じように埋め込みコードを発行できます。ポスト側のメニューが見当たらないときは、この方法を覚えておくと安心です。

Twitterのツイートをブログに引用(埋め込み)する

取得できる埋め込みコードは、おおむね次のような形になっています。

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">ここにポストの本文が入ります</p>
  &mdash; ユーザー名 (@account)
  <a href="https://twitter.com/account/status/123456789">日付</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ポイントは2つです。1つ目は、本体がclass="twitter-tweet"を付けたblockquote(引用ブロック)でできていること。2つ目は、その下にwidgets.jsを読み込むscriptタグが付いていることです。このblockquotescriptがセットになって、はじめてポストがきれいに表示されます。

ちなみにスクリプトのURLはplatform.twitter.com/widgets.jsのままで、X時代になった今も問題なく動作します。公式の開発者向けドキュメントでも引き続きこのURLが案内されているので、書き換えずにそのまま使って大丈夫です。

出典:X for Websites(X Developer Platform 公式ドキュメント)

WordPressのブロックエディタに埋め込む方法

取得した埋め込みコードをWordPressに貼る場合は、ブロックエディタの「カスタムHTML」ブロックを使うのが確実です。段落ブロックにそのまま貼ると、コードがただの文字列として表示されてしまうことがあるためです。

ブロック追加の「+」から「カスタムHTML」を選び、コピーしたコードを貼り付けるだけ。プレビューに切り替えると、実際の表示を確認できます。実際に貼ると、このように表示されます。

もっと手軽に済ませたいなら、コードを取得せずにポストのURLを貼るだけ、という方法もあります。WordPressにはoEmbedという仕組みがあり、Xは対応サービスとして登録されているので、ブロックエディタにポストのURLを貼り付けるだけで自動的にポストの形に変換されます。

具体的には、新しいブロックの入力欄にXのポストのURLをそのまま貼り付けるか、ブロック検索で/embedと打って「埋め込み」ブロックを選び、URLを入力して「埋め込み」ボタンを押すだけ。これだけでプレビューがポスト表示に切り替わります。背景色や言語の細かい調整までは要らない、という場合はこのURL貼り付けが一番ラクです。

1記事に複数のポストを貼るときは、widgets.jsscriptタグが何度も読み込まれて表示が重くなりがちです。気になる場合は、各コードからscriptタグを削り、ページのどこか1か所だけに残しておくと軽くできます。URL貼り付け(oEmbed)の場合はWordPress側でうまく処理してくれるので、基本的に気にしなくて構いません。

出典:WordPressにTwitterを埋め込みする方法を解説!(ConoHa WING公式ブログ)

関連記事:Google+終了後のSNSシェアボタン設置方法【X・Facebook・LINE対応】

埋め込んだポストが表示されないときの対処法

「貼ったのにポストが表示されない」「ただの文字の塊やリンクになってしまう」というトラブルは、けっこうあります。原因はだいたい決まっているので、上から順に確認してみてください。

script(widgets.js)が抜けていないか

埋め込みコードを手で貼ったのに見た目が変換されないときは、widgets.jsscriptタグが一緒に貼られていない可能性が高いです。blockquoteだけだと引用文がそのまま出るだけなので、必ずscriptタグまでセットで貼られているか確認しましょう。

oEmbedのキャッシュが残っていないか

URL貼り付け(oEmbed)でうまくいかず、ブログカードのようなリンク表示になってしまう場合は、WordPress側に古い変換結果のキャッシュが残っていることがあります。いったんブロックを削除して貼り直す、別のポストで試してみる、といった切り分けが有効です。

ポスト自体が消えていないか・非公開でないか

意外と見落としがちなのが、元のポスト側の問題です。埋め込みは元のポストを参照して表示する仕組みなので、ポストが削除されたり、アカウントが非公開(鍵アカウント)・凍結されたりすると、埋め込みも一緒に表示されなくなります。

私も以前、取材記事に他人のポストを埋め込んでいたら、後日そのポストが削除されていて空欄になってしまった、ということがありました。後から差し替えがきかない他人のポストを軸に記事を組み立てるのは、こうしたリスクがある点は頭に入れておくと安心です。大事なポストは、念のためスクリーンショットも残しておくと保険になります。

出典:X(旧Twitter)のポスト・タイムラインの埋め込み方(株式会社サングローブ)

Twitter→Xの仕様変更と、これからの注意点

埋め込みを使ううえで知っておきたいのが、TwitterからXへの名称変更や、たびたびの仕様変更によって、埋め込みの挙動が過去に不安定になったことがある点です。

2023年にTwitterがXへとブランド名を変え、ドメインもtwitter.comからx.comへ移行しました。この前後は埋め込みやAPI周りの仕様変更が続き、私の手元でも一時期、埋め込んだポストの読み込みが妙に遅くなったり、表示が崩れたりした時期がありました。最終的には公式のwidgets.jsが引き続き機能し、古いコードもおおむねそのまま動いて落ち着いた、という流れです。

裏を返せば、Xのような外部サービスに依存する埋め込みは、相手側の都合で挙動が変わりうる、ということでもあります。今は安定していますが、今後また仕様が変わる可能性はゼロではありません。記事の中身が埋め込み頼みにならないよう、ポストの要点は本文中にもテキストで書いておくと、万一表示されなくなっても記事として成立します。これは長く記事を残すうえで効いてくる、地味だけど大事なコツです。

出典:WordPressにTwitterを埋め込みする方法を解説!(ConoHa WING公式ブログ)

まとめ:公式コードを貼るだけ、プラグインは要らない

Xのポストをブログに埋め込むのに、専用プラグインも特別な知識も要りません。やることはシンプルで、ポストのメニューから「ポストを埋め込む」を選び、publish.x.comで発行された埋め込みコードをコピーして貼る。これだけです。

WordPressなら「カスタムHTML」ブロックに貼るのが確実ですし、細かい調整が要らなければ、ブロックエディタにポストのURLを貼るだけでも自動で表示してくれます。コードの中身はclass="twitter-tweet"blockquotewidgets.jsを読み込むscriptのセット。platform.twitter.com/widgets.jsはX時代の今もそのまま動くので、難しく考えず公式コードをそのまま使えば大丈夫です。

うまく表示されないときは、まずscriptタグが抜けていないか、次にoEmbedのキャッシュ、そして元のポストが削除・非公開になっていないか——この順でチェックすれば、たいていは解決します。

最後に1つだけ実体験から言うと、他人のポストはいつ消えるか分かりません。Twitter→Xの移行時のように仕様が変わることもあります。だからこそ、埋め込みに頼り切らず、ポストの要点は本文にもテキストで残しておく。これをやっておくと、数年後に読み返しても崩れない記事になります。気になるポストがあったら、まずは1つ、公式コードを貼って試してみてください。一度やれば、あとはコピペ作業で済みますよ。