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

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

2008-12-26 | Sigeo | 0 | カテゴリ Ajax, Twitter (ツイッター)

jQueryでTwitterブログパーツ(アバター付)ができるプラグイン

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

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

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

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

「Tweet!」の特徴

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

Twitterブログパーツサンプル

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

スタートアップガイド

  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 の部分を表示させたいアカウントへ変更します複数アカウントを表示させたい場合は “username1″,”username2″,”etc” というように記述します。
  4. 同じく「jquery.tweet.js」でオプションを設定します。5行目から15行目がオプション設定項目です。 最低限のオプションに説明を絞っています。
  5. 「jquery.tweet.js」を「UTF-8(BOM付き)」で保存します。(※それ以外のエンコードで保存すると文字化けします。)
  6. 「jquery.tweet.js」をJSが入っているディレクトリへ(ここでは「js」というフォルダへ入れることを前提としています。)アップロードします。
  7. ページへJavascriptのコードを追加します。
    jQueryを利用中の場合と、利用していない場合
    下記JSを head 内か </body> 直前に追加します。
    jQueryを利用していない場合
     上記に加え、下記コードを head 内か </body> 直前に追加すればOKです。
  8. HTMLコードの追加、下記コードを表示させたい部分に設置します。
  9. 見た目をカスタマイズしたい場合、「jquery.tweet.css」の中身(下記内容)を使用して調整します。

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

Via:Delicious

スポンサードリンク

この記事を読んだ方は以下の記事もご覧いただいています

  • このエントリーをはてなブックマークに追加

コメントする