[jQuery]検索結果で表示可能なTwitterブログパーツを設置できる「Monitter」

2009-03-19 | Sigeo | 0 | カテゴリ Ajax, Twitter （ツイッター）

Twitterの検索結果をタイムラインで表示するようなブログパーツってなかなかないですよね。

今回ご紹介するブログパーツは、jQueryで動かす割には設定がほとんど不要で、Twitter検索結果も表示できる手軽で便利なものになっています。

「Monitter Widget」は、jQueryを使って設置でき、Twitter検索結果でも表示できるブログパーツ。

検索キーワードをブログパーツを表示するdiv要素のtitle属性に書くだけで良いので、設置もかなりカンタンです。

ここではCSSの影響を受けないようにするため、iframeで埋め込んでいます。そのため、リンクをクリックしてもちゃんと開きませんｗブログパーツ設置ページはこちらになります。

このブログを紹介してくれていると思われる投稿: title属性が検索結果になります。この部分のソースコードは下記。; <div class="monitter" id="tweets" title="WEBマーケティングブログ" lang="ja"></div>; ↑title属性に検索キーワードを入れているだけです。
ユーザー名での検索結果表示: ↑「from:ユーザー名」で自分の呟きをタイムライン表示できます。; ↓ユーザー名で表示するコードのサンプル
<div class="monitter" id="tweets2" title="from:web__marketing" lang="ja"></div>
「わさお」での検索結果: ↑なんでもやりたい放題ｗ

1. ダウンロード: Monitter Widgetのページを開き、「Download the zip 」というリンクから「monitter_widget_v1_1.zip」をダウンロード。
2. サーバーへアップロード: ダウンロードしたZipファイルを解凍し、フォルダごと任意の場所へアップロード
3. 表示させたいページにコードを追加: ページに表示させたい場合は、<head> 内に下記コードを追加
<script type="text/javascript" src="設置ディレクトリのURL/jquery.min.js"></script> <script type="text/javascript" src="設置ディレクトリのURL/monitter.min.js"></script> <link rel="stylesheet" href="設置ディレクトリのURL/monitter.css" />; ブログパーツを表示させる部分に下記コードを追加
<div class="monitter" id="tweets" title="検索キーワード又はユーザー名" lang="ja"></div>; 「lang属性を “en” にすると英語のみ拾う」というような仕組みになっています。

興味のある方はMonitter Widgetへどうぞ。

検索結果で表示できることからも、プロモーションで「こんな意見が出ています。」系の見せ方も出来そうです。使い方次第でおもしろくなりそう。

スポンサードリンク

jQueryを使って設置でき、Twitter検索結果でも表示できるブログパーツ