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化する方法も書かれているのでより実践的です。
