読者です 読者をやめる 読者になる 読者になる

みかづきブログ その3

3ヶ月つづけてみました。

ツイートボタンをつかって投票ページをつくる

ツイートボタンには、こんな感じに投稿数を全面に押し出したタイプのボタンが用意されています。
今回はこちらのボタンをつかって投票フォームをつくってみましょう。


解説

デモページのソースはこんな感じになっています。

<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を割り当てているだけです。

f:id:kimizuka:20140428092714j:plain

それぞれのURLがついたツイートをボタンが勝手に計測してくれます。
ツイートのURLからも投票ページに遷移して欲しいので、

setTimeout(function() {
    location.replace("http://jsrun.it/kimmy/vote");
}, 0);

と、location.replaceでリダイレクトのような処理をかけています。