クリックするたびに別の文章をつぶやけるTwitterボタンです。
デモ
http://jsdo.it/butchi/super_tweet
Twitterボタンのクリックイベントを拾うにはwidget.jsを読み込めばいいものだと思っていましたが、こちらの特別なスクリプトを読み込まなければいけないようです。
参考:
Tweet Button の独自イベントを取得してみる - しばやん雑記
index.html
<html>
<head>
<title>スーパーツイート</title>
</head>
<body>
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-via="butchi_y" data-hashtags="すごいパンチ" data-url="http://jsdo.it/butchi/super_tweet">Tweet</a>
</div>
<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>
<script type="text/javascript" src="lib/jquery-1.10.2/js"></script>
<script type="text/javascript" src="lib/underscore-1.4.4/js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var vocabulary = [
'グレート',
'エクセレント',
'ネオ',
'超絶',
'ミラクル',
'豪快',
'ハイパー',
'マスター',
'ウルトラ',
'グランド',
'ワンダフル',
'アルティメット',
'メガ',
'ギガ',
'テラ',
'何となくすごい',
'面白'
];
var $twitterElm;
var superTxt;
var tweetHtml;
$(function() {
$twitterElm = $(".twitter");
tweetHtml = '<a href="https://twitter.com/share" class="twitter-share-button" data-via="butchi_y" data-hashtags="すごいパンチ" data-url="http://jsdo.it/butchi/super_tweet">Tweet</a>'
twttr.ready(function() {
setTweet();
twttr.events.bind('click', function() {
setTweet();
});
});
});
function setTweet() {
var superPrefix = _.first(_.shuffle(vocabulary),10).join('');
superTxt = superPrefix + 'パンチ';
$twitterElm.html(tweetHtml);
$twitterElm.find('.twitter-share-button').attr('data-text', superTxt);
twttr.widgets.load();
}