Facebookページへのいいね！が条件のWebページを作る方法

Facebookページ内でタブとしてキャンペーン等を展開する場合、スマートフォン版はカスタムページタブに対応していないのでWebページで展開することになります。
多くのキャンペーンがFacebookページへのいいね！を条件としているのですが、WebページからAPIを使ってFacebookページにいいねすることができません。
参考：FacebookのAPIを通してページにいいねすることは出来ない

APIが使えないので外部サイトからFacebookページへいいね！する場合は、公式のソーシャルプラグインを使うことになります。

では、具体的な実装方法です。

任意のFacebookページにいいね！されているかを判定する

Facebookページへのいいね！を条件とするページが表示される際に、Facebook認証でuser_likesパーミッションを取得し、該当のFacebookページへいいね！されているかを確認します。
この方法を使い、いいね！されている場合とされていない場合でページの内容を出し分ける等の実装が可能です。

Facebook APIにGETリクエストで/me/likes/(該当のFacebookページID)を投げ、Facebookページの内容が返ってきた場合はいいねされています。

以下、Javascript SDKを使った場合のサンプルです。

FB.api('/me/likes/(該当のFacebookページID)?access_token=(ユーザーのアクセストークン)', function(response) {
console.log(response);
	if(response.data == ""){
		// いいねされていない
	} else {
		// いいねされている
		// response.data[0].nameにFacebookページ名が入る
	}
});

ソーシャルプラグインのいいね！が押された事を検知する

いいね！されていなかった場合、Facebookページにいいね！してもらうためのプラグインを設置します。
LikeボックスまたはLikeボタンのいずれかが良いでしょう。

Facebookページタブでは、Facebook側(iframeの外)のいいね！ボタンをユーザーがクリックすることでページがリロードされますが、ソーシャルプラグインを使った場合これらの実装をうまく行う必要が出てきます。

いいね！を検知するには、Facebook Javascript SDKのFB.Event.subscribeを使います。

いいね！ボタンがクリックされたらページをリロードするスクリプトのサンプルは以下のようになります。

FB.Event.subscribe('edge.create', function(response) {
		window.location.reload();
		return false;
});

少し脱線しますが、いいね！されたアクションを拾っているだけですので、例えばいいね！された際にアクセス解析のトラッキングを行いたいなどの場合にもこの書き方を使うことができます。
いいね！が外された場合を検知するには、edge.createの部分をedge.removeにします。

このように、外部Webサイトから特定のFacebookページへのいいね！を条件としたページを作ることができますが、技術的にできるからと言って全く関係ないページをFacebookページへのいいね！条件にしてしまう事は避けるべきです。
今回は、あくまでも同一キャンペーンをFacebookページタブとスマートフォンWebページで展開したかったため、このような実装方法をご紹介しました。