Tweet Button の独自イベントを取得してみる

Tweet Button はイベントを登録しておくと、ツイートされた時にコールバック関数を実行することが出来るようになっています。この機能は結構便利そうですよね。

Web Intents Javascript Events | Twitter Developers

注意点としては、標準の widget.js を読み込むタグではなくて、このページに書いてある専用のタグを使う必要があります。具体的には以下のようなやつです。

<script type="text/javascript" charset="utf-8">
  window.twttr = (function (d,s,id) {
    var t, js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return; js=d.createElement(s); js.id=id;
    js.src="//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
    return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
  }(document, "script", "twitter-wjs"));
</script>

機能自体は同じなんですが、このタグを使わないと twttr というグローバルな変数が定義されないので、イベントの登録が出来ません。

そして widget.js は最近のソーシャル系のボタンと同様に非同期で読み込まれるので、そのために twttr.ready メソッドを使って読み込み完了まで待つ必要があります。

twttr.ready(function (twttr) {
    twttr.events.bind("tweet", function (event) {
        // ツイートされたタイミングで呼び出される
    });
});

他にもイベントとしてはフォローしたタイミングや、ボタン自体がクリックされたタイミングで呼び出されるものもあります。

// フォローしたユーザー情報を取得する
twttr.events.bind("follow", function (event) {
    var followed_user_id = event.data.user_id;
    var followed_screen_name = event.data.screen_name;
});

// クリックされた場所を取得する
twttr.events.bind("click", function (event) {
    if (event.region == "count") {
        // ツイート数表示がクリックされた
    }
});

今回はこの機能を使って、だるやなぎメーカーで新しいだるやなぎを作ってツイートした時にトースト通知を表示するようにしました。

だるやなぎメーカー - あなただけの、だるやなぎを簡単に

ちなみにトースト表示は SignalR を使ってページを開いている全員に配信されるようになっています。