Deliciousの「save」ボタンをオリジナルデザインに変更する

Publish:

Category:PHP, JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:
Deliciousの「save」ボタンをオリジナルで作る

Webサイトをデザインするときに、デザインに合わせて自前のボタン画像を使いつつ、Delicious上のブックマーク件数を取得して他のソーシャルメディアボタンの表記とあわせたいなと思ったときに調べた事のメモを兼ねて。

アドオンとかブックマークレットあるので使用している分には問題ないんだけど、最近ブログでボタンを表示させてるところが減ってきたなぁ。

ちなみに、公式ボタンは「Delicious.com – Discover Yourself! – save buttons」から取得できます。

ページ内見出し一覧

「save」ボタンを作る

Deliciousの「いいね!」ボタン

公式ボタンでいうクッキーみたいなあの4色のアイコン部分。

オリジナルのボタン画像を用意して、その画像にブックマークしたいページの情報を含んだリンクを貼る。ブックマーク件数の表示はいらないよという場合はこの作業だけ。

<a href="http://www.delicious.com/save?jump=close&url=該当ページのURI&title=該当ページのタイトル">
<img src="用意した画像のパス">
</a>

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

Delicious Save画面

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

Deliciousが用意しているAPIを使えば、JavaScriptやPHPでブックマーク件数のみを取得することができる。

ブックマーク件数取得API

http://feeds.delicious.com/v2/json/urlinfo/data?url=ブックマーク件数を取得したいWebページのURL

取得データ形式

上記APIでデータを取得するとJSON形式でデータが返ってくる。
以下は現在indigonote.comのブックマーク件数を取得した時に返ってきたデータ。

[
	{
		"url": "http://indigonote.com/", 
		"total_posts": 5, 
		"top_tags": {"WebDesign": 1, "\u307e\u3068\u3081": 1, "fireworks": 1, "Infomation_InfomationDesign": 1, "news": 1}, 
		"hash": "3eebed908824fd69a35eadb47328dbff", 
		"title": "indigonote - \u65e5\u3005\u306eWeb\u5236\u4f5c\u3001\u66f8\u304d\u7559\u3081\u30ce\u30fc\u30c8"
	}
]

サンプル/JavaScriptを使ったブックマーク件数取得方法

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

JavaScript用関数

var deliciousCount = function (_id ,_url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : document.URL;
	pageURL = encodeURI(pageURL);
	var callback_name = 'jsonp_' + _id;
	var url = 'http://feeds.delicious.com/v2/json/urlinfo/data?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[0])? data[0].total_posts : 0;
		document.getElementById(_id).innerHTML = count;
	};
}

関数の引数について

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

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

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

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

サンプル/jQueryを使ったブックマーク件数取得方法

jQueryを使って取得。

jQuery用関数

var deliciousCount = function (_id ,_url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : location.href;
	//JSONの読み込み
	$.ajax({
		type: 'GET',
		url: 'http://feeds.delicious.com/v2/json/urlinfo/data',
		data: {
			url : encodeURI(pageURL)
		},
		dataType: 'jsonp',
		success: function(data) {
			//読み込み結果
			var count = (data[0])? data[0].total_posts : 0;
			$('#' + _id).text(count);
		}
	});
}

関数の引数について

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

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

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

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

サンプル/PHPを使ったブックマーク件数取得方法

PHP用関数

function deliciousCount($str = null) {
	if($str)	$url = $str;
	else	$url = ((!empty($_SERVER['HTTPS']))? "https://" : "http://").$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
	$json = file_get_contents('http://feeds.delicious.com/v2/json/urlinfo/data?url=' . rawurlencode($url), true);
	$data = json_decode($json, true);
	return ($data[0])? $data[0][total_posts] : 0;
}

関数の引数について

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

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

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

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

Comment [2]

こんにちは。
ブックマークボタンを変える方法を探していたので、まさにドンピシャの情報でした。
心から感謝いたします。

わがままを承知で要望を述べるのですが、
Google+1のアイコンを変えて設置する方法についても
特集していただけたらと思います。
(個人で調べてみたのですが、手詰まりになってしまいました)

これからも面白い記事を楽しみにしています。

かわせ

>かわせさん
コメントありがとうございます。お役に立ったようで何よりです。
Google+1ボタンも記事にしましょうか。
まんま同じ機能はちょっと無理かもしれませんが、
またサンプル等できたらアップしますのでもうしばしお待ちください。

indigo

Post Comment

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

Return to page top