
お問い合わせを頂いたのでついでに
ご紹介。Twitterのウィジェットのような
ものをお探しだったようですが、現在の
公式のウィジェットではなく、色々とcss
でカスタマイズ出来るようにしたいとい
うご希望でした。Twitterの投稿を表示す
るだけなら3行もあれば実装出来ます。
タイトルはやや釣りに近いです。知らない方向け。
Webクリエイターボックスさんで表示されてるような感じにしたい、というご希望でした。なぜ僕に質問して頂いたかは謎ですがお答えさせて頂きます。
ウィジェットやjQuery、RSSを使って~等、色々と方法はありますが、自分で表示もデザインしたい、シンプルでいいというのであれば3行もあれば表示させる事が出来ます。
APIキーを取得して~等の面倒な手順も要りません。
コード
「コード」と言うか、ただのマークアップなんですけど・・
<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行、というわけです。さほど使う機会もないかもですけどご紹介してみました。


















![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](http://ecx.images-amazon.com/images/I/41nvddaG9BL.jpg)
そっか w
ul の間に “読み込んでいます” ってli 入れといた方がいいですね w
私空にしてあるから、HTML Validateで突っ込まれました … ul の間が空です!って w
シロさん、ありがとー!
すぐにロードされるので要らないっちゃ要らないすけどダミーテキスト入れておいた方が親切かもっすねw
いえいえー(´ω`)
これスゴイデス!ツカイマス!アリガトウゴザイマス!
ちなみに①
アイコン出したりとかのカスタマイズの方はどのように。。?
ちなみに②
携帯サイトにも表示させたいのですが、その場合はどのように。。?
ぜひ使ってみてくださいー!
pushメソッドにimgファイルを加えれば表示されると思いますー。jsファイルの中身を見ればだいたい想像付くと思います!
あれ?表示されませんか?
はじめまして。こちらの記事、大変参考になりました。
ご質問なのですが、こちらの方法をつかって、ユーザーのツイートではなくて、
「#○○○○」のような、特定のハッシュタグがついた発言だけを呼び出して
表示させたい場合、どのように表記すればいいのでしょうか・・?
はじめまして。ご参考いただき光栄です:)
こちらの方法ではご希望の実装は難しいです。
ハッシュタグの検索結果はRSSを吐き出すので(例:#japanの場合 http://search.twitter.com/search.atom?q=%23japan )このRSSを読み込んでjs等で実装させるか、検索ウィジェットを使います。
Hello! Very good job(this site)! Thank you man.
thx a lot
はじめまして!こちらの記事、大変参考になりました。
質問なのですが、最新のツイート内容が公式RTだった場合、
表示の部分が真っ白になってしまうのですが、
公式RTの内容は表示されないのでしょうか?
もし何か対策などありましたら教えてください。
また、表示するツイートの文字数を制限する方法はありますか?
こんにちは。少しでも参考になれば幸いです:)
この方法は、Twitterに公式RTが実装される前のものですので、対応していないかも知れません。良く調べてはいませんが、APIのドキュメントを確認してみるといいかも知れません。
cssで可能なようです:)
ケイタイ用のページにツイートを表示する方法はないかと
検索したところ、こちらにたどり着きました。
見事、表示することができました。
しかもたった3行というのがすばらしい!
ありがとうございました!
こんにちは。
おお、実装できてなによりです:D いえいえー!
公式のウィジェットはやたら複雑なコードで気持ちが悪いので極限までシンプルにしたこのコードはとてもメンテナンスしやすくていいです。
公開ありがとうおございます。
一般的にこういう技術的な面の質問はWeb manaさんを始め、対応されないケースが大半なのでこのエントリはとても貴重です。
こんにちは。コメント有難う御座います:)
いえいえー!少しでもお役に立てたら良かったです!