Facebookの「いいね!」ボタンをオリジナルデザインに変更する

Publish:

Category:PHP, JavaScript

Tag:

  • Hatena Bookmark:
  • Twitter:
Facebookの「いいね!ボタン」をオリジナルで作る

Webサイトをデザインするときに、デザインに合わせて公式「いいね!」ボタンと同じような機能を持ちつつ、自前のボタン画像で「いいね!」ボタンを自作したいなーと思ったときに調べた事のメモを兼ねて。

ちなみに、公式ボタンは「Like Button – Facebook開発者」から取得できます。
「いいね!」ボタンを設置しよう | Facebook Guideで、取得方法が詳しく掲載されてます。

ページ内見出し一覧

「いいね!」ボタンを作る

Facebookの「いいね!」ボタン

公式ボタンでいう「いいね!」(Like)の部分を作ろうかと思ったんだけど、結構手間かかりそう…だったので、ひとまず「いいね!」ボタンと統合する前の「シェア」ボタンで代用することにする。
「シェア」ボタンは「いいね!」ボタンと統合後、「いいね!」としてカウントされている。

オリジナルのボタン画像を用意して、その画像に「シェア」したいページの情報を含んだリンクを貼る。
「いいね!」&「シェア」数の表示はいらないよという場合はこの作業だけ。

以下、見易いように改行してます。実際は1行でOK。

<a href="http://www.facebook.com/sharer.php?u=該当ページのURI&amp;t=該当ページのタイトル">
<img src="用意した画像のパス">
</a>

ページのタイトルやURLは、URLエンコードする。
下の画像は指定したURLとタイトルがこんな風に表示されるよってキャプチャになります。

Facebook シェア入力画面

「いいね!」数取得方法

FacebookのGraph APIを使えば、JavaScriptやPHPで「いいね!」数を取得することができる。
これは、「いいね!」ボタンと「シェア」ボタン統合後の件数取得方法になります。
別々に取得する場合はページ下部の「おまけ:「いいね!」数と「シェア」数の個別取得API」を参照。

「いいね!」数取得API

http://graph.facebook.com/「いいね!」数を取得したいWebページのURL

もしくは、

https://graph.facebook.com/「いいね!」数を取得したいWebページのURL

取得データ形式

上記APIでデータを取得するとJSON形式でデータが返ってくる。
以下は現在indigonote.comの「いいね!」数を取得した時に返ってきたデータ。

{
   "id": "http://indigonote.com/",
   "shares": 1
}

サンプル/JavaScriptを使った「いいね!」ボタン

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

JavaScript用関数

var likeCount = function(_id ,_url) {
	if(!_id)	return;
	var pageURL = (_url) ? _url : location.href;
	var callback_name = 'jsonp_' + _id;
	var url = 'http://graph.facebook.com/' + 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.shares)? data.shares : 0;
		document.getElementById(_id).innerHTML = count;
	};
}

関数の引数について

likeCount( '「いいね!」数表示エレメントのID名', '「いいね!」数を取得したいページのURL' );
「いいね!」数表示エレメントのID名
取得した「いいね!」数を表示するエレメントのIDの名前を入力(必須)。
「いいね!」数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

JavaScriptを使った「いいね!」数取得デモ

デモでページで「いいね!」数が取得できているかどうか確認。

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

サンプル/jQueryを使った「いいね!」ボタン

jQueryを使って取得。

jQuery用関数

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

関数の引数について

likeCount( '「いいね!」数表示エレメントのID名', '「いいね!」数を取得したいページのURL' );
「いいね!」数表示エレメントのID名
取得した「いいね!」数を表示するエレメントのIDの名前を入力(必須)。
「いいね!」数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

jQueryを使った「いいね!」数取得デモ

デモでページで「いいね!」数が取得できているかどうか確認。

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

サンプル/PHPを使った「いいね!」ボタン

PHP用関数

function likeCount($str = null) {
	if($str)	$url = $str;
	else	$url = ((!empty($_SERVER['HTTPS']))? "https://" : "http://").$_SERVER['SERVER_NAME'].$_SERVER['REQUEST_URI'];
	$json = file_get_contents('http://graph.facebook.com/' . $url ,true);
	$data = json_decode($json, true);
	return ($data[shares])? $data[shares] : 0;
}

関数の引数について

likeCount('「いいね!」数を取得したいページのURL' );
「いいね!」数を取得したいページのURL
省略可能。
省略した場合は実行ページの数を取得する。

PHPを使った「いいね!」数取得デモ

デモでページで「いいね!」数が取得できているかどうか確認。

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

おまけ:「いいね!」数と「シェア」数の個別取得API

「いいね!」と「シェア」では使い道も違うので、どうしても別々に取得したい時にREST APIを使用するといいかも。

ただ、REST APIページに

Please note: We are in the process of deprecating the REST API. Please use the Graph API and access using the Insights object

links.getStats – Facebook開発者

「段階的に廃止していく」とあるので、Graph APIを使う方がいいみたい。
一応、取得APIと取得データ形式を載せておく…

取得API

http://api.ak.facebook.com/restserver.php?method=links.getStats&urls=取得したいページのURL

取得データ形式

上記APIでデータを取得するとXML形式でデータが返ってくる。
以下は現在indigonote.comの「いいね!」数を取得した時に返ってきたデータ。

<?xml version="1.0" encoding="UTF-8"?>
<links_getStats_response xmlns="http://api.facebook.com/1.0/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://api.facebook.com/1.0/ http://api.facebook.com/1.0/facebook.xsd" list="true">
<link_stat>
	<url>http://indigonote.com/</url>
	<normalized_url>http://www.indigonote.com/</normalized_url>
	<share_count>1</share_count>
	<like_count>0</like_count>
	<comment_count>0</comment_count>

	<total_count>1</total_count>
	<click_count>0</click_count>
	<comments_fbid xsi:nil="true"/>
	<commentsbox_count>0</commentsbox_count>
</link_stat>
</links_getStats_response>

Comment [3]

何とか理解しまして実装できました!
とても参考になりました。ありがとうございます!!!

Takeo

何度も投稿させていただき申し訳ありません。
PHP でFacebook とTwitterのカウント表示をWordpressで実装しています。
単独ページなどでは、

Null で自動的に、URLを入れてくれるようで、正確なカウントが返ってきます。

ただ、index.php やcategory.phpのように、複数のページがスタックされる場合、
それぞれの個別のパーマリンクを渡してあげなくてはいけませんね。
その場合、下記のような表記でやってみたのですが、うまくいきません。。。

すみませんが、ご教授いただけますと助かります!!!

Takeo

Post Comment

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

Return to page top