はてなブックマークの情報を表示するJavaScript
ここまでで述べた手順を元に、APIを使ってはてなブックマークの情報を表示するJavaScriptを作ってみました。
まず、情報を表示する先のWebページに、以下のようなHTMLタグを追加します。「情報を読み込んでいます。」のメッセージは、適宜変えていただいて構いません。この <div id="hatena_bookmark">～</div>の中が、はてなブックマークの情報が表示される場所になります。
<div id="hatena_bookmark">情報を読み込んでいます。</div>
次に、上のdivタグよりも後に、以下のJavaScriptを追加します。このJavaScriptは、WebページのURLを自動的に判断して、そのWebページのはてなブックマークの情報を読み込み、一覧表示するものです。
■はてなブックマークの情報を表示するJavaScript
<script type="text/javascript">
var FJShowHatenaBookmarkInfo = {};
FJShowHatenaBookmarkInfo.setup = function() {
var script = document.createElement('script');
script.type = "text/javascript";
script.src = 'http://b.hatena.ne.jp/entry/json/?url=' + encodeURIComponent(location.href) + '&callback=FJShowHatenaBookmarkInfo.show';
document.getElementsByTagName('head')[0].appendChild(script);
};
FJShowHatenaBookmarkInfo.show = function(data) {
var elm = document.getElementById('hatena_bookmark');
if (!data) {
elm.innerHTML = '<p>まだ情報がありません。</p>';
return;
}
var html = '<p>ブックマーク数 : <a href="' + data.entry_url + '">' + data.count + '</a></p>';
if (data.count > 0) {
html += '<ul>';
for (var i = 0, j = data.bookmarks.length; i < j; i++) {
var bookmark = data.bookmarks[i];
html += '<li>';
html += '<span class="bookmark-user">' + bookmark.user + '</span>';
html += ' <span class="bookmark-date">' + bookmark.timestamp + '</span>';
if (bookmark.comment) {
html += '<br /><span class="bookmark-comment-title">コメント : </span>';
html += '<span class="bookmark-comment-text">' + bookmark.comment + '</span>';
}
if (bookmark.tags.length) {
html += '<br /><span class="bookmark-tag-title">タグ : </span>';
html += '<span class="bookmark-tag-title">' + bookmark.tags.join(', ') + '</span>';
}
html += '</li>';
}
html += '</ul>';
}
if (data.related.length) {
html += '<p>関連するWebページ</p>';
html += '<ul>';
for (i = 0, j = data.related.length; i < j; i++) {
var related = data.related[i];
html += '<li>';
html += '<a href="' + related.url + '">' + related.title + '</a>';
html += '</li>';
}
html += '</ul>';
}
elm.innerHTML = html;
};
FJShowHatenaBookmarkInfo.setup();
</script>
ブログなど、個々のページにはてなブックマークの情報を表示したいときは、JavaScriptを外部化しておくと便利です。その場合は、ソースコードの1行目 <script type="text/javascript"> と、最後の行の </script> を除いたものjsファイルとして保存し、個々のページに以下のscriptタグを入れましょう。
<script type="text/javascript" src="JavaScriptのアドレス"></script>
また、ブックマークの情報は「FJShowHatenaBookmarkInfo.show」関数で表示しています。この関数の中身を書き換えれば、APIで取得した情報の表示方法を変えることもできます。ぜひ試してみましょう。
