<p class="thumb"><img src="http://web-marketing.zako.org/images/2009/03/monitter.png" alt="Twitter検索結果で表示できるjQueryブログパーツ" title="Twitter検索結果で表示できるjQueryブログパーツ" width="514" height="204" class="alignnone size-full wp-image-2612" /></p><p>Twitterの検索結果をタイムラインで表示するようなブログパーツってなかなかないですよね。</p><p>今回ご紹介するブログパーツは、jQueryで動かす割には設定がほとんど不要で、Twitter検索結果も表示できる手軽で便利なものになっています。</p><!--more--><h3 class="header-label">Twitter検索結果で表示できるjQueryブログパーツ</h3><p>「<a class="website-link" href="http://monitter.com/widget/index.html" onclick="window.open('http://monitter.com/widget/index.html'); return false;">Monitter Widget</a>」は、<strong>jQueryを使って設置でき、Twitter検索結果でも表示できるブログパーツ</strong>。</p><p>検索キーワードをブログパーツを表示するdiv要素のtitle属性に書くだけで良いので、設置もかなりカンタンです。</p><h4 class="header-label">「Monitter」の特徴</h4><ul><li>title属性が検索クエリになる</li><li>lang属性で言語の絞込み可能</li><li>シンプルなCSSでデザイン設定可能</li></ul><p>ここではCSSの影響を受けないようにするため、iframeで埋め込んでいます。そのため、リンクをクリックしてもちゃんと開きませんｗ <a href="http://web-marketing.zako.org/monitter/samples.html">ブログパーツ設置ページはこちら</a>になります。</p><dl class="head-line"><dt>このブログを紹介してくれていると思われる投稿</dt><dd><iframe src="http://web-marketing.zako.org/monitter/webm.html" width="315" height="415" frameborder="0" scrolling="no"></iframe></dd><dd>title属性が検索結果になります。この部分のソースコードは下記。</dd>
<dd><textarea name="code" class="xhtml"><div class="monitter" id="tweets" title="WEBマーケティングブログ" lang="ja"></div></textarea></dd><dd>↑title属性に検索キーワードを入れているだけです。</dd><dt>ユーザー名での検索結果表示</dt><dd><iframe src="http://web-marketing.zako.org/monitter/webmuser.html" width="315" height="415" frameborder="0" scrolling="no"></iframe></dd><dd>↑「from:ユーザー名」で自分の呟きをタイムライン表示できます。</dd><dd>↓ユーザー名で表示するコードのサンプル<br /><textarea name="code" class="xhtml"><div class="monitter" id="tweets2" title="from:web__marketing" lang="ja"></div></textarea></dd><dt>「わさお」での検索結果</dt><dd><iframe src="http://web-marketing.zako.org/monitter/news.html" width="315" height="415" frameborder="0" scrolling="no"></iframe></dd><dd>↑なんでもやりたい放題ｗ</dd></dl><h4 class="header-label">設置方法</h4><dl class="head-line"><dt>1. ダウンロード</dt><dd><a class="website-link" href="http://monitter.com/widget/index.html" onclick="window.open('http://monitter.com/widget/index.html'); return false;">Monitter Widget</a>のページを開き、「Download the zip 」というリンクから「monitter_widget_v1_1.zip」をダウンロード。</dd><dt>2. サーバーへアップロード</dt><dd>ダウンロードしたZipファイルを解凍し、フォルダごと任意の場所へアップロード</dd><dt>3. 表示させたいページにコードを追加</dt><dd>ページに表示させたい場合は、&lt;head&gt; 内に下記コードを追加<br /><textarea name="code" class="xhtml">
<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" />
</textarea></dd><dd>ブログパーツを表示させる部分に下記コードを追加<br /><textarea name="code" class="xhtml"><div class="monitter" id="tweets" title="検索キーワード又はユーザー名" lang="ja"></div></textarea></dd><dd>「lang属性を "en" にすると英語のみ拾う」というような仕組みになっています。</dd></dl><p>興味のある方は<a class="website-link" href="http://monitter.com/widget/index.html" onclick="window.open('http://monitter.com/widget/index.html'); return false;">Monitter Widget</a>へどうぞ。</p>
<p>検索結果で表示できることからも、プロモーションで「こんな意見が出ています。」系の見せ方も出来そうです。 使い方次第でおもしろくなりそう。</p><p>Via：<a class="website-link" href="http://delicious.com/url/36749956d56f4fa90a2bc60bcb71d6da" onclick="window.open('http://delicious.com/url/36749956d56f4fa90a2bc60bcb71d6da'); return false;">delicious</a></p>