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

WordPress でマイツイートをぴよぴよ改!
「改」ってことで改良されてまーす!w

シンプルにツイート表示!

前回と言っても、もう1年以上前の記事なんですが、「WordPress のプラグイン無しですごく簡単にツイート表示しよー」って記事を書きました。JavaScript で動的に取得して表示ではなくて、WordPress 側(サーバー)でフィードを取得してアニメーションのみ jQuery を使って動かしています。今回の内容も比較的簡単に表示出来ると思いますよ〜!

New! MyTweet

・・・見た目。
頑張ってGIFアニ作ったけど、画質と動きがおかしくなってしまいました>< 不器用です!(だれか上手なGIFアニの作り方教えてくださいw)
原物はブログフッターに表示させていますので一度見てみてください。

前回からの変更点!

  • simplexml_load_file() を fetch_feed() に。
  • Tweet の取得をユーザータイムラインの RSS から Twitter Search API に。
  • jquery.totemticker.js をやめて jQuery のみで。
  • あと見た目は大幅に変更しました。

ツイート取得は functions.php で!

functions.php

サーバーサイドでフィード取得して HTML ソースに吐き出しを行いたいので WordPress の functions.php に下記の様なソースコードを書きます!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function tweet_lines(){
	include_once(ABSPATH . WPINC . '/feed.php');
	$feed = fetch_feed("http://search.twitter.com/search.atom?q=from%3Aactywav%20include%3Aretweets");
	if(!is_wp_error($feed)){
		date_default_timezone_set('Asia/Tokyo');
		$feed->set_cache_duration(3600);
		$feed->init();
		$items = $feed->get_items(0,0);
		foreach($items as $item){
			$icon = $item->get_links("image");
			$author = $item->get_author();
			preg_match('/(.+) ((.+))/',$author->get_name(),$authors);
			echo '<li><a class="profile" href="'.$author->get_link().'"><img src="'.$icon[0].'" alt="'.$authors[1].'" /><strong>'.$authors[2].'</strong><span class="profile_name"><b>@'.$authors[1].'</b></span></a><span class="tweet">'.$item->get_content().'</span><span class="pub_date"><a href="'.$item->get_link().'">'.$item->get_date("Y年m月j日 - G:i").'</a></span></li>';
		}
	}
}

actyway ではこんな感じで書いています。

<ul id="vertical-ticker"><?php tweet_lines(); ?></ul>

ツイートを表示させたい場所にこう書いて上記の関数を呼び出しします!
actyway では、footer.php に書いています。

ソースコードの説明

2: fetch_feed() を使うのに feed.php を読み込まないといけない。
3: fetch_feed() で URL を読み込み $feed に格納。
5: 取得したままの時間だと9時間ずれるのでタイムゾーンを日本に。
6: fetch_feed() はキャッシュが使えるので3600秒に。
8: SimplePie の get_items() 第一引数は何個目から開始するか、第二引数は取得数。0で全て。

あとは適当にHTMLタグ決めて出力しています。
fetch_feed() は SimplePie を使っているのでこんな感じになりました。

参考リンク

Twitter Search API

Twitter Search API

Twitter 関連まったく触ったことなかったのでよく分かっていませんが、「Twitter Search API」なる物があって簡単に検索結果を取得出来てしまうんですよね〜??

$feed = fetch_feed(“http://search.twitter.com/search.atom?q=from%3Aactywav%20include%3Aretweets”);

さきほどソースコードに出てきた fetch_feed() で指定していた URL が「Twitter Search API」です。

http://search.twitter.com/search.atom?q=検索したい内容

認証不要で検索結果は Atom で返してくれると!便利!素敵!
なんで去年に知らなかったんだろ〜!!と悔やみました〜w

Twitter 検索オプション

肝心の「検索したい内容」の文字列なのですが、Twitter Search API のドキュメント見れば分かるんでしょうけど、ハードル高いですよね〜?しかも「簡単にツイート表示しよー」とか言ってるのにw

なので、Twitter / 検索オプション を使います。

Twitter 検索オプション

わたしは ユーザー名が「actywav」なので「このユーザーからのツイート」に「actywav」を記入。あと他の方のツイートをリツイートした場合も表示させたかったので、「リツイートを含む」にチェック入れています。で、この条件で検索します。

from:actywav include:retweetsの検索結果

検索結果の画面ではなく、アドレス部分を見ていただきたいんです!
「https://twitter.com/#!/search/」以降の文字列は Twitter Search API でも共通でそのまま使えるんじゃないかなーと思い試したところいけてるみたいです!(間違っていたらすみませんw)

http://search.twitter.com/search.atom?q=from%3Aactywav%20include%3Aretweets

なのでー、さきほどの Twitter Search API のURL と今の文字列を合体してこんな感じになりました。
fetch_feed() の URL に指定してみてくださーい!
簡単でしょ?

参考リンク

CSS!

参考程度に!
こんな感じで書いていまーす。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#vertical-ticker{
	height: 220px;
	background: white;
	width: 260px;
	overflow: hidden;
	margin: 0;
	padding: 0 10px;
	box-shadow: #9f9f9f 0 0 4px -1px;
}
#vertical-ticker li{
	list-style: none;
	display: block;
	color: #8f8f8f;
	font-size: 13px;
	height: 200px;
	width: 240px;
	padding: 10px;
	line-height: 150%;
	letter-spacing: 0.05em;
	overflow: hidden;
	background: white;
	position: absolute;
}
#vertical-ticker .profile{
	display:block;
	margin-bottom:10px;
}
#vertical-ticker .profile:after{
	content:"";
	display:block;
	clear:both;
}
#vertical-ticker img{
	float:left;
	margin-right:6px;
}
#vertical-ticker strong{
	display:block;
	float:left;
	width:186px;
	height:20px;
	margin-top:6px;
}
#vertical-ticker .profile_name{
	display:block;
	float:left;
	width:186px;
	height:22px;
}
#vertical-ticker .tweet{
	display:block;
	margin-bottom:4px;
}
#vertical-ticker .pub_date{
	display:block;
	font-size:80%;
}

jQuery!

jQuery だけ使っています!
余計なプラグインは使わずに読み込み速度重視ってことで〜w

1
2
3
4
5
<script type="text/javascript">
<!--
setInterval(function(){$('#vertical-ticker li:first').hide(function(){$(this).appendTo($('#vertical-ticker')).slideDown(1500);});},4500);
//-->
</script>

slideDown() の秒数と setInterval() の秒数はお好みで変更してくださーい。
上の数値だとスライドダウンに1.5秒、3秒間ツイート表示、その後にまたスライドを繰り返しています。

最後に…

最近 Web-Clutch と言うブログを始められた @_aqua_note さんに fetch_feed() の事を教えていただきました。

きっと教えていただけなかったら、ツイート表示部分も新しくしなかっただろうし、こうゆう記事も書かなかったと思います、きっかけをありがとうございますm(__)mペコリ

今回のソースコードは Twitterのツイートを表示する-RSS編 | Web-Clutch の記事も参考にさせていただきました、ありがとうございまーす!