2009.05.03

smart.fm

smart.fm のマイリストをサイドバーに表示

OpenSocial もすばらしいのですが、やっぱり自分のマイリストはブログにも表示させたい!ということで、smart.fm API と jQuery を使って、このブログのサイドバーに自分のマイリストを表示するようにしてみました。

使っているのは smartfm.csssmartfm.js start_swf.js の3つです。CSS をちょっといじってもらえれば、きっとあなたのサイトでも利用できるはず。

使い方は以下の通り。

まずは <head></head> 内で CSS を読み込んで、

<link rel="stylesheet" type="text/css" href="/stylesheets/smartfm.css" />

JS をこの順番で読み込めば OK、なはずです。もちろん、jQuery は必要です。
最後の1行の URL 中の "matake" という部分は、あなたのアカウント名に変更してください。

<script type="text/javascript" src="/javascripts/start_swf.js"></script>
<script type="text/javascript" src="/javascripts/smartfm.js"></script>
<script type="text/javascript">
var smartfm = new Smartfm();
</script>
<script type="text/javascript" src="http://api.smart.fm/users/matake/lists.json?callback=smartfm.displayLists&per_page=3"></script>

以下のように smartfm という id が指定された場所に、マイリスト一覧が表示されます。

<div id="smartfm"><div>

ちなみにこのブログのサイドバーは こちらのファイル を Ajax でロードしています。