ツイッターのつぶやきを表示させる方法はたくさんあるんですが、ブログパーツはデザインが好みでないことが多いです。
今、公式設定で作れるブログパーツは、枠の色を選べたりもするんですが、文字の大きさは変えられなかったりします(ちなみに自分のつぶやきで作ると、こんな感じ)。


そこで「つぶやきの内容だけ出したいんだけどなー」と、文字情報だけを取る方法を探してみたところ、

  • つぶやきの内容(+時間などテキスト情報)だけ表示したい
  • 見た目を自由に制御できる
  • ページに入れるのがカンタン
  • 出力するソースが分かりやすい

というワガママを叶えてくれるスクリプトを発見しました!

スクリプトの説明ページはこちら。↓
Add Twitter to your blog (step-by-step)

英語ですが、短くて簡単な表現で書かれているので、フィーリングで使えました。
上記ページからざっくり手順を訳してみると、

  • 「Hotlink from Google」という項目のスクリプトを head タグ内に記述
  • あるいは、「Download latest Twitter.js」というリンクからJSファイルをダウンロードし、任意のサーバーにアップロードして、head タグ内に記述
  • つぶやきを表示したい箇所に「Container HTML」という項目のスクリプトを記述
  • 最後に、「Add the script」という項目のスクリプトを head タグ内もしくは body タグを閉じる直前に記述

するだけで利用できちゃいます!
(自分のアカウントを入れる箇所などがあるので、コピペした後、適当に書き換えてください)

「Template variables」という項目にある通り、各情報を取り出すための変数が設定されていて、「template」という属性にその変数の組み合わせを指定することで、ほしいテキスト情報を出力できます。
%text% がつぶやき自体の内容であったり、%time% がつぶやいた時間であったり、と名前を見るとなんとなーく何が出てくるかわかるので安心(違ってたら消せばいいしね)。
「template」には文字列としてHTMLタグを含められるので、classを使うなり何なりして、たいていの見た目は作れると思います。

もうひとつ、このスクリプトを「いいなー」と思った理由は、同じページに複数のアカウントのつぶやきを表示できること。
idを指定することで、いろんな人のつぶやきを一箇所にまとめて表示できます。
自前でフィードを読み込んで云々、というやり方なら、何の問題もないんですが、そっちは要勉強なのでした......。

そんなこんなで、実際動かしているページがこちら。
tecra.info
上部の「Information」のところに、2人分、つぶやき+時間+名前+ツイッターURLを出力しています。

head タグ内もしくは body タグを閉じる直前に書くスクリプトを外部読み込みにできたら、もっとスッキリするなーと思っているところです。
あと、和訳はフィーリングなので、なるべく説明ページを普通に読んでください(ひどい)。

スクリプトの説明ページはこちら!↓
Add Twitter to your blog (step-by-step)