livedoor クリップ まとめサイト - クリップ件数取得 JavaScript

概要

指定したURLのクリップ件数を、JavaScriptを使って表示させます。
クリップ数を画像で取得する API」の場合と違い、テキストで表示できるのが特徴です。

使用方法

  • あらかじめ、headタグの中で「utils.js」をロードするようにscriptタグを記述してください。
<head>
<title>YourPageTitle</title>
〜
<script type="text/javascript" src="http://clip.livedoor.com/js/utils.js"></script>
</head>
  • 「utils.js」は、次の場所のあります。http://clip.livedoor.com/js/utils.js
  • 「utils.js」は、必要に応じてダウンロードし、お使いのサーバーにアップロードしてご使用ください。

設定

以下の項目が設定できます。
location
カウンタを表示する対象のURLを指定します。設定しない場合は現在ブラウザで表示中のURLを使用します。
Livedoor.Clip.location = "http://www.livedoor.com/";
linktarget
リンクを別ウィンドウで開くようにする場合は1を設定してください。 設定しない場合は同じウィンドウで開きます。
Livedoor.Clip.linktarget = 1;

クリップ件数の呼び出し

以下の方法で、クリップ件数を呼び出すことができます。
お好みのものを選択して設定してください。
text_counter
数字でカウンターを表示します。引数には代替文字列を指定します。件数のロードが完了するまで引数に指定した文字列が表示されます。指定しなかった場合は空白になります。
Livedoor.Clip.text_counter();

代替文字列に「-」を指定する場合のサンプル。JavaScriptがオフになっている場合などに表示されます。
Livedoor.Clip.text_counter("-");
image_counter
画像でカウンターを表示します。引数を省略した場合はsmallが使われます。
Livedoor.Clip.image_counter("small")
Livedoor.Clip.image_counter("medium")
Livedoor.Clip.image_counter("large")
simple_button
コメントページに移動します。ボタンの画像を選ぶことができます。
Livedoor.Clip.simple_button(0);
Livedoor.Clip.simple_button(1);
Livedoor.Clip.simple_button(2);
Livedoor.Clip.simple_button(3);
clip_button
コメントページに移動します。 livedoorにログイン状態の場合は、クリップ追加のボタンになります。
Livedoor.Clip.clip_button(1);
Livedoor.Clip.clip_button(2);
Livedoor.Clip.clip_button(2);
Livedoor.Clip.clip_button(3);

サンプル

  • livedoor Blogで使用する場合
  • リンクは別ウィンドウで開く
  • テキストの数字で件数を表示(かつ、代替文字列に「-」を表示)
コード
あらかじめ、headタグの中で「utils.js」をロードするようにscriptタグを記述したうえで、クリップ件数を表示させたい場所に以下のようなコードを記述してください。
<script type="text/javascript">
Livedoor.Clip.location = "<$ArticlePermalink$>";
Livedoor.Clip.linktarget = 1;
Livedoor.Clip.text_counter("-");
</script>
導入事例