埋め込みツイートをページ読み込み後に再初期化する

SPAでの埋め込みツイートの初期化についてのメモです。

ツイートの埋め込みの基本

Webページでツイートを埋め込むには、下記のようなHTMLを挿入したうえで…

<blockquote class="twitter-tweet"><a href="ツイートのURL"></a></blockquote>

ツイート初期化用のjsファイルを読み込みます.

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

👆複数のツイートを埋め込む場合も、このjsファイルは一度だけ読み込めばOKです。

SPAでページ遷移時などに再度初期化するには

ページ遷移時など任意のタイミングで埋め込みツイートを再初期化したいときには、下記の関数を呼び出します。

// https://platform.twitter.com/widgets.jsの読み込み後に再初期化するには
twttr.widgets.load()

📄 Initializing embedded content after a page has loaded - Twitter

恥ずかしながら最近までこれを知らず、毎回jsファイルを読み込み直していました。

再初期化パフォーマンスを向上させる

twttr.widgets.load()はデフォルトではbody要素内全体から埋め込みの対象となるツイートURLを探します。
ツイートが読み込まれる場所があらかじめ分かっている場合はその親要素をtwttr.widgets.load()の引数に指定するとパフォーマンスが向上します。
たとえば<div id="foo">この中のどこかでツイートが埋め込まれる</div>という場合には

twttr.widgets.load(
  document.getElementById("foo")
);

とします。