Webサイトを運営していると、自分のサイトや記事の評判が気になることと思います。そんなとき、ネット上の評価を知るひとつの手段となるのが「はてなブックマーク」です。今回は、自分のWebページに、はてなブックマークのブックマーク数やコメントなどを表示する方法を紹介します。
|
|---|
| 筆者のWebサイト。下が今回紹介する方法を使って「はてなブックマーク」の情報を表示したサンプル |
JSONPでデータを取得できるAPI
はてなブックマークは、外部からブックマークするなどの機能を実装するために、API（Application Programming Interface）を公開しています。それらAPIの1つに、「はてなブックマークエントリー情報取得API」があります。
これを使うと、個々のWebページに付けられたブックマークの情報を得られます。具体的には、以下のようなアドレスにアクセスすると、個々のWebページのブックマークの情報が、「JSON」（JavaScript Object Notation）形式のデータで返されます。
http://b.hatena.ne.jp/entry/json/?url=WebページのアドレスをURLエンコードした値
たとえば、「ASCII.jp Web Tools＆Tips」（http://ascii.jp/web/）のブックマークの情報を得るには、以下のアドレスにアクセスします。
http://b.hatena.ne.jp/entry/json/?url=http%3A%2F%2Fascii.jp%2Fweb%2F
このとき取得できるデータは、以下のような構造になっています。
|
|---|
| ブックマークの情報のデータの構造 |
また、Webページに以下のようなscriptタグを追加すると、「function名」で指定したJavaScriptの関数が実行され、JSON形式のデータが渡されます。
http://b.hatena.ne.jp/entry/json/?url=WebページのアドレスをURLエンコードした値&callback=function名
関数に渡されたデータは、その関数の中ではオブジェクトとして扱えます。そこで、オブジェクトの中からブックマーク数などの必要な情報を取り出して、順次表示するように関数の処理を作ります。これで、自分のWebページに、そのページに関するはてなブックマークの情報を表示できます。
（次ページ、「はてなブックマークの情報を表示するJavaScript」に続く）
![Web制作の現場で使う jQueryデザイン入門[改訂新版]](http://ascii.jp/elem/000/000/649/649648/book_15.jpg)
