WordPress のプラグイン無しですごく簡単にツイート表示しよー

WordPress でマイツイートをぴよぴよ!ブログでシンプルにツイート表示させた〜い!

余計なことはしません!!

(というか出来ませんw)
ブログのサイドバーにちょこっとツイートを表示させたいんですけど、良い物が見つからないので自作してみました!

元々は Twitroll でにゅーんにゅーんと表示させていたのですが、外部サイトだと重くて表示されなかったり、他の JavaScript のだと画面表示までもたついたりで気に入らない点がありました。WordPress は PHP が使えるので Twitter から直接データ取って来て jQuery とかで適当にやっています。

Twitroll
完成イメージは Twitroll の縦スクロールバージョンです!
※ Twitroll(twitroll.com)はサービス終了してるみたいですね…

PHP でツイートの取得

Twitter のログを取得するのに色々と方法あるんでしょうけど、API とか OAuth とか難しいことは分からない(面倒なことは嫌い)ので公式の HTML ソースを取得して…とか考えたんですけど、それも非合理的な気がして、結局は RSS で落ち着きました。時間を計測したところ大体 0.7 秒未満で取得出来ていました。

自分のアカウントの RSS の URL

Twitter の公式サイトのソースに RSS の URL が書いてあったような気がしたのですが見当たりませんでした。(お気に入りの RSS しかありません)でもどこかで見た記憶があって、ハッと思いつきました。旧デザインの公式サイトにあったんですねw

Twitter

公式サイトの左上の自分のアカウント名のメニューより 旧 Twitter へ のリンクがありますので旧デザインに変更します。

旧 Twitter

数ヶ月前まではこれを見ていたのに、何だか懐かしいですねw RSS のリンクはプロフィールの画面にありますので、プロフィールを開いてくださいね!

旧 Twitter

画面左の真ん中あたりに「アカウント名 + のツイートのRSSフィード」ってリンクがありますので URL をコピーしておいてください。

http://twitter.com/statuses/user_timeline/251584637.rss

ちなみにわたしのアカウントではこんな URL でした。

※ いつからか忘れましたが、Twitter で RSS フィードの配信は行われなくなっています。新しく書いたこちらの記事かそれより新しいこちらの記事が参考になるかもしれません。

PHP で RSS を取得!

あとは PHP で RSS を取得して整形して表示するだけですね。簡単かんたんー。とりあえず functions.php に関数書いてそれを表示したい場所で呼び出しするって方法です。

function tweet_lines(){
	$rss_url = simplexml_load_file("http://twitter.com/statuses/user_timeline/220379569.rss");
	foreach($rss_url->channel->item as $item){
		$dt = explode("+",$item->pubDate);
		echo "<li>".str_replace("\n",'',$item->description)." <a href='".$item->link."'>".$dt[0]."</a></li>";
	}
}

色々試行錯誤した結果なんですけど、7行で収まりましたw コンパクトでスッキリです!とりあえず URL 部分だけをご自分のRSS の URL に置き換えていただけたら OK ですよー!

あとはお使いのテーマの functions.php に貼りつけてください。

好きな場所に表示!

わたしはサイドバーに表示させたかったので、sidebar.php に書きました。

<!-- start sidebars -->
<div id="sidebar">
	<ul>
		<li id="profile" class="widget widget_profile">
			<h4 class="widgettitle">プロフィール</h4>
				<li class="profile-item-1"><ul id="vertical-ticker"><?php tweet_lines(); ?></ul></li>
		</li>
	</ul>
</div>
<!-- end sidebars -->

ちょと省略していますけど、こんな感じにしています。あとは適当にスタイルを付けるか jQuery とかで色々やってみてください。
※ あとで導入する jQuery 用に ul に「id=”vertical-ticker”」を書いてあります。

<li>actywav: RT @ub_pnr: きれいな webfont と思ったら cufon だった。それはともかく素敵なサイト。 / Kathryn Cornelius — My Food & Drupal Blog <a href="http://www.kathryncorneli.us/recent-blog" target="_blank" rel="noreferrer" style="cursor: help; display: inline !important; ">http://www.kathryncorneli.us/recent-blog</a> <a href="http://twitter.com/actywav/statuses/45862488968929281" target="_blank">Thu, 10 Mar 2011 15:04:04</a></li>
<li>actywav: @Z_OKATCH なにいってるんだい御徒町くん <a href='http://twitter.com/actywav/statuses/45860810374905857'>Thu, 10 Mar 2011 14:57:23 </a></li> 
<li>actywav: @soraiy はーいw <a href='http://twitter.com/actywav/statuses/45860711116718080'>Thu, 10 Mar 2011 14:57:00 </a></li> 
<li>actywav: @yat8823jp は〜いwありがとうございます〜w <a href='http://twitter.com/actywav/statuses/45859248143474688'>Thu, 10 Mar 2011 14:51:11 </a></li> 
<li>actywav: @soraiy @yat8823jp おつかれさまw <a href='http://twitter.com/actywav/statuses/45859042266062848'>Thu, 10 Mar 2011 14:50:22 </a></li> 
<li>actywav: @Z_OKATCH ちがうー!これでもじもじしてただけwhttp://actyway.com/2672 <a href='http://twitter.com/actywav/statuses/45827245008367616'>Thu, 10 Mar 2011 12:44:01 </a></li> 
<li>actywav: もじもじ #mozpark <a href='http://twitter.com/actywav/statuses/45820961055965184'>Thu, 10 Mar 2011 12:19:03 </a></li> 
<li>actywav: RT @Stocker_jp: 【今さら書いた】無料写真素材サイト Free.Stocker を公開しました http://stocker.jp/diary/free_stocker_open/ <a href='http://twitter.com/actywav/statuses/45659750305763328'>Thu, 10 Mar 2011 01:38:27 </a></li> 
<li>actywav: RT @moongift: これ面白い。自分で立てたWordPressの中にWordPress.comのウィジェットを埋め込むプラグイン。 RT Jetpack http://is.gd/YXeEY6 <a href='http://twitter.com/actywav/statuses/45656790091837440'>Thu, 10 Mar 2011 01:26:41 </a></li> 
<li>actywav: Firefox 4 リリースキャンペーンだって〜w おもしろいねーFirefox 4 のコードネーム、アマゾンのトゥムクマケ国立公園がバーチャルパークになりました。http://virtualpark.mozilla.org/ #mozpark <a href='http://twitter.com/actywav/statuses/45650182712471552'>Thu, 10 Mar 2011 01:00:26 </a></li> 
<li>actywav: @yat8823jp やと兄はもう春まみれじゃないですかー! <a href='http://twitter.com/actywav/statuses/45635145570590720'>Thu, 10 Mar 2011 00:00:41 </a></li> 
<li>actywav: @glatyou そうなんですか〜w案が固まったら見せてくださいw <a href='http://twitter.com/actywav/statuses/45634941828071424'>Wed, 09 Mar 2011 23:59:52 </a></li> 
<li>actywav: @yat8823jp おはやとございますー☆今日も寒いですね〜w <a href='http://twitter.com/actywav/statuses/45634799225942017'>Wed, 09 Mar 2011 23:59:18 </a></li> 
<li>actywav: @glatyou サイトデザインですか〜w星まみれにするんですか?? <a href='http://twitter.com/actywav/statuses/45630325052813312'>Wed, 09 Mar 2011 23:41:31 </a></li> 
<li>actywav: @Z_OKATCH おはおー <a href='http://twitter.com/actywav/statuses/45629324220579840'>Wed, 09 Mar 2011 23:37:33 </a></li> 
<li>actywav: @glatyou ぇーかぶってもいいじゃないですかwわたしは挨拶の時とキランみたいな決めの時だけですよー <a href='http://twitter.com/actywav/statuses/45629282017484800'>Wed, 09 Mar 2011 23:37:23 </a></li> 
<li>actywav: 公式不調! <a href='http://twitter.com/actywav/statuses/45629027913969664'>Wed, 09 Mar 2011 23:36:22 </a></li> 
<li>actywav: タイムアウト入れないとまきこまれて表示されないとか><っ <a href='http://twitter.com/actywav/statuses/45628979637530624'>Wed, 09 Mar 2011 23:36:11 </a></li> 
<li>actywav: @glatyou ぉーそうなんですか〜wありがとうございますwハッピーです〜w <a href='http://twitter.com/actywav/statuses/45627816397647873'>Wed, 09 Mar 2011 23:31:33 </a></li> 
<li>actywav: @glatyou おはようございます〜☆ <a href='http://twitter.com/actywav/statuses/45626709021691904'>Wed, 09 Mar 2011 23:27:09 </a></li>

tweet_lines() が吐き出すソースはこんな感じになります。Twitter の RSS は最新の20件を送ってくれるみたいですね。

jQuery でもう一手間加える!

やっぱり表示領域の節約と動的にしたいので jQuery を探してみました!
コリスさんの記事で良さそうな Totem と言う jQuery のプラグインが紹介されていましたのでこれにしました。

http://buildinternet.com/project/totem/

Totem: A Vertical Ticker jQuery Plugin

jquery.totemticker.js を入れてみよー!

公式サイトからのダウンロードだと、バージョンが古いみたいなのでリンクしてある github より新しい物をダウンロードして導入してみました。とりあえず jquery.totemticker.min.js か jquery.totemticker.js だけあれば OK です!

https://github.com/buildinternet/totem/tree/master/js

https://github.com/buildinternet/totem/…
※ zip ファイルを直接ダウンロードはこちら

WordPress に導入してみよー!
<head>
<meta />
<meta />
<link />
<link />
<?php wp_enqueue_script('totemticker', get_bloginfo('template_url') . '/js/jquery.totemticker.min.js', array('jquery')); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#vertical-ticker').totemticker({
		row_height: '160px',
		speed: 1000,
		interval: 5000,
		mousestop: true,
		direction:'up'
	});
});
</script>
<title></title>
</head>

わたしはヘッダーで読み込みしているのでこんな感じで書いています。

ちょと省略&修正してますが雰囲気はこんなのです。
WordPress の jQuery の読み込みはちょと決まりがあるので知らない人は webdesignrecipesさんのブログ などを見て勉強してみてください。詳しく書かれていますよ。

jquery.totemticker のオプションの説明

jquery.totemticker は動作を指定出来るオプションが用意されています。
公式サイトデモを見ていただけたら分かると思いますが、今回使っているオプションだけ説明しておきます。最低 row_height のみを指定しておけば、他はデフォルト値が設定されているみたいなので動くと思います。

row_height

これは li の高さ (px) です。この高さ分、上もしくは下にスクロールします。

speed

スピードはスクロールの速度です。ゆっくりにしたい場合は数値を大きくしてください。

interval

インターバルは間隔です。一度スクロールしてから次に動作するまでのミリ秒を指定します。
5000 だと5秒です。

mousestop

マウスオーバーした時に次の動作を停止するか動作させたままかです。
true だと停止で false だと動いたままです。
一度マウスオーバーさせても離すと動き出します。

direction

スクロールする方向だと思うなのですが、up を指定すると下向きにスクロールします。
デフォルトは down が指定されているみたいです。

CSS を指定しよー!

CSS を指定して最後になります。
わたしはサイドバーに表示したいので1行表示でコンパクトにして角丸を指定しています。

全体の高さは 160px にしています。
これでも 140 文字いっぱいだと表示されない部分が出るかもしれません。余裕を持たすなら高さは 180px は欲しいかも?!

#vertical-ticker{
	height: 160px;
	overflow: hidden;
	margin: 0 0 20px 0;
	padding-left: 10px;
	width: 190px;
	background: #009fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}
#vertical-ticker li{
	display: block;
	color: white;
	font-size: 12px;
	height: 140px;
	padding: 10px;
	line-height: 120%;
}

完成です!

今回の PHP で Twitter の RSS 読み込み&表示、Totem で挙動の指定、CSSで見た目を指定した物が現在サイドバーの上の方に表示されているにゅーんにゅーんと動いている青い部分です。

アニメーションGIF
見た目など変更するかもなのでGIFアニ貼っておきます!

不明点などありましたら Twitter でメンション飛ばしてください。お答え出来る範囲は答えさせていただきますw
にゅーんにゅーんw