これはjQueryユーザーにとっては手軽で、良いかも。アバターの表示や複数アカウントを表示できるのも魅力のひとつ。それ以外の方でも、jQuery

jQueryでTwitterブログパーツ（アバター付）ができる「Tweet!」

これはjQueryユーザーにとっては手軽で、良いかも。アバターの表示や複数アカウントを表示できるのも魅力のひとつ。

それ以外の方でも、jQueryを導入してみる良い機会になるのでは？

• 
• 組織のマインドマップツールをマインドマイスターにすべき理由
• 伸びてる産業、会社、事業を紹介しまくるStrainerのニュースレターに登録!!

jQueryでTwitterブログパーツをサイトに表示できるプラグイン

Twitterをサイトに表示させるとき、アバターを表示させるのに設定が面倒だったりしますが、「Tweet!」はオプションを数行追加するだけでいろいろな設定ができてしまいます。

「Tweet!」の特徴

読み込みが速い

このエントリでもJSを一番下に記述しているにも関わらず、読み込みが速く感じられました。

ロード中でもページの表示へ影響しない

通常TwitterのJSONを表示させると、Twitterが落ちているときなどに影響を受けますが、それがなくなります。

最大で100エントリ表示

用途によっては便利

アバターを表示できる

結構出来ないのが多いですよね

複数アカウントの表示も可能

これもおもしろいですね。 使い方次第でプロモにも使えそう。

@replies やURL、#hashtags を自動的にリンク化

これも必須項目

Twitterブログパーツサンプル

当ブログのCSSを影響させたままになってしまっていますがｗ

スタートアップガイド

1. Tweet!のページを開き、「Download」項の「Tar」をダウンロードします。
2. ダウンロードした「seaofclouds-tweet-ほにゃらら.tar.gz」を解凍し、中にある下記ファイルを取り出します。
   • 「javascripts」のフォルダにある「jquery.tweet.js」
   • 「stylesheets」のフォルダにある「jquery.tweet.css」
   「jquery.tweet.css」は、中身を既存のCSSへ貼り付けるのが良いと思います。
3. 「jquery.tweet.js」をテキストファイルで開き、4行目にある下記の seaofclouds の部分を表示させたいアカウントへ変更しますusername: [“seaofclouds”], 複数アカウントを表示させたい場合は “username1″,”username2″,”etc” というように記述します。
4. 同じく「jquery.tweet.js」でオプションを設定します。5行目から15行目がオプション設定項目です。 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 }; 最低限のオプションに説明を絞っています。
5. 「jquery.tweet.js」を「UTF-8（BOM付き）」で保存します。（※それ以外のエンコードで保存すると文字化けします。）
6. 「jquery.tweet.js」をJSが入っているディレクトリへ（ここでは「js」というフォルダへ入れることを前提としています。）アップロードします。
7. ページへJavascriptのコードを追加します。

   jQueryを利用中の場合と、利用していない場合

   下記JSを head 内か </body> 直前に追加します。

   <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>

   jQueryを利用していない場合

   　上記に加え、下記コードを head 内か </body> 直前に追加すればOKです。

   <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script>

8. HTMLコードの追加、下記コードを表示させたい部分に設置します。<div class="tweet"></div>
9. 見た目をカスタマイズしたい場合、「jquery.tweet.css」の中身（下記内容）を使用して調整します。
   .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; }

これはなかなか使えそうです。 Twitterを使って何かしたいというときにもオススメできそうなjQueryプラグインだと思います。 ちょっと模索してみようかなｗ

Via:Delicious