にーやんのブログ :: del.icio.usのLinkrollsで最新のブックマークをブログに表示する

« recentwritebacks_treeプラグインを導入 | Main | Deloxom - del.icio.usの最新のブックマークを表示するblosxomプラグイン »

del.icio.usのLinkrollsで最新のブックマークをブログに表示する

少し前の話ですが、ソーシャルブックマークのdel.icio.usのブログでLinkrollsというサービスに関する告知がありました（参照）。Linkrollsを使えば、del.icio.usの最新のブックマークを、簡単にブログなどのパーツとして表示することができます。

まず、ログインした状態でdel.icio.us: javascript feedsに行きます。

画面右下がプレビュー画面になっています。Loading Preview...という表示があったあとに、あなたの最新のブックマークが表示されます（初期状態では15件）。

そして、その左側のDisplay Optionsで、ブックマークの表示をカスタマイズすることができます。

Display Options

show [ ] items
- ブックマークの表示件数。
title
- あなたのdel.icio.usへのリンクタイトル。
show tags
- そのブックマークのタグを表示するか否か。
show extended
- そのブックマークのextended（コメントみたいなの）を表示するか否か。
icon
- リンクタイトル左のアイコンの選択。noneだとアイコンなし。
bullets
- 各ブックマークの左に付ける記号の選択。noneだと記号なし。
sort
- chronologically: 新しいものから表示
- alphabetically: アルファベット順にソート
only these tags
- 指定したタグのブックマークのみ表示。
- 半角スペースを入れることで複数のタグを指定可能。
- 左のチェックボックスにチェックを入れたときのみ有効。

各オプションの意味は、このような感じです。設定を変更すると、すぐに右側のプレビュー画面に反映されます。

Linkrolls HTML

設定が終わったら、画面上部のテキストエリアの中に表示されているタグをコピーします。あとは、ブログのサイドバーなどの表示したい箇所に貼り付けるだけです。

Linkrolls Example

スタイルシートでデザインを変更することも可能です。サイドバーのデザインにあわせただけですが、こんな感じになりました（今は表示していません）。参考までに、スタイルシートをさらしておきます。

#delicious-posts-hogehoge ul {
  margin:0;
  padding:0;
  list-style-type:square;
}

#delicious-posts-hogehoge ul li {
  margin:0 0 0 18px;
  padding:0;
}

#delicious-posts-hogehoge {
  margin:0 10px 10px 10px;
  padding:4px;
  font-size:x-small;
  font-weight:normal;
  line-height:140%;
  background-color:#FFFFFF;
  border:1px solid #4A5F6F;
}

hogehogeの部分には、del.icio.usのユーザー名が入ります。

ちなみにJavascript Objects版もあります。こちらは、hail2u.net - Weblog - del.icio.us sidebarでサンプル付きで紹介されています。

追記: 表示例の「my del.icio.us」の部分は、del.icio.usのtitleで設定したものではありません。サイドバーのほかのメニューに合うように、title欄は空欄にして、こちらで入力しました。