ツイートボタンには、こんな感じに投稿数を全面に押し出したタイプのボタンが用意されています。
今回はこちらのボタンをつかって投票フォームをつくってみましょう。
解説
デモページのソースはこんな感じになっています。
<ul class="box"> <li class="btn red"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jsrun.it/kimmy/_red" data-lang="ja" data-text="投票!" data-hashtags="紅" data-count="vertical">ツイート</a></li> <li class="btn white"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://jsrun.it/kimmy/white" data-lang="ja" data-text="投票!" data-hashtags="白" data-count="vertical">ツイート</a></li> </ul> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
基本的には、紅ボタン、白ボタンそれぞれのdata-urlを割り当てているだけです。
それぞれのURLがついたツイートをボタンが勝手に計測してくれます。
ツイートのURLからも投票ページに遷移して欲しいので、
setTimeout(function() { location.replace("http://jsrun.it/kimmy/vote"); }, 0);
と、location.replaceでリダイレクトのような処理をかけています。