WordPress で codebird-php でツイート取得して表示してみよー!Twitter API 1.1

Twitter
簡単にツイート取得してみたーい!って事で手抜きw

はじめに!

先日 API バージョン 1.0 が完全に使えなくなりましたね! actyway でも Twitter の RSS からツイートの取得&表示をしていたので6月12日から表示されなくなっていました!って事でとりあえず簡単に手抜きに取得&表示してみたいと思います!

ちなみに以前は下記記事の様な方法で取得&表示してました。

完成形!

PHP でツイート取得して jQuery でにゅいーん!

フッターに表示してるんですがツイートを取得してリスト表示した物を jQuery でにゅいーんと縦スライドさせて表示しています。ツイートをリスト表示出来たら見た目や動きはお好みで好きな jQuery とか使えば汎用性も高くて良いかなと思っています!

HTML ソース!

1
2
3
4
5
6
<ul id="vertical-ticker">
	<li><a class="profile" href="https://twitter.com/actyway"><img src="http://a0.twimg.com/profile_images/1796112491/actyway_normal.png" alt="actyway.com Twitter icon" /><strong>actyway.com</strong><span class="profile_name"><b>@actyway</b></span></a><span class="tweet">WordPressでおせっかいなksesを除去する方法 - Devslog - <a href="http://bit.ly/11X7YHB" target="_blank">bit.ly/11X7YHB</a></span><span class="pub_date"><a href="https://twitter.com/actyway/status/349354779513860097">2013-06-25 11:34:04</a></span></li>
	<li><a class="profile" href="https://twitter.com/actyway"><img src="http://a0.twimg.com/profile_images/1796112491/actyway_normal.png" alt="actyway.com Twitter icon" /><strong>actyway.com</strong><span class="profile_name"><b>@actyway</b></span></a><span class="tweet">AOL Reader - <a href="http://bit.ly/17yVj6S" target="_blank">bit.ly/17yVj6S</a></span><span class="pub_date"><a href="https://twitter.com/actyway/status/349346168687427585">2013-06-25 10:59:51</a></span></li>
	<li><a class="profile" href="https://twitter.com/actyway"><img src="http://a0.twimg.com/profile_images/1796112491/actyway_normal.png" alt="actyway.com Twitter icon" /><strong>actyway.com</strong><span class="profile_name"><b>@actyway</b></span></a><span class="tweet">ASCII.jp:iOSを越える実力!? インテル主催「Tizen」セミナーレポート (1/4) - <a href="http://bit.ly/14U3hDU" target="_blank">bit.ly/14U3hDU</a></span><span class="pub_date"><a href="https://twitter.com/actyway/status/349334008393510912">2013-06-25 10:11:32</a></span></li>
...
</ul>

吐き出されるソースはこんな感じ。マークアップはお好きなように。

5ステップ!

  • Twitter Developers にてアプリケーションの登録
  • codebird-php と WordPress Codebird のダウンロード&設置
  • functions.php に関数を書く
  • テーマのどこかに呼び出しを書く
  • css と jQuery はお好みで

大雑把に区切るとこんな感じでしょーか、30分もあれば実装できますよね、たぶんw

アプリケーションの登録!

Twitter Developers

とりあえず Twitter Developers にてアプリの登録しなきゃ使えないので My applications | Twitter Developers からサインイン&アプリの登録をしまーす!

Create an application

アプリの登録画面のキャプチャ。ちょっと小さいけど同じ様に開いたら分かると思います!肝心なのは「Website:」の項目なので、API 使う WordPress の URL をしっかり記入してください。わたしは「http://actyway.com/」にしました。「Callback URL:」は空でOK!

余談ですが、「Name:」と「Description:」を適当に「test」とかしてたら「
testは既にNameで使われています」とか、「Descriptionは短すぎます(10文字以上)」と怒られましたwww

Create an application

上の続き、「Developer Rules Of The Road」を読んで「CAPTCHA」に表示されている単語っぽい文字列を2つ入力して、一番下の「Create your Twitter application」のボタンを押します!

Twitter Developers

次の画面ね。この段階で「Consumer key」と「Consumer secret」は表示されてますが、今回は「Access token」と「Access token secret」も必要なので続けて画面下部の「Create my access token」のボタンを押してアクセストークンも取得します。

Twitter Developers

正常に取得出来たらこんな感じの画面になりまーす!

codebird-php!

mynetx/codebird-php · GitHub https://github.com/mynetx/codebird-php

サクッと実装したいので PHP のライブラリ使いまーす!「PHPからTwitter APIを叩くなら『codebird-php』が便利そう | IDEA*IDEA」で紹介されてて気になってたので、codebird-php を使ってみます。(これ系だと twitteroauth がメジャーみたいですね?)

早速、codebird-php 試してみましたよ〜!

WordPress で codebird-php 動かない!

わー!\(^o^)/
ふぃー!/(^o^)\

cURL あたりでエラー出て動かなかったです!(わたしのサーバー環境でダメなだけで、決して WordPress で codebird-php が動かない訳では無いと思います。誤解を招く画像ですみませんw)

ざっくりログ見て把握してググったところ良さげな物を発見!!

WordPress Codebird!

WordPress Codebird
Automattic/wp-codebird · GitHub

「PHP で cURL 使えなかったらこれ使え!」な class でーす! しかも Automattic 社のだ!わぷー!\(^o^)/ って事で、ありがたく「WordPress Codebird(wp-codebird)」を使わせていただく事にしました。(codebird-php 用の class なのでどちらも必要になります。)

cURL 使える環境でしたら wp-codebird 使わずに試してみてください。レンタルサーバーによっては有効になってない所もある様なので、今回は wp-codebird を使った方法でいきます。

ダウンロード!

どちらもファイルへのリンクなので待ってたらファイルのダウンロードが始まります。

wp-codebird(最新のバージョン)が codebird-php 2.3.2 前提に書かれているみたいなので、少し古めの codebird-php を使います、あしからず。

ファイル設置場所!

上記2ファイルを解凍すると codebird.phpclass-wp-codebird.php が見つかると思います、この2ファイルを WordPress のテーマフォルダ等に置いてください。

/wp-content/themes/お使いのテーマ/codebird.php
/wp-content/themes/お使いのテーマ/class-wp-codebird.php

後でパスは指定するのでどこでも良いと思います。(WPer 的にはどこが良いもんなんでしょう?)

functions.php!

プラグインを使わないので functions.php に直接書きます。Twitter Developers でアプリ登録して発行されたキー等【】がここで必要になります。

function tweet_lines(){
 
	// codebird.php へのパス
	include_once('codebird.php');
 
	// class-wp-codebird.php へのパス
	include_once('class-wp-codebird.php');
 
	// Consumer key, Consumer key を指定してください
	Codebird::setConsumerKey('【Consumer key】', '【Consumer key】');
	$cb = WP_Codebird::getInstance();
 
	// Access token, Access token secret を指定してください
	$cb->setToken('【Access token】', '【Access token secret】');
 
	// パラメーターを指定
	$params = array(
		'screen_name' => 'actyway',
		'count' => 50
	);
 
	// user_timeline を取得
	$tweets = (array) $cb->statuses_userTimeline($params);
	array_pop($tweets); // 最後の行に変なデータ入ってくるから除去
 
	foreach($tweets as $tweet){
		echo '<li>'.
		'<a class="profile" href="https://twitter.com/'.$tweet->user->screen_name.'">'.
			'<img src="'.$tweet->user->profile_image_url.'" alt="'.$tweet->user->name.' Twitter icon" />'.
			'<strong>'.$tweet->user->name.'</strong><span class="profile_name"><b>@'.$tweet->user->screen_name.'</b></span></a>'.
		'<span class="tweet">'.$tweet->text.'</span>'.
		'<span class="pub_date"><a href="https://twitter.com/'.$tweet->user->screen_name.'/status/'.$tweet->id_str.'">'.$tweet->created_at.'</a></span></li>';
	}
}

この例だと @actyway の最新ツイートを50件取得してリスト表示しています。Twitter でのアイコン画像表示やアカウントにリンク貼ったりしていますが、デフォルトのデータを無加工で表示している状態です。でもこのままだと今イチなので、もう少し手を加えます。

function tweet_lines(){
 
	// タイムゾーンを日本に
	date_default_timezone_set('Asia/Tokyo');
 
	// codebird.php へのパス
	include_once('codebird.php');
 
	// class-wp-codebird.php へのパス
	include_once('class-wp-codebird.php');
 
	// Consumer key, Consumer key を指定してください
	Codebird::setConsumerKey('【Consumer key】', '【Consumer key】');
	$cb = WP_Codebird::getInstance();
 
	// Access token, Access token secret を指定してください
	$cb->setToken('【Access token】', '【Access token secret】');
 
	// パラメーターを指定
	$params = array(
		'screen_name' => 'actyway',
		'count' => 50
	);
 
	// user_timeline を取得
	$tweets = (array) $cb->statuses_userTimeline($params);
	array_pop($tweets); // 最後の行に変なデータ入ってくるから除去
 
	foreach($tweets as $tweet){
		$text = $tweet->text;
 
		// ハッシュタグへのリンクに置き換える
		foreach($tweet->entities->hashtags as $hashtag){
			$text = str_replace('#'.$hashtag->text, '<a href="https://twitter.com/search?q=%23'.$hashtag->text.'&src=hash" target="_blank"><s>#</s>'.$hashtag->text.'</a>', $text);
		}
 
		// シンボルへのリンクに置き換える
		foreach($tweet->entities->symbols as $symbol){
			$text = str_replace('$'.$symbol->text, '<a href="https://twitter.com/search?q=%24'.$symbol->text.'&src=ctag" target="_blank"><s>$</s>'.$symbol->text.'</a>', $text);
		}
 
		// URLをリンクに置き換える
		foreach($tweet->entities->urls as $url){
			$text = str_replace($url->url, '<a href="'.$url->expanded_url.'" target="_blank">'.$url->display_url.'</a>', $text);
		}
 
		// メンションもね!
		foreach($tweet->entities->user_mentions as $mention){
			$text = str_replace('@'.$mention->screen_name, '<a href="https://twitter.com/'.$mention->screen_name.'" target="_blank"><s>@</s>'.$mention->screen_name.'</a>', $text);
		}
 
		echo '<li>'.
		'<a class="profile" href="https://twitter.com/'.$tweet->user->screen_name.'">'.
			'<img src="'.$tweet->user->profile_image_url.'" alt="'.$tweet->user->name.' Twitter icon" />'.
			'<strong>'.$tweet->user->name.'</strong><span class="profile_name"><b>@'.$tweet->user->screen_name.'</b></span></a>'.
		'<span class="tweet">'.$text.'</span>'.
		'<span class="pub_date"><a href="https://twitter.com/'.$tweet->user->screen_name.'/status/'.$tweet->id_str.'">'.
		date('Y-m-d H:i:s', strtotime($tweet->created_at)).'</a></span></li>';
	}
}

これで Twitter っぽい見た目になったんではないでしょーか?

参考リンク

WordPress のテーマファイルに書く!

テーマの PHP ファイルの実行したい場所に tweet_lines(); と書いてください。

...
<div class="social_area">
	<section class="twitter">
		<h3>Twitter</h3>
		<ul id="vertical-ticker"><?php tweet_lines(); ?></ul>
	</section>
...

actyway では、フッターに表示させているので、footer.php に書いています。

デザイン&アニメーション!

actyway でフッターに表示してる感じで良ろしければ、「改めまして! WordPress のプラグイン無しですごく簡単にツイート表示しよー」を参考にしてみてください。CSS も jQuery もコピペでいけると思います。

Totem Ticker jQuery Plugin を使った物でしたら、さらに古い記事ですけど「WordPress のプラグイン無しですごく簡単にツイート表示しよー」が参考になると思います。

フッターなどに数ツイートを表示(デザイナーさんのブログとかでたまに見かける)してらっしゃったりするけど、API 1.1 に対応してないせいか表示されてませんでした。キャプチャ載せさせていただこうと思ったのですが。

文字少なめのリストをアニメーション表示すると言えば、ティッカー系の jQuery になると思うのでピックアップしておきます。

jQuery plugin

jQuery で書いちゃう(プラグイン無し)

その他!

Twitter API 1.1 になってからツイートの取得回数制限が変更になりましたよね?この記事の PHP では、「GET statuses/user_timeline」を使っているので15分間に180回までって事になると思うんですが、アクセス多いブログやサイトなら「15分間に180回」ってキツいですよね。取得したデータをキャッシュすれば良いんでしょうけど、パッと方法分からなかったのでシラっとスルーしていますw(教えて!エライ人!)

actyway では、WP Super Cache を使っているのでツイートの取得制限はあまり気にしてないのですが、もしキャッシュ系の導入がまだでしたら試してみてください。種類は色々とあると思います。

そもそも取得回数制限を気にするのなら、Twitter 公式のウィジェットでも良いですよね!*you さんが「twitterの新ウィジェット(埋め込みタイムライン)をカスタマイズ *Ateitexe」な記事を書かれていますのでそちらも参考にどぞー!

キャッシュ対応!(追記)

以前に @wokamoto さんが、「Re: Twitterのツイートを表示する-RSS編 | memo.dogmap.jp」で書いてくださってたのを思い出したのでやってみました!@wokamoto さんありがとうございます。m(__)mペコリ

Transients API を使っています。
Transients API « WordPress Codex

function tweet_lines(){
 
	// キャッシュが無ければ実行
	if(($tweets = get_transient('statuses_userTimeline')) === false){
		include_once('codebird.php');
		include_once('class-wp-codebird.php');
 
		Codebird::setConsumerKey('【Consumer key】', '【Consumer key】');
		$cb = WP_Codebird::getInstance();
		$cb->setToken('【Access token】', '【Access token secret】');
 
		$params = array(
			'screen_name' => 'actyway',
			'count' => 50
		);
		$tweets = (array) $cb->statuses_userTimeline($params);
 
		// 200なら(正常に取得出来たら200が返ってくる)
		if($tweets[httpstatus] === 200){
 
			// キャッシュする、30分有効
			set_transient('statuses_userTimeline', $tweets, 60 * 30);
		}else{
			$tweets = false;
		}
	}
 
	if($tweets){
		date_default_timezone_set('Asia/Tokyo');
		array_pop($tweets);
 
		foreach($tweets as $tweet){
			$text = $tweet->text;
			foreach($tweet->entities->hashtags as $hashtag){
				$text = str_replace('#'.$hashtag->text, '<a href="https://twitter.com/search?q=%23'.$hashtag->text.'&src=hash" target="_blank"><s>#</s>'.$hashtag->text.'</a>', $text);
			}
			foreach($tweet->entities->symbols as $symbol){
				$text = str_replace('$'.$symbol->text, '<a href="https://twitter.com/search?q=%24'.$symbol->text.'&src=ctag" target="_blank"><s>$</s>'.$symbol->text.'</a>', $text);
			}
			foreach($tweet->entities->urls as $url){
				$text = str_replace($url->url, '<a href="'.$url->expanded_url.'" target="_blank">'.$url->display_url.'</a>', $text);
			}
			foreach($tweet->entities->user_mentions as $mention){
				$text = str_replace('@'.$mention->screen_name, '<a href="https://twitter.com/'.$mention->screen_name.'" target="_blank"><s>@</s>'.$mention->screen_name.'</a>', $text);
			}
			echo '<li><a class="profile" href="https://twitter.com/'.$tweet->user->screen_name.'">'.
			'<img src="'.$tweet->user->profile_image_url.'" alt="'.$tweet->user->name.' Twitter icon" />'.
			'<strong>'.$tweet->user->name.'</strong><span class="profile_name"><b>@'.$tweet->user->screen_name.'</b></span></a>'.
			'<span class="tweet">'.$text.'</span><span class="pub_date"><a href="https://twitter.com/'.$tweet->user->screen_name.'/status/'.$tweet->id_str.'">'.
			date('Y-m-d H:i:s', strtotime($tweet->created_at)).'</a></span></li>';
		}
	}
}

こ、こんな感じでどーでしょーか?(動作は確認済み)
有効時間を30分にしていますが、もっと短くても良いかもしれませんね〜?よくツイートされるならw

date_default_timezone_set を使わない!(追記)

Simple Colorsまがりんさん からご指摘いただきました〜!

との事です。他の影響範囲への配慮が足りなかったんだと勉強になりました…!すごく!

function tweet_lines(){
 
	// キャッシュが無ければ実行
	if(($tweets = get_transient('statuses_userTimeline')) === false){
		include_once('codebird.php');
		include_once('class-wp-codebird.php');
 
		Codebird::setConsumerKey('【Consumer key】', '【Consumer key】');
		$cb = WP_Codebird::getInstance();
		$cb->setToken('【Access token】', '【Access token secret】');
 
		$params = array(
			'screen_name' => 'actyway',
			'count' => 50
		);
		$tweets = (array) $cb->statuses_userTimeline($params);
 
		// 200なら(正常に取得出来たら200が返ってくる)
		if($tweets[httpstatus] === 200){
 
			// キャッシュする、30分有効
			set_transient('statuses_userTimeline', $tweets, 60 * 30);
		}else{
			$tweets = false;
		}
	}
 
	if($tweets){
		array_pop($tweets);
 
		foreach($tweets as $tweet){
			$text = $tweet->text;
			foreach($tweet->entities->hashtags as $hashtag){
				$text = str_replace('#'.$hashtag->text, '<a href="https://twitter.com/search?q=%23'.$hashtag->text.'&src=hash" target="_blank"><s>#</s>'.$hashtag->text.'</a>', $text);
			}
			foreach($tweet->entities->symbols as $symbol){
				$text = str_replace('$'.$symbol->text, '<a href="https://twitter.com/search?q=%24'.$symbol->text.'&src=ctag" target="_blank"><s>$</s>'.$symbol->text.'</a>', $text);
			}
			foreach($tweet->entities->urls as $url){
				$text = str_replace($url->url, '<a href="'.$url->expanded_url.'" target="_blank">'.$url->display_url.'</a>', $text);
			}
			foreach($tweet->entities->user_mentions as $mention){
				$text = str_replace('@'.$mention->screen_name, '<a href="https://twitter.com/'.$mention->screen_name.'" target="_blank"><s>@</s>'.$mention->screen_name.'</a>', $text);
			}
			echo '<li><a class="profile" href="https://twitter.com/'.$tweet->user->screen_name.'">'.
			'<img src="'.$tweet->user->profile_image_url.'" alt="'.$tweet->user->name.' Twitter icon" />'.
			'<strong>'.$tweet->user->name.'</strong><span class="profile_name"><b>@'.$tweet->user->screen_name.'</b></span></a>'.
			'<span class="tweet">'.$text.'</span><span class="pub_date"><a href="https://twitter.com/'.$tweet->user->screen_name.'/status/'.$tweet->id_str.'">'.
			date('Y-m-d H:i:s', strtotime($tweet->created_at) + 9*3600).'</a></span></li>';
		}
	}
}

修正版です! date_default_timezone_set(‘Asia/Tokyo’); を削除して date(‘Y-m-d H:i:s’, strtotime($tweet->created_at)+ 9*3600) にしました。Twitter の API で取得出来る created_at も UTC みたいなので9時間(9*3600)足しています。

まがりんさんありがとうございま〜す!\(^o^)/

余談ですけど、ネットで情報を公開する事ってネガティブな言葉もらったりメンタル的にリスクあったりするけど、こうやってダメなところダメって指摘してもらえて勉強になるからじゃんじゃん公開したら良いと思うよ!