WEBOPIXEL

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

Posted: 2010.12.11 / Category: javascript / Tag: , , ,

Twitterのつぶやきを表示しているWebサイトがだいぶ多くなってきた昨今。イベントサイトなどでは特定のハッシュタグのつぶやきを表示するといった使い方もされているようです。
ということでこの記事ではjQueryを使用して指定したハッシュタグのつぶやきを取得して表示してみます。

Sponsored Link

Twitterのハッシュタグを検索し取得するURI

Twitterからはさまざまな形式でデータを取得できますが、jQueryを使用するならjson形式が便利です。
ハッシュタグを取得するURIは下記です。

http://search.twitter.com/search.json?q=%23[ハッシュタグ名]

[ハッシュタグ名]は取得したいハッシュタグ名に置き換えてください。
たとえば「#wordpress」というハッシュタグだったら下記のようになります。

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

ちなみにハッシュタグじゃなくて普通に「wordpress」の含まれているつぶやきを取得するには「%23」という部分を削除します。

http://search.twitter.com/search.json?q=wordpress

日本語つぶやきのみを取得する。

イベントなどで特別なハッシュタグを使用する場合は問題ないですが、例えば「#wordpress」とか「#flash」とか世界的に使用されているタグだと大半が英語になってしまいます。
英語なんか楽勝だけど表示するのは日本語だけでいいかな、という人もいますよね。
日本語のつぶやきに限定したい場合はパラメータに「lang=ja」を追加します。
Wordpressの例でいくとこうです。

http://search.twitter.com/search.json?lang=ja&q=%23wordpress

jQueryで取得して表示してみる。

最後にjQueryで取得したjsonデータを表示してみましょう。
基本的には以前書いた「jQueryでTwitterの自分のつぶやきを表示する」という記事を参考にして頂ければと思います。

html

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

javascript

	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/php_date.js" type="text/javascript"></script>
	<script type="text/javascript">
	$(function() {
		var dateObj = new Date;						 
		$.getJSON('http://search.twitter.com/search.json?lang=ja&q=%23wordpress&callback=?', function (json) {
			for(var i in json.results){
				var text = json.results[i].text ;
				//URLにリンクを付ける
				text = text.replace(/(s?https?:\/\/[-_.!~*'()a-zA-Z0-9;\/?:@&=+$,%#]+)/gi,'<a href="$1">$1</a>');
				//ハッシュタグにリンク
				text = text.replace(/#(\w+)/gi,'<a href="http://twitter.com/search?q=%23$1">#$1</a>');
				//リプライにリンク
				text = text.replace(/@(\w+)/gi,'<a href="http://twitter.com/$1">@$1</a>');
				$("#twitter dl").append("<dt>" +
					dateObj.format('Y-m-d H:i:s', json.results[i].created_at) +
					"</dt><dd>" + text + "</dd>"
				);
			}
		});
	});
	</script>
	

気をつけるところはサーチAPIはタイムラインと時間(created_at)の記述がちょっと違うところです。
タイムラインではIE対策を行わなければいけなかったのですが、ハッシュタグの場合は特別なことをしなくても表示してくれるようです。

COMMENTS

miyatake 2013-08-31 18:52 

JQuery、PHP初心者です。
こちらの「jQueryを使用して指定したハッシュタグのつぶやきを取得する」
を参考にさせていただきながら、
api1.1に対応したものを作れたらと思っています。
「PHPでOAuth認証して自分のつぶやきを表示する」も参考にしていたのですが、特定のユーザーの特定のハッシュタグの表示の仕方がわかりません。。

以下のような表記の仕方はできるのでしょうか?
「2013年08月31日 ツイートの内容」
※twitterの特定のユーザーの特定のハッシュタグ(たとえば#news)のみを表記したい。
※RTなども表示したくない

アプリケーションの登録は完了しております。
上記のような表示の仕方はどのようにしたらできるでしょうか?

webOpixel 2013-09-02 11:49 

下記のページを基本として
http://www.webopixel.net/php/666.html
ハッシュタグを検索する場合は、「OAuthRequest」の部分を

https://api.twitter.com/1.1/search/tweets.json?lang=ja&q=%23news+from:username

に変更します。
[username]の部分は取得する名前に置き換えてください。
他詳しい検索方法などはすみませんが公式ドキュメントで調べて下さい。

miyatake 2013-09-02 15:32 

ご返答ありがとうございます!

miyatake 2013-09-02 15:34 

index.html側の設定ですが、「自分のつぶやきを取得」
を参考にするのでしょうか。

必要なデータですが、以下であっているでしょうか。
index.html
↑「自分のつぶやきを取得」のhtmlの内容でよろしかったでしょうか。
js/php_date.js
js/jquery.js
twitter.php
twitteroauth/OAuth.php
twitteroauth/twitteroauth.php

また、twitter.phpはどこかで読み込む設定はしますか?

webOpixel 2013-09-03 13:51 

phpで完結するのであればjs、htmlファイルは必要ありません。

twitter.php
twitteroauth/OAuth.php
twitteroauth/twitteroauth.php

だけで、ブラウザで「twitter.php」を開きます。

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。