ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタンをjQueryで作る

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>