Twitter ブログパーツレビュー(タイムライン編)

この記事について

Twitter 上での活動が活発になればそれを外部にも見てもらいたくなるもの。
そこで今回は Twitter のタイムラインを出力できるブログパーツについて調べました。
用途に適したブログパーツを見つけて Twitter ライフをより良いものにしましょう。

ブログパーツの紹介

Twitter / ウィジェット

Twitter / ウィジェット - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • 表示件数を 1〜30 件の間で変更可能 (数値は1刻み)
  • 配色を変更可能。変更可能部位はヘッダー背景、ヘッダー文字色、ツイート背景、ツイート通常文字色、ツイートリンク文字色の5箇所
  • ブログパーツのサイズを変更可能。ピクセル数を自由に入力して設定可能なタイプ
  • その他、スクロールバーの有無やリアルタイム更新の間隔等が設定可能

Twitter 公式のブログパーツ。
基本的な機能は抑えてあり、さらに細かいカスタマイズが可能。

TweetsWind

TweetsWind - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • 表示タイプは「自分のつぶやきのみ」と「自分のつぶやきとフォローしている人のつぶやき」の2つから片方を選択
  • ブログパーツの横幅、高さを自由に設定可能
  • 枠線を表示する、しないを設定可能
  • 枠線の色を設定可能
  • フォントサイズを設定可能
  • ヘッダーを表示する、しないを設定可能
  • ヘッダーの背景色を設定可能
  • ヘッダーのフォントカラーを設定可能
  • 自分のユーザー名を表示する、しないを設定可能
  • ユーザー名表示部分の背景色を設定可能
  • ユーザー名のフォントカラーを設定可能
  • つぶやき表示部分を表示する、しないを設定可能
  • つぶやき表示部分の背景色、文字色(通常文字、リンク文字)を設定可能
  • つぶやき表示部分の最大文字数を設定可能
  • つぶやき表示部分のスクロールバーカラー、スクロールバー背景色を設定可能
  • フォローしている人のアイコンを表示する、しないを設定可能
  • フォローしている人のアイコンを表示部の背景色を設定可能

ブログパーツ作成フォームからかなり詳細な設定が可能なのが特徴。
ソースコードを直接編集するのが苦手な人でも細やかな設定が行える。

Twinkle Tweets 2

Twinkle Tweets 2 - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • 表示タイプは「ログインしているユーザーのタイムライン」と「検索結果」の2つから片方を選択
  • 4つのツイート表示スタイルから1つを選択する
  • ブログパーツの横幅は自由に設定が可能
  • 縦幅は横幅の数値を参照して自動で割り振られる
  • ブログパーツの配色変更機能は 2012/02/10 現在停止中
  • 日本全土の放射線量の表示できる
  • ジオロケーション・位置情報に対応

アニメーション表現を搭載したブログパーツ。
動きがあってユニークだがタイムラインを普通に表示させたい場合には不向き。

Twiing

Twiing - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • ユーザーが指定したハッシュタグによる検索結果を表示する
  • 3つのスキン(ウッド、ジェリー、ダーク)の中から1つを選択する
  • 3つの出力サイズ(150×300、170×340、200×400)の中から1つを選択する

ハッシュタグ絞り込みによる表示だけに対応したブログパーツ。
イベントや製品に関するツイートを集めたい時などに有効。

つぶやき表示

つぶやき表示 - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • ツイートの取得形式はキーワード、アカウント、リプライ、ハッシュタグのうちのどれか1つによる絞り込み
  • 発言者名の表示する、しないを設定可能
  • プロフ画像の表示する、しないを設定可能
  • 表示件数は10刻みで 10〜50 件を設定可能
  • ブログパーツの横幅、縦幅は自由に指定が可能
  • 配色は12色の中から1つを選択する

ブログパーツ作成フォームが親切で使いやすい。
Javascript を直接編集できるなら直接編集することで作成フォームを使わずにカスタマイズすることが可能。

ついめ〜じ

ついめ〜じ - 表示サンプル

  • 埋め込みコードは img タグで出力される
  • ツイートの取得形式は特定ユーザーの発言一覧
  • ブログパーツの背景色を指定することができる
  • リプライツイートを表示するかどうかを選択できる

ブログパーツが画像形式で出力されるサービス。
ブログパーツ設置の容易で、どんなレンタルブログサービスにも対応することができる。

TwitGIF

TwitGIF - 表示サンプル

  • 埋め込みコードは img タグ、リンク付き img タグ、画像 URL の3タイプで出力される
  • ツイートの取得形式は特定ユーザーの発言一覧
  • GIF アニメで最新の10ツイートを順番に表示していく
  • ブログパーツのレイアウトは4タイプ(Banner、OneLiner、SideBox、QVGA)の中から1つを選択する
  • ブログパーツの形状を四角と角丸から一方を選択することができる
  • 配色は背景色、文字色、枠線色を自由に設定することが可能
  • 5パターンあるカラープリセットから選択することもできる

アニメーション画像形式で出力されるブログパーツ。
やはり設置が容易なのが利点。
作成フォームでは割と細かい設定が可能。

StatsPrinter

StatsPrinter - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • デザインは3つのスタイルから選択することができる
  • 出力されたブログパーツを CSS でカスタマイズすることができる
  • 表示されるツイートは最新の1件のみ

シンプルなブログパーツ。
つぶやきと同時にユーザーのステータスを表示できるのが特徴。

Twitter Balloon

Twitter Balloon - 表示サンプル

  • 埋め込みコードは embed タグによる SWF ファイルの呼び出し形式で出力される
  • 画像にフキダシを付けてそこにツイートを表示するユニークなブログパーツ
  • 使用する画像は URL で指定する
  • 画像は Flickr 等の外部サービスからも呼び出しが可能
  • ブログパーツのボタン操作により最新メッセージを10件切り替えることができる
  • カスタマイズ可能な項目は「パーツの幅、高さ」「イメージURL」「イメージの位置」「背景色」「テキスト色」「フキダシの座標(X、Y)」「フキダシの大きさ(幅、高さ)」「フキダシの背景色、テキスト色」「フキダシのフォントサイズ」「フキダシのヒゲの位置と向き」

ユーザーが指定した画像を背景に使用することができるユニークなブログパーツ。
設定項目も多く微調整が可能。

Twitteen

Twitteen - 表示サンプル

  • 埋め込みコードは object タグによる SWF ファイルの呼び出し形式で出力される
  • ツイートの取得形式は「アカウント名による絞り込み」と「キーワードによる絞り込み」の2つから片方を選択する
  • 表示件数は 1〜30 件の中から1刻みで指定可能
  • ブログパーツの表示形式は「横スクロール(160×100)」と「タイプライター(160×160)」の2つから片方を選択する
  • 発言内容と投稿時間の文字色を変更可能
  • リプライツイートの表示する、しないを選択可能
  • 表示順序を新しい順、古い順から選択できる
  • 日付表示を◯分前、◯月◯日◯時◯分から選択できる
  • 出力される埋め込みコードの ID 要素名を指定可能

見た目はかなりシンプルだがカスタマイズ要素は豊富なブログパーツ。
どちらの表示形式にしても省スペースで設置することができる。

jTwitteen

jTwitteen - 表示サンプル

  • jQuery を使用したプラグイン
  • このブログパーツを使用するには jQuery を設置できるウェブ上のスペースと知識が必要になる
  • CSS によるカスタマイズが可能
  • 設定可能な項目は「ツイートの表示件数」「ユーザーアイコンのサイズ」「1ツイートを表示する時間」「リプライツイートを表示するか」「メニューを表示するか」

jQuery を使用したプラグイン形式のブログパーツ。
お手軽さは無いがもっとも詳細なカスタマイズが可能。

ひとことガジェット

ひとことガジェット - 表示サンプル

  • 埋め込みコードは Javascript で出力される
  • Twitter のユーザーID(ユーザー名とは別)を指定する必要がある (※ユーザーIDの調べ方は後述)
  • 省スペース
  • 最新の1ツイートを表示する
    1. Twitter の公式サイトへ行きログインする
    2. 右上メニューからログインユーザーのプロフィールページを開く

ひとことガジェット - プロフィールページへのリンク

    1. ブラウザの機能でプロフィールページのソースコードを表示する
    2. “data-user-id” で検索する

ひとことガジェット - ソース検索

  1. “data-user-id=” の後ろの半角数字がユーザーIDとなる

省スペースで最新の1ツイートを表示するだけの非常にシンプルなブログパーツ。
使用にはユーザーIDを知る必要があるので注意。

MakeLeaps

MakeLeapsは見積書・納品書・請求書の発行管理クラウドソリューション。このブログでは、国内のフリーランスや中小企業の読者の悩み解決・成長に役立つ情報やMakeLeapsのニュースなどをお届けします!

MakeLeapsの他の記事