テキスト版のTwitterブログパーツをはてなダイアリーのサイドバー向けに書き換える

【元記事:テキスト版のTwitterブログパーツはてなダイアリーのサイドバー向けに書き換える:d:id:manpukuya:20070820:twit_on_hatena

本日、はてなダイアリーに貼り付け可能なブログパーツに、ALPSLABおよびTwitterを追加いたしました。

(中略)

Twitterは「今していること」を登録できるコミュニケーションサービスで、自分の投稿したメッセージなどを日記に貼り付けることが可能です。

はてなダイアリー日記 - ALPSLABおよびTwitterのブログパーツに対応しました

ということで、Twitterの書き込み内容をはてなダイアリー内に表示させることができるようになった。

Twitterでは、書き込みの内容を表示できるブログパーツのことを「Badge(バッジ)」と呼んでいる。貼り付け用のコードを得るには、Twitterにログオンした状態で「http://twitter.com/badges/which_badge」へアクセスすればよい(ここへはログオン時に右上のメニュー、「Badges」から「Other」をたどっても行ける)。

で、ここでは3種類のバッジから選べるようになっている。

  1. Flash, Just Me」(Flash利用、自分の書き込みのみ表示)
  2. Flash, With Friends」(Flash利用、ほかの人の書き込みも表示)
  3. 「HTML/JavaScript」(HTMLとJavaScriptを使い、自分の書き込みのみ表示)

3つめの「HTML/JavaScript」はシンプルでなかなかよい。このHTMLを、はてなダイアリーのサイドバーに入れやすいはてなモジュールの書式に書き換えてみた。こんな感じでいかがでしょう。

<div class="hatena-module">
<div class="hatena-moduletitle">Twitter Updates</div>
<div class="hatena-modulebody">
<ul id="twitter_update_list"></ul>
<script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script>
<script text="text/javascript" src="http://twitter.com/statuses/user_timeline/ユーザーID.json?callback=twitterCallback2&count=■"></script>></div><></div><

6行目、「ユーザーID」の部分は自分のユーザーIDにし、「■」の部分は表示したい書き込み件数を半角数字で指定。

また、2行目の「<div class="hatena-moduletitle">Twitter Updates</div>」の部分はモジュールのタイトルとして表示されるので、自分のTwitterのページのリンクにしてもよい。

たとえば「<div class="hatena-moduletitle"><a href="http://twitter.com/ユーザーID">my Twitter</a></div>」のような感じに書き換えてみてもよいと思う(「ユーザーID」の部分は自分のユーザーIDに書き換えて)。

そうするとこんな感じに(日記本文とサイドバー内でCSSが違うので、見た目はちょっと異なります)。

どうぞご利用ください。

追記:ほかの人の書き込みも含めて、はてなモジュール式に表示する方法

※追記の追記:Twitterの仕様変更にともない、以下は使えなくなりました

上の「HTML/JavaScript」では、自分の書き込みだけが表示される。ほかの人の書き込みも含めて、はてなモジュールの見栄えで表示させることもできる。

こちらはRSSが提供されているので、それをはてなモジュールで表示させればよい。

  1. 自分のTwitterの「Home」を開く
  2. ページ最下部の「RSS」のURLを取得(右クリックして「ショートカットをコピー」「リンクのURLをコピー」といったメニューを選択)する。
  3. 以下のように書く。「url="〜"」の部分は、先ほどコピーしたURLをペーストする
<hatena name="rss" url="http://twitter.com/statuses/friends_timeline/0000000.rss" template="hatena-module">

こんな感じになる。

Error : RSSが取得できませんでした。

※↑「Error : RSSが取得できませんでした。」が出ることがあります。書き方が間違っているわけではなく、twitterRSSモジュールの問題です

ここでは、属性として「moduletitle="my Twitter"」(タイトル部分の文字列)や「listlimit="5"」(表示件数)などを指定してある。

rssモジュールについて詳しくは→「はてなダイアリーのヘルプ - RSSを使った最新情報を表示する(rssモジュール)

どうぞご利用ください。

Twitter社会論 ~新たなリアルタイム・ウェブの潮流 (新書y)

Twitter社会論 ~新たなリアルタイム・ウェブの潮流 (新書y)


トラックバック