はてブの「ブックマーク」ボタンをオリジナルデザインに変更する

  • Hatena Bookmark:
  • Twitter:
はてなブックマークの「はてブ」ボタンをオリジナルで作る

Webサイトをデザインするときに、デザインに合わせて、ブックマーク件数取得したり、ブックマークしたりと「はてなブックマーク」公式ボタンと同じような機能を持ちつつ、自前のボタン画像で「はてブ」ボタンを自作したいなーと思ったときに調べた事のメモを兼ねて。
公式で用意されているAPIって便利ですね!

ちなみに、公式ボタンは「はてなブックマークボタンの作成・設置について」から取得できます。

※このページは2011年9月9日に加筆・修正しています。

ページ内見出し一覧

「B!(ブックマーク)」エントリーボタンを作る

はてなブックマークの「B!(ブックマーク)」ボタン

公式ボタンでいう「B!」の部分。

オリジナルのボタン画像を用意して、その画像にブックマークのエントリーページへのリンクを貼る。
ブックマーク件数の表示はいらないよという場合はこの作業だけ。
以下、見易いように改行してます。実際は1行でOK。

<a href="http://b.hatena.ne.jp/add?mode=confirm&url=ブックマークしたいWebページのURL&title=ブックマークしたいWebページのタイトル">
<img src="用意した画像のパス">
</a>

ページのタイトルは、URLエンコードする。
パラメータに「mode=confirm」を付けると別ウィンドウ表記に最適な簡易投稿ページ表示になる。
下の画像は、指定したURLとタイトルがこんな風に表示されるよってキャプチャになります。

はてブ ブックマーク画面

ブックマーク件数取得方法

はてなブックマーク公式のブックマーク件数取得APIを使えば、
JavaScriptやPHPでブックマーク件数のみを取得することができる。

ブックマーク件数取得API

取得したいWebページのURLはURLエンコードする必要有り。

http://api.b.st-hatena.com/entry.count?url=件数を取得したいWebページのURL

取得データ形式

上記APIでデータを取得すると数字のみ返ってくる。以下は例。

375

サンプル/JavaScriptを使った「はてブ」ボタン

JavaScriptを使って取得。jQueryで取得する場合はjQuery版を参照。

JavaScript用関数

var hatebuCount = function (_id ,_url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : document.URL;
	pageURL = encodeURI(pageURL);
	var callback_name = 'jsonp_' + _id;
	var url = 'http://api.b.st-hatena.com/entry.count?url=' + pageURL + '&callback=' + callback_name;
	//JSONの読み込み
	var target = document.createElement('script');
	target.charset = 'utf-8';
	target.src = url;
	document.body.appendChild(target);
	window[callback_name] = function(data){
		//読み込み結果
		var count = (data)? data : 0;
		document.getElementById(_id).innerHTML = count;
	};
}

関数の引数について

hatebuCount( 'ブックマーク件数表示エレメントのID名', 'ブックマーク件数を取得したいページのURL' );
ブックマーク件数表示エレメントのID名
取得したブックマーク件数を表示するエレメントのIDの名前を入力(必須)。
ブックマーク件数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

JavaScriptを使ったブックマーク件数取得デモ

デモでページでブックマーク件数が取得できているかどうか確認。

Javascript版デモページを別ウィンドウで開く

サンプル/jQueryを使った「はてブ」ボタン

jQueryを使って取得。

jQuery用関数

var hatebuCount = function (_id, _url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : location.href;
	//JSONの読み込み
	$.ajax({
		type: 'GET',
		url: 'http://api.b.st-hatena.com/entry.count',
		data: {
			url : pageURL
		},
		dataType: 'jsonp',
		success: function(data) {
			//読み込み結果
			var count = (data)? data : 0;
			$('#' + _id).text(count);
		}
	});
}

関数の引数について

hatebuCount( 'ブックマーク件数表示エレメントのID名', 'ブックマーク件数を取得したいページのURL' );
ブックマーク件数表示エレメントのID名
取得したブックマーク件数を表示するエレメントのIDの名前を入力(必須)。
ブックマーク件数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

jQueryを使ったブックマーク件数取得デモ

デモでページでブックマーク件数が取得できているかどうか確認。

jQuery版デモページを別ウィンドウで開く

サンプル/PHPを使った「はてブ」ボタン

PHP用関数

function hatebuCount($str = null) {
	if($str)	$url = $str;
	else	$url = ((!empty($_SERVER['HTTPS']))? "https://" : "http://").$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
	$json = file_get_contents('http://api.b.st-hatena.com/entry.count?url=' . rawurlencode($url), true);
	$count = json_decode($json, true);
	return ($count)? $count : 0;
}

関数の引数について

hatebuCount('ブックマーク件数を取得したいページのURL' );
ブックマーク件数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

PHPを使ったブックマーク件数取得デモ

デモでページでブックマーク件数が取得できているかどうか確認。

PHP版デモページを別ウィンドウで開く

おまけ:「○○users」の画像でブックマーク件数を表示したい

いろんなページでみかける下記のような画像です。
「はてブ」ボタンは要らない。それでもってJavaScriptもjQueryもPHPもよくわからんけどブックマーク件数は表示したい場合は普通にイメージを呼び出すだけなのでこっちの方が簡単。

画像の大きさは3つ用意されています。

375 375 375

画像大 http://b.hatena.ne.jp/entry/image/large/件数を取得したいWebページのURL
画像中 http://b.hatena.ne.jp/entry/image/件数を取得したいWebページのURL
画像小 http://b.hatena.ne.jp/entry/image/small/件数を取得したいWebページのURL

上部のURLをそのままイメージタグのソースにすればいいんだけど、

このAPIをご利用いただいてブックマーク件数を画像表示する場合、画像にそのエントリーに関するはてなブックマークのエントリーページへのリンクをお願いいたします。

はてなブックマーク>ヘルプ>自分のブログに「○○users」を表示する

とあるので、画像にエントリーページへのリンクを忘れず付ける。
以下、見易いように改行してます。実際は1行でOK。

<a href="http://b.hatena.ne.jp/entry/件数を取得したいWebページのURL">
<img src="http://b.hatena.ne.jp/entry/image/件数を取得したいWebページのURL">
</a>

Comment [1]

大変参考になりました。
使わせていただきます。

eros-elephant

Post Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Return to page top