ウィジェットを使ってWebサイトにTwitterのつぶやきを表示しよう

ウィジェットでTwitterのつぶやきをWebサイトに表示しよう
2009年11月09日

TEXT：編集部


TwitterのつぶやきをWebサイトへ手軽に表示させる方法

TwitterのつぶやきをWebサイトやブログに掲載する人が増えてきました。そこで今回は、Twitterが提供しているウィジェットを使って、Webサイトやブログにつぶやきを表示する方法について解説します。
なおリンクや紹介内容は、2009年11月09日時点のものです。追加・訂正などの情報がありましたら、ask-mdn-interactive@MdN.co.jpまでご連絡ください。

※2012年9月6日追記
Twitterより提供開始となったウィジェット「埋め込みタイムライン」については、こちらの記事をご参照ください
http://www.mdn.co.jp/di/newstopics/25466/



【1】Webサイトにアクセス
Twitterにログインしている状態で、ウィジェットを配布しているページに移動しましょう。

Twitter / ウィジェット
http://twitter.com/goodies/widgets

ここから各種設定を行い、ウィジェットを作成します。MySpaceやFacebookに表示するためのウィジェットも紹介されていますが、ここでは汎用的に使える「自分のページ」をクリックしてください。すると中央に「プロフィールウィジェット」「検索ウィジェット」「Faves Widget」「List Widget」と表示されるので、「プロフィールウィジェット」を選択。なお「検索ウィジェット」は登録したワードについてつぶやいているユーザー、「Faves Widget」は自分のお気に入り、「List Widget」は作成したリストを表示するウィジェットです。

まずはウィジェットの配布ページに移動


「自分のサイト」を選択


ここでは「プロフィールウィジェット」をクリックします


【2】ウィジェットのカスタマイズ
プロフィールウィジェットをカスタマイズする画面が表示されました。ここでウィジェットの設定を行います。それぞれ見ていきましょう。

■設定
Twitterのユーザー名を入力します。





■Preferences
●Poll for new results?
つぶやきを自動読み込みさせたい場合は「はい」をチェック。

●Include scrollbar?
表示が一定数を超えた際、スクロールバーを表示させたい場合は「はい」をチェック。

●Behavior
一定間隔でつぶやきを読み込みたい場合は「Timed Interval」を選択。そこで表示される「Loop results?」ではつぶやきをループして表示させるかどうか、「Tweet Interval?」では読み込みの秒数を指定します。適宜つぶやきを読み込みたい場合は「Load all tweets」を選択しましょう。

●Number of Tweets
つぶやきの表示数が設定できます。

●Show Avatars?
つぶやきにアイコンを表示させたい場合はチェック。

●Show Timestamps?
つぶやきに時間を表示させたい場合はチェック。

●Show hashtags?
ハッシュタグを表示させたい場合はチェック。




■デザイン
外枠の背景、外枠の文字、ツイート投稿欄の背景、ツイートの文字、リンクの色がカラーコードで指定できます。カラーコードの右側にある四角の枠をクリックして色を選択することも可能です。




■サイズ
ウィジェットの大きさが指定できます。自動で幅を調整したい場合は「auto width」をチェックしましょう。


設定を変更したら下段の［Test settings］ボタンを押せば右側にプレビューが表示されます。設定が完了したら［完了＆コード取得］ボタンをクリックしてください。



【3】コードを取得して張り付ける
画面にコードが表示されるので、コピーしてHTMLに貼り付ければ完了です。興味をもたれた方はぜひ挑戦してみてください。


表示されたコードを貼り付ければ完成。サンプルは下記を参照ください