サイトに設置したツイートボタンが押されて、ツイートの投稿まで完了したら、なにか処理を行う、というサンプルです。
Twitterのツイートボタンには、イベントを検知する仕組みが用意されていました。
↓こちら公式のドキュメント。
Scripting: Events | Twitter Developers
コード。
<a href="https://twitter.com/share" class="twitter-share-button">Tweet</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="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"));
// ツイート完了後のコールバック
function afterTweet(intent_event) {
if (intent_event) {
console.log('ツイート完了');
};
}
// イベントにコールバックをバインド
twttr.ready(function (twttr) {
twttr.events.bind('tweet', afterTweet);
});
</script>
- ツイートボタン押される
- ツイート用のウィンドウが開く
- ユーザが実際にツイートを完了する (イベント発火)
- バインドしておいたコールバック関数が実行される
という流れ。