お問い合わせを頂いたのでついでに
ご紹介。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行、というわけです。さほど使う機会もないかもですけどご紹介してみました。