Last.Fm Records

Last.fm から、最近聴いてるアルバムや “Love” 登録した曲などのデータを取得して自分のサイトに表示する WordPress プラグイン、Last.Fm Records を導入してみました。

プラグインをダウンロードして有効化すると、管理パネルの「設定」からオプションをいじれます。おもな項目は以下のとおり:

Last.fm username: Last.fm でのユーザー名。ちなみに、自分のデータのみならず「気になるあの人のお気に入りリスト」なんてのも可能。
Period: “Recent Tracks” や “Last 7 days” など、取得するデータの種類を選択。
Count: アイテムの件数。
Refresh time: Period が “Recent Tracks” の場合の更新頻度。
Off-set (from GMT +0): 用途不明。とりあえず日本なので +9。
Default thumb: ジャケ写がない場合のデフォルト画像。
Add stylesheet: あらかじめ用意されたスタイルを選べますが、あんまりクールじゃないので自分で書くのがおすすめ。

実際にページに表示するには、WordPress の「ウィジェット」機能を利用する手もありますが、テンプレートの中で表示させたい箇所に以下のコードを挿入しても OK です:

<div id="lastfmrecords"></div>

結果、以下のようなマークアップが生成されます:

<div id="lastfmrecords">
  <ol>
    <li style="display: inline;">
      <a href="http://www.last.fm/music/Perfume/Perfume%3A+Complete+Best">
        <img src="http://userserve-ak.last.fm/serve/126/41074031.jpg" id="lastfmcover0" title="Perfume: Complete Best by Perfume">
      </a>
    </li>
    <li style="display: inline;">
      <a href="http://www.last.fm/music/Perfume/GAME">
        <img src="http://userserve-ak.last.fm/serve/126/29327629.png" id="lastfmcover1" title="GAME by Perfume">
      </a>
    </li>
    <li style="display: inline;">
      <a href="http://www.last.fm/music/Perfume/%E2%8A%BF">
        <img src="http://userserve-ak.last.fm/serve/126/29542861.png" id="lastfmcover2" title="⊿ by Perfume">
      </a>
    </li>
    . . .
  </ol>
</div>

あとは CSS で整形すれば完成。ol で出力されるものの li にインラインで display: inline; が指定されている点に注意。例としてこのサイトでのスタイルを載せておきます:

#lastfmrecords ol {
  overflow: hidden;
  width: 100%;
  padding: 5px 0 0;
  margin: 0;
}
#lastfmrecords ol li {
  display: block !important;
  float: left;
  margin: 0 2px 5px 0;
}
#lastfmrecords ol li a img {
  max-width: 48px;
  max-height: 48px;
  padding: 1px;
  border: 1px solid silver;
}
#lastfmrecords ol li a:hover img {
  border-color: #002040;
}

ちなみに、プラグインの ZIP の中の last.fm.records.js は、WordPress でなくても jQuery プラグインとして使うことが可能。オプションの指定方法など、詳しくは作者のサイトで解説されています。