livedoor Clip 内容の表示

移行前の旧サイトからやってたんですが、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 関数で

Now Loading

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

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>

2 thoughts on “livedoor Clip 内容の表示

  1. をかもと 投稿作成者

    latifa さん、どもです。
    引越ししたばかりで、まだ映画レビューとか書いてませんね (^^;;;

    また、遊びに来ますので、今後とも宜しくお願いします〜♪

    こちらこそ、よろしくお願いします m(_ _)m

    返信
  2. latifa

    をかもとさん、こんにちは!
    お引っ越しされたんですね★
    また、遊びに来ますので、今後とも宜しくお願いします〜♪

    返信

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください