AjaxページでTwitterのwidget.jsを使う

ブログのエントリーページからツイッターにつぶやくためのボタンを設置するメモです。

通常は次のようなコードをHTMLのソースに貼り付けます。

<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id))    {js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}    (document,"script","twitter-wjs");</script>

こちらのコードも外部スクリプトを読み込んで自動でHTMLを書き換えるような処理を行なっているようです。 <a href="https://twitter.com/share" class="twitter-share-button">Tweet</a> がiframeに置き換わります。

一度だけボタンを表示したい場合は問題ありませんがAjaxなどで画面を遷移する場合には、ページが切り替わった時にも同じボタンが表示されてしまします。HTML5のhistoryAPIなどと併用する場合などはURLが変わりますので特に困ったことになります。

通常はURLが変わればページが再読込されてスクリプトも再実行されますので問題ありません。しかしAjaxを使ってページを遷移する場合にはURLが変わってもページは再読み込みされずスクリプトも実行されません。

ですので手動でDOMの再構築を行う必要があります。

さて、twitterのwidgetのAPIなのですが、困ったことにAjaxと併用するときのドキュメントが見つかりませんでした。ですが、スクリプトを読み込んで何らかの処理を行なってHTMLの再構築を行なっているようですから、それがわかれば簡単に手動で実行できるかもしれません。

ということで調べてみました。

platform.twitter.com/widgets.js を読み込むと twttr というオブジェクトが作られるようです。早速なかみを覗いてみます。

こんな感じになっているようです。

あとは怪しそうなメソッドを適当に実行してみます。

どうやら twttr.widgets.load() というのが初期化するメソッドのようです。これを実行したところHTMLが書き換わりました。

以下、実際に使用したコードを載せておきます。CoffeeScriptです。

# twitter
if twttr?
  twttr.widgets.load()
else
  jQuery.getScript "http://platform.twitter.com/widgets.js"

twttr というオブジェクトがすでにあれば、HTMLを書き換えて初期化する twttr.widgets.load() メソッドを実行します。なければjQueryのajaxを使ってスクリプトを読み込んで実行します。最初に読み込んだ時には自動で twttr.widgets.load() が実行される用になっていると思います。

widget.js の中身

参考