TwitterのjQueryプラグイン『Tweet!』を使ってみた

TwitterのjQueryプラグイン『Tweet!』を使ってみた – qazqaz note“使ってみた”って書いたけど、ずいぶん前から使ってます。

Tweet!さんはアバター表示が出来て、複数アカウントでの取得・表示が可能で、使い方によってはとっても面白い事出来ますｗ

本業で使うときはかなりいじったソースでほぼ原形を留めてないけどｗｗ

サンプルソースなんでご参考まで。。

表示サンプル

shin_qazの最近のつぶやきを3件表示

linux“で検索した結果を5件表示

ソース

上記で表示しているサンプルのソースは以下の通りです。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/uploads/2012/05/jquery.tweet_.js"></script>
<link rel="stylesheet" type="text/css" href="/uploads/2012/05/jquery.tweet_.css" />
<script type="text/javascript">
// <![CDATA[
$(function() {
$(".tweet").tweet({
join_text: "auto",
username: "shin_qaz",
avatar_size: 48,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."
});
$(".query").tweet({
avatar_size: 32,
count: 5,
query: "linux",
loading_text: "searching twitter..."
});
});
// ]]>
</script>
<p><a href="http://twitter.com/shin_qaz">shin_qaz</a>の最近のつぶやきを3件表示</p>
<div class="tweet"></div>
<p><a href="http://search.twitter.com/search?q=linux">linux</a>"で検索した結果を5件表示</p>
<div class="query"></div>

サンプルソースの解説。。

1行目
jQueryを読込み。例のヤツ使ってマスｗ

2行目
Tweet!（今回の主役）を読込み。（javascriptファイル）

3行目
Tweet!（今回の主役）を読込み。（cssファイル）

8～19行目
指定ユーザ（10行目）のツイートを取得

20～25行目
指定クエリ（23行目）でのツイートを取得

31行目
ユーザのツイートを表示

34行目
クエリのツイートを表示