みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです！

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

SNS JavaScript

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


デモページ

http://jsdo.it/kimmy/vote

解説

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

<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でリダイレクトのような処理をかけています。