• かちびと.net

    ユーザーが簡単にフィードバック出来るようにするTwitter投稿ボタンをjQueryで作るチュートリアルです。添えるコメントを選択できるようにします。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

ユーザーが簡単にフィードバック出来るようにする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>

Sample

サンプルです。レイアウト超適当ですみません

内容を選択

感想を選択して下さい。

この記事は

と思う内容だった。

表示確認

選択した感想が下記に反映されます

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

投稿する

そのままTwitterに感想付きで投稿する事が出来ます。

フィードバックをTwitterで伝える※実際に投稿できます。お好きにテストしてみてください。

以下を参考にしました。Bit.lyを使ってショートURL化する方法も書かれているのでより実践的です。

Share Feedback with Twitter and the Bit.ly API

URL :
TRB :

Comments & Trackbacks (2)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services