Twitter（X）のツイートを短縮コードで楽々埋め込み！長いコードを毎回取得するのが面倒な人向けテクニック

web技！
サイト作成の困りごとをサクッと解決
所長

Twitter（X）のツイート（ポスト）をサイトに埋め込むのって楽しいですよね。
しかしいちいちパブリッシュへ移動して埋め込みコードを取得するのがめんどくさい！
そんな面倒くさがりの人におすすめなのが『埋め込みコードの短縮』です。
テンプレートを使いまわしすれば、ツイートのid（urlの一部）をコピペするだけで簡単に埋め込みができるようになります。
つまりパブリッシュへ移動して埋め込みコードを取得する一連の手間がほぼ無くなるのです。
ページに複数のツイートを埋め込んだり、うちの更衣室のように定期的に内容を更新するようなページを運用する場合に絶大な威力を発揮しますよ。
ちなみにこちらはタイムラインではなく個別ツイート（ポスト）の埋め込みについてのお話ですのでご注意ください。

ぽんきちくん でてきたコードをそのままありがたく使わせてもらうっていう謙虚さが、所長にはたりないと思うの。

注：今後イーロンの気分によって挙動が変化、最悪使用できなくなる可能性があります。あくまで参考程度に留めていただきますようお願いします。

もくじ

１. Twitter（X）埋め込みのおさらい
２. ツイート（ポスト）を短縮コードで埋め込む
2-1.通常の埋め込みコード
2-2.短縮コードと使い方
2-3.注意点
2-4.応用
３. Twitter（X）のお役立ち記事一覧

1.Twitter（X）埋め込みのおさらい

1-1.

埋め込みたいツイート（ポスト）のurlをコピー。

1-2.
Xのパブリッシュ1

パブリッシュへ移動。
ちなみにパブリッシュのページは2種類あります。
旧：https://publish.twitter.com
新：https://publish.x.com（⇦ こちらを使う）
サイトの動き、吐き出される埋め込みコードともに同等の挙動を示すと感じていますが、個別ツイートを埋め込む場合公式ヘルプからはXの方へリンクが張ってあります。
ですので、Xのパブリッシュを使用するのが無難です。

1-3.
Xのパブリッシュ2

「X URLを入力してください／Enter a X URL」
と書いてある部分に先ほどのURLを貼り付けてエンター押下もしくは矢印をクリックすると、
・埋め込みビデオ／Embedded Video
・埋め込み投稿／Embedded Post
の選択ができるようになります。
どちらかを選んで表示されたコードをコピーすれば埋め込み準備は完了です。

2.ツイート（ポスト）を短縮コードで埋め込む

2-1.通常の埋め込みコード

まず通常の埋め込みコードはこちら。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">7月のご来場特典アップしました云々…<a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a></p>— 米子力研究所 (@beishiryoku_Exp) <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

別に理解せずとも良いのですが、わかりやすくする為に改行などで整理すると以下のようになります。 

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">7月のご来場特典アップしました云々…
    <a href="https://t.co/lB5LP1GDXz">pic.twitter.com/lB5LP1GDXz</a>
  </p>
  — 米子力研究所 (@beishiryoku_Exp) 
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798?ref_src=twsrc%5Etfw">June 30, 2025</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote>タグで囲われた部分を、最終行（紫色の部分）のリンク先に置いてあるスクリプトで制御してブラウザにレンダリングしています。
ピンク色の部分がツイート毎に、水色の部分がXのアカウント毎に固有の情報です。
これら固有の情報をいちいち手で打ち込むのも大変ですし、なにより圧縮urlが混じっていますので、このまま運用するならさすがにXのパブリッシュへ移動して、埋め込みコードをいちいち取得するほかありません。

2-2.短縮コードと使い方

ここからが今回の目玉！
短縮コードは次のとおりです。 

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798"></a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

たったこれだけです。
水色の部分には自分のアカウント名から@以下の文字を入れてください。
ピンク色の部分にはツイート（ポスト）のurlから、 

https://x.com/beishiryoku_Exp/status/1939806149231935798

ピンクの部分をコピーして貼り付けます。
これが最短！
もうこれ以上は何をどうやっても短くなりません。

2-3.注意点

念のため注意点があります。
基本的に文字をはさまない<a>タグというのはSEOの観点からお勧めできません。
説明のないリンクとしてPageSpeed Insightsのスコアが4ポイントぐらい下がります。
つまりGoogleからの評価が下がる ⇨ ページの検索順位も下がってしまうのです。
なので少しだけ妥協して、 

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1939806149231935798">米子力研究所によるXのポスト</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こんなふうに簡単な説明文を間に挟んでおくと良いでしょう。

2-4.応用

あとは実際に使うだけです。
単独のツイート埋め込みで使用しても良いのですが、何と言ってもこの短縮コードが力を発揮するのは沢山のツイートを埋め込むような使い方をするときです。
ツイート詳細画面のurlからid部分だけコピーしてきてガンガン貼り付けちゃってください。
その場合スクリプト（widgets.js）の部分は最後の1つだけ残すのがミソです。
例としてはこんなかんじです。 

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1931290036890140907">米子力研究所によるXのポスト</a>
</blockquote>

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1928572127491534854">米子力研究所によるXのポスト</a>
</blockquote>

<blockquote class="twitter-tweet">
  <a href="https://twitter.com/beishiryoku_Exp/status/1931471228734263674">米子力研究所によるXのポスト</a>
</blockquote>

<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

cssを少しだけ工夫して並べるてやるとこんな感じです。
具体的な方法についてはまたの機会に。

以上、Twitter（X）の個別ツイートについて、埋め込みコードを短縮してラクする方法をご説明しました。
今回は以上です。

それではさようなら(^-^)ﾉｼ