ツイートボタンでツイートされた時にコールバック処理できる「Web Intents Javascript Events」

「Web Intents Javascript Events」を使うと、サイト上に貼り付けたツイートボタンやフォローボタンからフォローされた際に、JavaScriptでコールバック処理できます。例えば、「フォロー」してくれた人だけに特別なコンテンツを見せたりといったことができるようになります。

使い方

こんな感じのスクリプトを書けば、OKです。ちなみにカスタムデザインのツイートボタンはサポート外だそうです（このページに「Web Intents Javascript Events are not available for custom Tweet Buttons.」と書いてあります）。

<a href="https://twitter.com/share" class="twitter-share-button" data-via="kenji_namba" data-lang="ja">ツイート</a>
<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"));
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function(event) {
        alert('Tweetされた！');
    });
});
</script> 

↓のボタンで試してみてください。
※2回出るのはこのページに２つボタンがあるからです。
ツイート

それでもカスタムデザイン

正式サポートではないですが、調べていたらこんなんがありました（ここら辺の記事を参考）。カスタムデザインのツイートボタンで、コールバックを動かすには以下のような書けばいいそうです。利用は自己責任でお願いします。

<a href="#" target="_blank" id="twtShareLink" onclick="return twOpenPopup(document.location.href, document.title, new Date())"
>ついーとする</a>
<script>
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"));
twttr.ready(function (twttr) {
    twttr.events.bind('tweet', function(event) {
        alert('Tweetされた！');
    });
});
</script>
<script>
function twOpenPopup(url,text,unique_id){
    var twturl="https://twitter.com/intent/tweet?url="+encodeURIComponent(url) +
        "&count=none&source=tweetbutton&text=" + encodeURIComponent(text) + "&original_referer=" + encodeURIComponent(document.location.href);
    document.getElementById("twtShareLink").href = twturl;
    return true;
}
</script> 

↓のリンクで試してみてください。
ついーとする

まとめ

ブログなどでも結構使われているツイートボタン。ツイートしてくれた人だけ、あるいはフォローしてくれた人だけに何かを見せるといったアクションができるようになるので、使い方だけでも覚えておくといいでしょう。ちなみに、Facebookも同じようなことができます。Facebookについては、また今度説明しますね。