移行前の旧サイトからやってたんですが、blog のネタにするほどでもないけれど気になった記事を livedoor Clip に登録して、サイドバーに表示していました。

livedoor blog では、標準で livedoor Clip の登録内容をサイドバーに表示するプラグインが有ったのですが、自前のサイトではさすがにそれは使えないので、 livedoor が提供している API を使用して、サイドバーに表示しました。

やり方は簡単。 API を使用して MyClip を JSON 形式で取得し、取得したデータをページ内に流し込んでやります。
やりかたは以下のとおり。

サイドバーの設定

サイドバーに以下のコードを追加。

<h2>Clips</h2>
<div id="livedoor-clips" style="width:95%"><p>Now Loading...</p></div>
<div style="margin-top: 10px; text-align: right;">
 <a href="http://clip.livedoor.com/clips/livedoor ID" target="_blank"><p>…more</p></a>
</div>
<div style="margin-top: 10px; text-align: right;">
 <p>Powered by <a href="http://clip.livedoor.com/" target="_blank">Livedoor Clip!</a></p>
</div>
<script type="text/javascript" src="http://api.clip.livedoor.com/json/clips?livedoor_id=livedoor ID&amp;limit=5&amp;callback=clips"></script>

最下行が JSONP 形式で、livedoor Clip の内容を取得するための script。
これを Callback 関数で

に、流し込んでやります。

JSONP の Callback 関数

JSON のデータを流し込む Callback 関数は、こんな感じ。
タグ内に書いておけばいいでしょう。

<script type="text/javascript" charset="UTF-8">
function clips(d){
 var ul=document.createElement("ul");
 for(var i=0,p;p=d.clips[i];i++){
  var li=document.createElement("li");
  var a=document.createElement("a");
  a.setAttribute("href",p.link);
  a.setAttribute("title",p.title);
  a.appendChild(document.createTextNode(p.title));
  li.appendChild(a);
  ul.appendChild(li);
 }
 var ld = document.getElementById("livedoor-clips");
 ld.innerHTML="";
 ld.appendChild(ul);
}
</script>