ツイッターのつぶやきを表示させる方法はたくさんあるんですが、ブログパーツはデザインが好みでないことが多いです。
今、公式設定で作れるブログパーツは、枠の色を選べたりもするんですが、文字の大きさは変えられなかったりします(ちなみに自分のつぶやきで作ると、こんな感じ)。
そこで「つぶやきの内容だけ出したいんだけどなー」と、文字情報だけを取る方法を探してみたところ、
- つぶやきの内容(+時間などテキスト情報)だけ表示したい
- 見た目を自由に制御できる
- ページに入れるのがカンタン
- 出力するソースが分かりやすい
というワガママを叶えてくれるスクリプトを発見しました!
スクリプトの説明ページはこちら。↓
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)