Twitterの利用法の一つとしてユニーク
なモノがあったので備忘録的にご紹介。
Twitterを簡易的なフィードバックツール
にしてしまおう、という内容。今まで通り
Twitterに投稿するボタンに、感想を加え
るようにします。
普段、TwitterではURLとともに感想が書いてあることが多く、フィードバックのツールとしてTwitterを利用しているWebサイトも少なく有りません。このフィードバックをもっと簡易的にしてみよう、というのが今日の内容です。
サンプルは記事の下のほうにあります。
jQuery
jQueryを使います。僕は基本的にWordPressを使う人なのでWPにあわせたコードです。便宜変更してください。
$(function(){
var url = "<?php the_permalink() ?>";
var post_title = "<?php the_title(); ?>";
var user_feedback;
var tweet;
function getFeedback(){
user_feedback = $("#feedback").val();
$("#tweet-preview").text(user_feedback);
}
function composeTweet(){
tweet = user_feedback + ': ' + post_title + ' ' + url;
$('#tweetit a').attr("href", "http://twitter.com/home?status=" + tweet);
}
$("#tweetit a").click(function(){
composeTweet();
});
$("#feedback").change(getFeedback);
getFeedback();
composeTweet();
});マークアップ
内容を選択：
<p class="mood">この記事は<select id="feedback"> <option value="オススメ！">オススメ！</option> <option value="まぁまぁ良い記事">まぁまぁ良い記事</option> <option value="普通かな">普通かな</option> <option value="微妙じゃね・・">微妙じゃね・・</option> <option value="間違ってると思う">間違ってると思う</option> <option value="これは酷い">これは酷い</option> </select>と思う内容だった。</p> <p class="tweet"><span id="tweet-preview">オススメ！</span>: <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></p> <p id="tweetit"><a href="http://twitter.com/home?status=Liked" target="_blank" title="Share link and feedback on Twitter">Tweet It</a><p>
Sample
サンプルです。レイアウト超適当ですみません
内容を選択
感想を選択して下さい。
この記事はと思う内容だった。
表示確認
選択した感想が下記に反映されます
オススメ！: ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタンをjQueryで作る
投稿する
そのままTwitterに感想付きで投稿する事が出来ます。
フィードバックをTwitterで伝える※実際に投稿できます。お好きにテストしてみてください。
以下を参考にしました。Bit.lyを使ってショートURL化する方法も書かれているのでより実践的です。