ツイートイベントを検知する(Tweetイベントにコールバック関数をバインドする)

素材ダウンロード系のサイトで、「このサイトについてツイートしてくれたらダウンロード出来ます」と書かれたサイトがあり、実際にツイートした瞬間にダウンロードダイアログが開く、という仕組みになっていて面白いなーと思ったので、私も同じような事をやってみたくて、過去に調べた内容になります。

具体的な実装方法については、Twitter Developersに詳細なドキュメントがあります。

JavaScript Interfaces for Twitter for Websites https://dev.twitter.com/docs/intents/events#events

やってみて分かったこと

  • バインドできるイベントは、"click", "favorite", "tweet", "retweet", "follow"
  • Twitterの公式APIを使ったツイートボタンでなくても(オリジナルなツイートボタンでも)イベントはバインド出来た
  • コールバック関数にパラメータを指定すると、target, region, data の情報が格納されたイベント情報が取れる(それぞれの内容は上記ページ参照)
  • 同一ページ上にツイートボタンが複数ある場合、工夫しないとボタンの数だけバインド関数の処理が実行されてしまう

実装方法

Loading the widgets.js file asynchronously will require you to wait before binding events. You will need to wrap your event bindings in a callback function which will be invoked once everything has loaded. All event examples below assume you have wrapped those event bindings in this callback.

とありますように、widgets.js(ツイートボタンを表示させる時に呼び出しが必要な例のアレ)の読み込み待ちが必要なので、developersページにあるサンプルに従って、以下のようにするとOKです。

ツイートイベントの場合の例

<script type="text/javascript">
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="https://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"));

twttr.ready(function (twttr) {
  twttr.events.bind('tweet', function(event) {
    // (ここにやりたい処理を記述する)
  });
});
</script>

注意点

「やってみて分かったこと」にも書きましたが、ページの上部と下部にTweetボタンがそれぞれある、みたいなサイトはよくあるかと思いますが、Tweetボタンが複数あるとその分だけコールバック関数が呼ばれてしまいます。ですので、処理を1回だけしか実行させたくない時は、コールバック関数内で1回だけ実行されるようなコーディングをする必要があります。

また、イベント変数のtargetからは、DOMノードが取得できるようですし、ボタンのラベルなども取れるようですが、オリジナルなボタンにした時にも取得出来るのかは不明です。(未確認) dataでツイートIDなども取れるようなので、どんなことをツイートされたのかを追うことも出来そうです。

以上です。超簡単に出来るので、試してみたい方はどうぞ!