Twitterのつぶやきを、3行のコードでWebサイトやブログに表示させる

Ads

お問い合わせを頂いたのでついでに
ご紹介。Twitterのウィジェットのような
ものをお探しだったようですが、現在の
公式のウィジェットではなく、色々とcss
でカスタマイズ出来るようにしたいとい
うご希望でした。Twitterの投稿を表示す
るだけなら3行もあれば実装出来ます。

タイトルはやや釣りに近いです。知らない方向け。

Webクリエイターボックスさんで表示されてるような感じにしたい、というご希望でした。なぜ僕に質問して頂いたかは謎ですがお答えさせて頂きます。

ウィジェットやjQuery、RSSを使って~等、色々と方法はありますが、自分で表示もデザインしたい、シンプルでいいというのであれば3行もあれば表示させる事が出来ます。

APIキーを取得して~等の面倒な手順も要りません。

[note]statuses/user_timeline/ユーザーのアカウントID.jsonの形式のjsonを取得できなくなった為、この方法は使えなくなりました(´・ω・`)
ドキュメントをご覧下さい。
GET statuses/user_timeline[/note]

コード

「コード」と言うか、ただのマークアップなんですけど・・

<ul id="twitter_update_list"><li>読み込んでいます</li></ul>

まず上記のようにマークアップして、</body>の直前に以下のjsを読み込みます。

<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザーのアカウントID.json?callback=twitterCallback2&count=10"></script>

count=10の数字が表示する最新のつぶやきの数です。<ul id=”twitter_update_list”>の要素内につぶやきが読み込まれます。

見たほうが早いのでデモ作りました。ソースもご覧になってみて下さい。

サンプル

cssで少しだけスタイル整えてますが表示そのものに必要なのは3行であることが確認出来たと思います。

どうして表示できるの?

これは旧Twitterが公式に配布していたウィジェットのソースから余計なものを外した、っていうだけです。

現在は以下のようなページに誘導しています。

ここでウィジェットを作成するんですが、以前は以下のようなウィジェットでした。

以前のウィジェット


このウィジェット作成ページへのリンクは現在公式サイトのヘルプページに見当たらないのですが、まだページ自体は生きてるんですね。
リダイレクト処理がはじまりますた(´・ω・`)


ここでHTMLソースでウィジェットを生成できるのですが、表示するのに必要なコードのみに絞ったのが上記の3行、というわけです。さほど使う機会もないかもですけどご紹介してみました。