Twitterボタンの読み込みを非同期にしてみた。


運営している「漢字の正しい書き順(筆順)」ホームページ(http://kakijun.main.jp/)の表示に時間がかかるので試行錯誤。

今回はTwitterのボタン。「ツイートする」というオフィシャルなコード。

<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-lang=”ja”><img src=”http://twitter-badges.s3.amazonaws.com/t_mini-b.png” alt=”ツイートする” title=”ツイートする” /></a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js” charset=”utf-8″></script>

これをSSIで各ページで読み込んでいるのだけど、twitter.comのレスポンスが悪いと、後続のコードが読み込まれないみたい。

で、思いついたのがJavascriptの非同期読み込み。

はてなブックマークのコードを参考に async=”async” を追加してみた。
こんな感じです。

<a href=”http://twitter.com/share” class=”twitter-share-button” data-count=”horizontal” data-lang=”ja”><img src=”http://twitter-badges.s3.amazonaws.com/t_mini-b.png” alt=”ツイートする” title=”ツイートする” /></a><script type=”text/javascript” src=”http://platform.twitter.com/widgets.js” charset=”utf-8″ async=”async”></script>

ツイートの機能としては問題なし。
ただ、本当に非同期で読み込まれているかどうかは判断できないので、様子見です。

軽くなったような気がします…。