<span class="mt-enclosure mt-enclosure-image" /><img alt="jQueryでTwitterブログパーツ（アバター付）ができるプラグイン" src="http://web-marketing.zako.org/images/jquery-plugin-for-twitter.png" width="514" height="204" style="" /></span><p>これはjQueryユーザーにとっては手軽で、良いかも。アバターの表示や複数アカウントを表示できるのも魅力のひとつ。</p><p>それ以外の方でも、jQueryを導入してみる良い機会になるのでは？</p>

<!--more-->
<h3 class="header-label">jQueryでTwitterブログパーツをサイトに表示できるプラグイン</h3>

<p><a href="http://web-marketing.zako.org/tag/Twitter-%E3%83%96%E3%83%AD%E3%82%B0%E3%83%91%E3%83%BC%E3%83%84">Twitterをサイトに表示</a>させるとき、アバターを表示させるのに設定が面倒だったりしますが、「<a class="web-site-link" href="http://tweet.seaofclouds.com/" onclick="window.open('http://tweet.seaofclouds.com/'); return false;">Tweet!</a>」はオプションを数行追加するだけでいろいろな設定ができてしまいます。</p>

<h4 class="header-label">「Tweet!」の特徴</h4>
<dl class="head-line">
<dt>読み込みが速い</dt>
<dd>このエントリでもJSを一番下に記述しているにも関わらず、読み込みが速く感じられました。</dd>
<dt>ロード中でもページの表示へ影響しない</dt>
<dd>通常TwitterのJSONを表示させると、Twitterが落ちているときなどに影響を受けますが、それがなくなります。</dd>
<dt>最大で100エントリ表示</dt>
<dd>用途によっては便利</dd>
<dt>アバターを表示できる</dt>
<dd>結構出来ないのが多いですよね</dd>
<dt>複数アカウントの表示も可能</dt>
<dd>これもおもしろいですね。 使い方次第でプロモにも使えそう。</dd>
<dt>@replies やURL、#hashtags を自動的にリンク化</dt>
<dd>これも必須項目</dd>
</dl>

<h4 class="header-label">Twitterブログパーツサンプル</h4>
<p>当ブログのCSSを影響させたままになってしまっていますがｗ</p>
<style text/css>
.tweet {
color: #085258; }
.tweet .tweet_list {
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #8ADEE2; }
#beta .entry-more .tweet .tweet_list li {
list-style-type: none;
background:none;
overflow: auto;
padding: .5em; }
.tweet .tweet_list li a {
background-image:none;
color: #0C717A; }
.tweet .tweet_list .tweet_even {
background-color: #91E5E7; }
.tweet .tweet_list .tweet_avatar {
padding-right: .5em;
float: left; }
.tweet .tweet_list .tweet_avatar img {
vertical-align: middle; }
</style>
<div class="tweet"></div>

<h4 class="header-label">スタートアップガイド</h4>
<ol class="head-line">
<li><a class="web-site-link" href="http://tweet.seaofclouds.com/" onclick="window.open('http://tweet.seaofclouds.com/'); return false;">Tweet!</a>のページを開き、「Download」項の「Tar」をダウンロードします。</li>
<li>ダウンロードした「seaofclouds-tweet-ほにゃらら.tar.gz」を解凍し、中にある下記ファイルを取り出します。
<ul>
<li>「javascripts」のフォルダにある「jquery.tweet.js」</li>
<li>「stylesheets」のフォルダにある「jquery.tweet.css」</li>
</ul>
「jquery.tweet.css」は、中身を既存のCSSへ貼り付けるのが良いと思います。
<li>「jquery.tweet.js」をテキストファイルで開き、4行目にある下記の seaofclouds の部分を表示させたいアカウントへ変更します<textarea name="code" class="js" cols="60" rows="5" id="code">username: ["seaofclouds"], </textarea>複数アカウントを表示させたい場合は "username1","username2","etc" というように記述します。</li>
</li>
<li>同じく「jquery.tweet.js」でオプションを設定します。5行目から15行目がオプション設定項目です。<textarea name="code" class="js" cols="60" rows="5" id="code">      avatar_size: ここにサイズを数字だけで入れます,                      // [integer]  height and width of avatar if displayed (48px max)
count: 表示するつぶやきの数,                               // [integer]  how many tweets to display?
intro_text: null,                       // [string]   do you want text BEFORE your your tweets?
outro_text: null,                       // [string]   do you want text AFTER your tweets?
join_text:  null,                       // [string]   optional text in between date and tweet, try setting to "auto"
auto_join_text_default: "つぶやきに追加する語句",      // [string]   auto text for non verb: "i said" bullocks
auto_join_text_ed: "i",                 // [string]   auto text for past tense: "i" surfed
auto_join_text_ing: "i am",             // [string]   auto tense for present tense: "i was" surfing
auto_join_text_reply: "リプライのときに追加する語句",   // [string]   auto tense for replies: "i replied to" @someone "with"
auto_join_text_url: "i was looking at", // [string]   auto tense for urls: "i was looking at" http:...
loading_text: null                      // [string]   optional loading text, displayed while tweets load
};</textarea>
最低限のオプションに説明を絞っています。
</li>
<li>「jquery.tweet.js」を<strong>「UTF-8（BOM付き）」で保存</strong>します。（※それ以外のエンコードで保存すると文字化けします。）</li>
<li>「jquery.tweet.js」をJSが入っているディレクトリへ（ここでは「js」というフォルダへ入れることを前提としています。）アップロードします。</li>
<li>ページへJavascriptのコードを追加します。
<dl class="head-line">
<dt>jQueryを利用中の場合と、利用していない場合</dt>
<dd>下記JSを head 内か &lt;/body&gt; 直前に追加します。</dd>
<dd><textarea name="code" class="js" cols="60" rows="5" id="code"><script language="javascript" src="http://あなたのドメイン/js/jquery.tweet.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".tweet").tweet({
join_text: "auto",
});
});
</script></textarea></dd>
<dt>jQueryを利用していない場合</dt>
　上記に加え、下記コードを head 内か &lt;/body&gt; 直前に追加すればOKです。
<dd><textarea name="code" class="js" cols="60" rows="5" id="code"><script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.2.6");</script></textarea></dd>
</dl>
</li>
<li>HTMLコードの追加、下記コードを表示させたい部分に設置します。<textarea name="code" class="xml" cols="60" rows="5" id="code"><div class="tweet"></div></textarea></li>
<li>見た目をカスタマイズしたい場合、「jquery.tweet.css」の中身（下記内容）を使用して調整します。<br /><textarea name="code" class="css" cols="60" rows="5" id="code">.tweet {
font-family: Georgia, serif;
font-size: 120%;
color: #085258; }
.tweet .tweet_list {
-webkit-border-radius: .5em;
list-style-type: none;
margin: 0;
padding: 0;
background-color: #8ADEE2; }
.tweet .tweet_list li {
overflow: auto;
padding: .5em; }
.tweet .tweet_list li a {
color: #0C717A; }
.tweet .tweet_list .tweet_even {
background-color: #91E5E7; }
.tweet .tweet_list .tweet_avatar {
padding-right: .5em;
float: left; }
.tweet .tweet_list .tweet_avatar img {
vertical-align: middle; }</textarea>
</li>
</ol>
<p>これはなかなか使えそうです。 Twitterを使って何かしたいというときにもオススメできそうなjQueryプラグインだと思います。 ちょっと模索してみようかなｗ</p>
<p>Via:<a class="web-site-link" href="http://delicious.com/url/167265e9f3fcb6bdb3b077c58f75ae48" onclick="window.open('http://delicious.com/url/167265e9f3fcb6bdb3b077c58f75ae48'); return false;">Delicious</a></p>