Twitter Search API

Twitter Search APIはTwitterでつぶやかれたキーワード等を検索して、自分のサイトに表示させることができるAPIです。。。要はTwitter上の検索結果をそのままサイトに持ってくることができるというわけです。

要注意！！ -2013年6月12日追記-
Twitter Search APIの仕様が変わったため、以下のやり方ではツイートされた内容を表示させることができなくなってしまいました。
新しい仕様に対応した使い方については現在調査をしていますので、やり方が分かり次第修正を公開したいと思います。

お店紹介サイトであれば、その店舗（場合によっては店名、ブランド名など）でつぶやかれている情報を掲載することが可能になります（もちろんつぶやきがなければ、表示されませんけど、、）。

Twitter Search APIについても、他のAPI同様にAPIの詳しい情報を紹介するのではなく、実際に動いているソースコードを中心に紹介していきたいと思います。

最終の完成形はこのようになります。

Twitter Search API設定目次

カスタムフィールドの追加

Twitter Search APIを利用するには検索するキーワードが必要になります。キーワードを店名すればWordPressのタグで対応できますが、より柔軟に対応しようと思ったためカスタムフィールドを追加しています。

＜裏話＞
サイトの構成上、ページのタイトルが店名（松乃家、ゴーゴーカレーなど）だけではなく、店舗名（東池袋店、サンシャイン60通り店など）をセットにしているため、Twitterの検索で結果がないことが多く、切り分けるようにしてます^^

カスタムフィールドの追加方法

元々設置しておいた、Custom Field Templateに以下の内容を追加

[Twitter]
type = text
size= 35
label = Twitter用キーワード

投稿ページでTwitterで検索したいキーワードを任意で入れられるようにします（ほぼ「店名のみ」にしています）。

カスタムフィールドの追加方法は、「Custom Field Template」を参考にしてください。

Twitter Search APIのリクエストURL作成

リクエストURLとは、Twitter Search APIのどの情報が欲しいかをプログラムに伝えるためのものです。
APIは仕組みとして、他のサイトにあるデータベース（もしくは類似するデータ）を活用するため、データをもらうためには必ず先にリクエストしなければいけません。

実際に東池袋カレーマップで使用しているリクエストURLはこちら

<?php
$q = get_post_meta($post->ID, Twitter, true);
$Twitterurl = "http://search.twitter.com/search.atom?q=$q&rpp=10";
$Twitter =  simplexml_load_file($Twitterurl);
$hits = $Twitter->title;
?>

一行目の「$q」がカスタムフィールドから呼び出しているキーワード

$q = get_post_meta($post->ID, Twitter, true);

それをTwitter Search APIにリクエストしたのち、simplexml_load_fileでパースしています。

この辺の詳しくことは最後のTwitter Search APIの仕様書を参考にしてください。

テーマファイルのTwitterの検索結果を表示させたい場所に以下のソースコードを埋め込みます（リクエストURLも同じ所に書いています）。
東池袋カレーマップの場合は、サイドバー (sidebar.php)になります。

<?php if(is_single()): ?>
<dl class="twitter">
<dt><img src="<?php bloginfo('stylesheet_directory'); ?>/images/twitter.png"></dt>
<dd><p class="title"><?php echo post_custom("Twitter");?>の<br />Twitterの情報をチェック！</p>
<?php
$q = get_post_meta($post->ID, Twitter, true);
$Twitterurl = "http://search.twitter.com/search.atom?q=$q&rpp=10";
$Twitter =  simplexml_load_file($Twitterurl);
$hits = $Twitter->title;
?>
<?php foreach ($Twitter->entry as $entry) {?>
<div class="tweet">
<p class="image"><a href="<?php echo $entry->author->uri; ?>"><?php echo "<img src='" . $entry->link[1]{"href"} . " ' width=48 height=48 />";?></a></p><p class="text"><?php echo $entry->content; ?>(<?php echo mb_strcut("$entry->published",0 ,10, "UTF-8"); ?>)	</p>
</div>
<?php } ?>
</dd></dl>
<?php endif;?>

上から見るとこの記述でトップページ、固定ページではTwitterが表示されないようにしています（トップページ等ではキーワードがないですからね）。

<?php if(is_single()): ?>
---
<?php endif;?>

その後にリクエストURLを書いて、最終的な表示ついては

<?php foreach ($Twitter->entry as $entry) {?>
---
<?php } ?>

で繰り返すようにしています。

繰り返しの数（とうか、Twitterから持ってくる数）はリクエストURLの「rpp」の数字でコントロールしています。東池袋カレーマップの場合は「10件」になります。

また、「published（公開時間）」は標準のままだと「2011-12-19T01:08:33Z」とUTC（協定世界時）になっています。これを日本時間にしようとしたのですが、なかなか上手くいかず時間の部分をがっつり削除して日にちだけでるようにしてます。。。

(<?php echo mb_strcut("$entry->published",0 ,10, "UTF-8"); ?>)

ここは後でなんとかしたいところです。

最後にデザインと関わってくる部分ですが、Twitterのつぶやきは最大でも140文字と決まっているので、つぶやきを表示するボックスの高さもそれに合わせて決め打ちしてあります。

タイトルの画像は、趣味の問題なので気にしなしでください（笑

レイアウトの調整

上記のままだと、（当然ながら）レイアウトがグチャグチャになってしまうため、CSSを使ってレイアウトの調整を行います。

実際に反映させたCSSがこちらになります。

dl.twitter{
	margin: 0 0 15px 0;
	width:300px;
	}
dl.twitter dt{
	line-height:32px;
	padding: 0 0 0 0px;
	overflow:hidden;
	}
dl.twitter dd {
	padding: 10px 5px 0px 5px;
	background-color: #ffe1b9;
	border:1px solid #df9128;
	border-top:none;
	overflow:hidden;
	}
dl.twitter dd p.title{
	padding: 0 0 5px 0;
	font-size:12px;
	border-bottom:1px dotted #df9128;
	}
dl.twitter dd p{
	padding: 0;
	font-size:12px;
	}
dl.twitter dd p.title{
	margin: 0 0 10px 0;
	text-align:center;
	font-size:14px;
	}
dl.twitter dd div.tweet {
	margin: 5px 0 0 0;
	height:7.1em;
	border-bottom:1px dotted #df9128;
	}
dl.twitter dd div.tweet p.image{
	margin: 0 4px 4px 0;
	float:left;
	}
dl.twitter dd div.tweet p.text{
	line-height:1.2;
	}

「dl」の幅とか、「dt」の背景画像とか、各テキストの色などはサイトに合わせて調整してもらえばいいと思います。

Twitter Search APIの参考サイト

・Twitter Search API の使い方
・Twitter 検索API メモ：超自己満足プログラミング
・Twitter API 仕様書