Twitterの埋め込みを動的に追加する

Twitterのツイートをサイト上に埋め込む際、静的なページであれば生成されたコードを貼り付けるだけでよいですが、SPAなどの場合はうまく表示されないことがあります。
今回はSPAでの使用を想定して、Twitterの埋め込みを動的に追加する方法を試してみます。

サンプルコード

まずは普通に埋め込む方法です。
埋め込みたいツイートのページを表示して、右上から「ツイートを埋め込む」を選択します。

表示されたコードをコピペすればOKです。
今回の場合下記のようなコードになりました。(見やすいように改行を追加しています。)

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">&#x1f31f;OP主題歌MVプレミア公開&#x1f31f;<br><br>TVアニメ【<a href="https://twitter.com/hashtag/%E6%8E%A8%E3%81%97%E3%81%AE%E5%AD%90?src=hash&amp;ref_src=twsrc%5Etfw">#推しの子</a>】<br>オープニング主題歌『アイドル』<br>♪ <a href="https://twitter.com/hashtag/YOASOBI?src=hash&amp;ref_src=twsrc%5Etfw">#YOASOBI</a> <br>Music Videoがこのあとプレミア公開開始。」<br><br>TVアニメアニメーションチームがこのMVの為だけに制作した映像&#x2728;<br>是非お見逃しなく。<br><br>▼URLはこちら▼<a href="https://t.co/SziDS4XGnW">https://t.co/SziDS4XGnW</a></p>&mdash; 『【推しの子】』TVアニメ公式 (@anime_oshinoko)
  <a href="https://twitter.com/anime_oshinoko/status/1646174427262996482?ref_src=twsrc%5Etfw">April 12, 2023</a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

このコードを埋め込むと、最後の行のscriptによってblockquoteがiframeに置き換わり、ツイートの埋め込みが行われます。
ツイート埋め込みのデモページ

生成されたコードだと汎用的に使いにくいので、埋め込みコードを必要な範囲のみに抜粋してみます。

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

このコードでも埋め込みを行えました。
aタグのhref内にあるTwitterアカウントとツイートID部分を変更することで、他のツイートの埋め込みにも使えます。
埋め込みコード変更のデモページ

最後に動的に追加する方法です。
今回はボタンクリック時に追加されるようにしてみます。

<button id="add">追加</button>
<div id="wrapper"></div>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

#wrapper内に埋め込みのタグを追加する想定です。
まずはテストとして、あらかじめscriptを読み込んでいる状態でblockquoteのみ動的に追加を試してみます。

document.querySelector("#add").addEventListener('click', function() {
	// 要素の追加
	document.querySelector("#wrapper").innerHTML = `
		<blockquote class="twitter-tweet">
		  <a href="https://twitter.com/anime_oshinoko/status/1646174427262996482"></a>
		</blockquote>
	`;
});

この場合、blockquoteがiframeに置き換わりません。
埋め込みをボタンクリック時に追加するデモページ1

次にblockquoteタグと一緒にscriptも動的に埋め込むようにしてみます。

document.querySelector("#add").addEventListener('click', function() {
	// 要素の追加
	document.querySelector("#wrapper").innerHTML = `
		<blockquote class="twitter-tweet">
		  <a href="https://twitter.com/anime_oshinoko/status/1646174427262996482"></a>
		</blockquote>
	`;

	var script = document.createElement('script');
	script.src = 'https://platform.twitter.com/widgets.js';
	document.querySelector("#wrapper").appendChild(script);
});

この場合は正しく埋め込みを行えました。
埋め込みをボタンクリック時に追加するデモページ2
デモ内で試していますが、同じように複数回埋め込みを行っても表示できていそうでした。

サイト構成によってはこの対応でも問題ないかもしれませんが、SPAの場合読み込みタイミングなどの影響でうまく表示できないことがあります。
その対応として、以下のように変更します。

document.querySelector("#add").addEventListener('click', function() {
	// 要素の追加
	document.querySelector("#wrapper").innerHTML = `
		<blockquote class="twitter-tweet">
		  <a href="https://twitter.com/anime_oshinoko/status/1646174427262996482"></a>
		</blockquote>
	`;

	// Twitterのウィジェットを初期化
	twttr.widgets.load();
});

ポイントは10行目の twttr.widgets.load(); で、DOM生成後に実行することで、ページ内にあるウィジェットを初期化します。
埋め込みをボタンクリック時に追加するデモページ