jQueryを使用してハッシュタグで指定した自分のツイートだけ表示

Posted: 2011.08.19 / Category: javascript / Tag: jQuery, json, Twitter

自分のブログにTwitterを表示するは当たり前になりつつありますが、「便所なう」とか「トイレなう」とかどうでもいいことまでブログに表示されるのはちょっとあれですね。
そこで専用のハッシュタグをつけてツイートすれば、自分の指定したつぶやきだけ表示できるのでいいかんじかもしれません。

ハッシュタグを決めよう

まずは専用のハッシュタグを決めましょう。
ここでは「#blogup」としました。
ハッシュタグを取得するためのURLは下記になります。

http://search.twitter.com/search.json?q=%23blogup

またハッシュタグの検索はこちらの記事も参考にしてください。

jQueryを使用して指定したハッシュタグのつぶやきを取得する

指定したユーザーだけ取得する

指定したハッシュタグのツイートを取得できましたが、これだけだと同じハッシュタグでツイートすれば他の人のつぶやきまでも表示されてしまうのであまりよろしくありません。
そこでユーザーを指定して取得してみましょう。
ユーザーを指定する場合パラメーターに「from:ユーザー名」を追加します。
たとえば私（webopixel）の場合は次のようになります。

http://search.twitter.com/search.json?q=%23blogup+from:webopixel

複数のユーザーを指定する

うちのブログは２人でやってるんだけどってこともあるかもしれませんね。
その場合はユーザー名をor検索というので指定します。

http://search.twitter.com/search.json?q=%23blogup+from:[ユーザー1]+OR+from:[ユーザー2]

jQueryで表示する

指定方法さえわかればあとは表示するだけですね。

html

	<div id="twitter"></div>

javascript

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function() {			 
		$.getJSON('http://search.twitter.com/search.json?q=%23blogup+from:webopixel&callback=?', function (json) {
			for(var i in json.results){
				$("#twitter").append("<p>" + json.results[i].text + "</p>");
			}
		});
	});
	</script>

Twitterの表示は下記の記事も参考にしてみてください。

jQueryでTwitterの自分のつぶやきを表示する