これは以前色々やったやつですお。
なにこれ超簡単w
背景色とかも変えられるのか
件数も変更できるし。
あとlive(リアルタイム)で表示も可(setIntervalとかで動かしてるのかな?)。これによりロードしなくても常に最新のつぶやきが上に表示されつづける。
表示めっさ増やしてスクロールバーも可
孫さんのだってイケるぜ。
(各色は孫さんのじゃなくて自分のtwitterの設定になるのね、当然だけど)
JSいじらんでもCSSをいじれば結構自由♪
※ただしCSS3に限る。
この中にある、「@」から始まるアンスコを含む20文字以内の英数字であれば、 自動的にテキストにtwitterへのリンクが付与されること。(DOMめっさ追うのかな・・)
オイラのtwitterアカウントは @pntswrks ですお。
これ、表示上じゃ分かりにくいけど、簡単に言うと、<a href="http://twitter.com/pntswrks">って書かなくても勝手にリンクにしてくれる、って事ね。
これは上のLinkifyと連携させてもいいんだけど、コンテンツ内で「@」から始まるアカウントをみっけて、マウスオーバーするとツールチップらしきものが出てきて、そこでフォローとかできるシロモノ。
オイラのtwitterアカウントは@pntswrksですお。
孫さんのアカウントは@masasonですお。
でもこれ、メアドとかひっからないのかな。
example@example.com
↑大丈夫そうね。(連続するなかに「.」とかあったらはじいてるのかな?)←未検証だお。

ほらほらぁ、画像にマウスのっけると出てくるでしょ?

マサソンだって出来るお!
classの「hovercards-target-image」をトリガーにして、title属性の中身からアカウントを取得してる的な?
これ、特定のアカウントをフォローさせるボタンらしいんだけど、jsの引数内に指定したアカウント名が、ボタンの表記にも入るっぽいね。
仕組みとしては指定したIDの要素の中にわざわざiframeを読み込んで、そん中にbuttonタグを入れてるみたいだお。
(デザインをCSSで勝手に変更させないため?)
これちと使いみちがわからん。。
↑これがデフォルトのスタイルね。
↑で、これがカスタマイズのスタイルね。
で、しかもつぶやいた後にそれを表示させたりする事も出来るらしいね。
一応、渡すパラメータでちょこちょこ変えられるらしい。
| ぱらめーた | 値 | デフォ | 説明 |
|---|---|---|---|
| 文字カウント | boolean | true | 入力文字数カウント |
| 高さ | integer | 515 (px) | ボックスの高さ |
| 幅 | integer | 65 (px) | ボックスの幅 |
| 見出し | string | "What's happening?" | 見出しテキスト |
| ボックス内テキスト | string | none | 最初にボックスに入れておくテキスト。@アカウントや#ハッシュタグや短縮リンクとかね。 |
| ツイート後 | function | none | ちっとこれややこしいけど、簡単に言うとツイートした後にどうこうするものらしい。 |
↑超適当に言うと、こんな感じ。まぁアテにしないで。
以上っす。
てなところかな。
あ、ひとつ忘れた。
かものはしプロジェクトIT事業部 平田 雄一郎 @pntswrks