はてなダイアリーのサイドバーにTwitterの最新のつぶやきを表示させる

css html

BEFOREAFTER

はてなダイアリーへのTwitterのブログパーツの設置方法を調べたところ、公式で２つのバージョンを提供していることがわかった。

つぶやきを表示させるためだけにFlashを使うはなあ、と思いHTML版を使ってみた。

このHTMLウィジェットと呼ばれるブログパーツは、設置されるページのCSSに従うようにわざとやっているのだろう、スタイルの定義がない。残念なことに、はてなダイアリーのhatena2テーマに設置すると見た目がちょっとひどい。他のテーマならうまくいくのだろうか？

とりあえずソースを閲覧したところ簡単に編集できそうだったので、適当にいじってみたらなかなかいい感じになったのでテンプレートを下にメモしておく。設置はテンプレートのユーザ名を置き換えて管理画面のデザインでフッタの適当な位置に挿入するだけ。

変更点は以下

  • はてなの提供するサイドバーのモジュールと同じスタイルを適用
  • 「Twitter Updates」の文言を「最新のTweet」に変更し、ユーザータイムラインへのリンクにした
  • tweetされた文章の文字サイズとpaddingの調整

このほかに

  • 長い文章を打ち切って表示
  • リンクをクリックするとより多くのtweetを表示する

なんて機能を付加できたらいいなあとソースを読んだらどうやらjavascriptのコールバックに対応しているようだ。コールバック内で適当に処理をすれば実現できるだろう。けれど実際には、はてなダイアリーではユーザが入力したscriptタグの実行は禁止されている。なのではてなダイアリーに設置する場合はこれは無理。自前のサーバで運営しているブログなどに設置するなら可能だろうけど、しょうがない。これぐらいで我慢しよう。

        <div class="hatena-module">
          <div class="hatena-moduletitle">
           <a href="http://twitter.com/{ユーザ名}">最新のTweet</a>
          </div>
          <div class="hatena-modulebody">
           <ul id="twitter_update_list" style="font-size:small; padding:7px;"></ul>
          </div>
        </div>
        <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
        <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/{ユーザ名}.json?callback=twitterCallback2&count=3"></script>

追記2010/02/27：同じようにはてなモジュールと同じスタイルを適用させた人を発見。
http://d.hatena.ne.jp/kslash/20090903/1251992765