Facebookファンゲート機能をスマホで実装する方法

システム
2013.11.05
by yamamoto

グロースハックシステム

こんにちは、アジケの山本です。

今日はFacebookのファンゲート機能をスマートフォンで実装する方法をシェアします。

■ 目次

１．はじめに
２．実装方法（Facebookページ）
３．実装方法（Webページ）
４．さいごに

■ １．はじめに

よくFacebookのキャンペーンの相談を受けるのですが、スマホ対応はほぼ必須ですよね。また同様によくある相談であるのが「ファンゲート機能」です。

ファンゲート機能スマートフォン対応

プレゼントキャンペーンなどでは、応募してもらう条件としていいねを押してもらいたいですよね。

そのファンゲート機能、PCではよく見かけるのですが、それをスマホでも実現できるのか？　というのをいろいろ調査していたら、PCとは違って「アプリ認証」をしてもらえれば実装が可能ということがわかりました。（以前できないと思ってたのでそう伝えてしまった方すいません。。）

またFacebookページだけではなく普通のWebページについても少しやり方は違いますが実装できましたので両方の実装方法をシェアします。

■ ２．実装方法（Facebookページ）

いいね対象ページがFacebookページの場合です。
※Facebook PHP SDKを使っています。

<?php

require 'facebook.php';

$facebook = new Facebook(array(
'appId' => 'Your App ID',
'secret' => 'Your App Secret Key'
));

$user = $facebook->getUser();

if ($user) {

try {
$likes = $facebook->api('/me/likes/Facebook Page ID');
if (!empty($likes['data'])){
//いいね! を押している人に表示するページ
header("Location: Fan_URL"); exit;
} else {
//いいね! を押していない人に表示するページ
header("Location: Nonfan_URL"); exit;
}
} catch (FacebookApiException $e) {
echo($e);
}
} else {
$LoginUrl = $facebook->getLoginUrl(array(
'scope' => 'user_likes',
'redirect_uri' => 'Redirect_URL'
));
echo "<script type='text/javascript'>top.location.href = '$LoginUrl';</script>";
}

?>

「Your App ID」と「Your App Secret Key」には使用するアプリのもの、「Facebook Page ID」には対象のFacebookページのID、「Fan_URL」にはいいねを押したユーザーに表示するURL、「Nonfan_URL」にはいいねを押していないユーザーに表示するURL、最後に「Redirect_URL」にはこのPHPファイルのあるURLを入力してください。

<!-- JavaScript SDK 読み込み -->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1&appId=Facebook App ID";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- いいねボタン -->
<div class="fb-like" data-href="Facebook Page ID" data-colorscheme="light" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>

<!-- いいねしたらRedirect_URLへ転送する -->
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Event.subscribe('edge.create',
function(response) {
location.href = "Redirect_URL";
}
);
};
</script>

いいねを押したかの判定は上記のjavascriptで可能です！

demo

http://code.ajike.biz/fbfangate/facebookpage/

是非スマホでアクセスして試してみてください。

■ ３．実装方法（Webページ）

いいね対象ページが通常のWebページの場合です。（http://www.ajike.co.jp/など』

<?php
require 'facebook.php';

$facebook = new Facebook(array(
'appId' => 'Your App ID',
'secret' => 'Your App Secret Key',
));

$user = $facebook->getUser();

if($user){
try {
$fql = "SELECT url FROM url_like WHERE user_id = me() AND url = 'URL'";
$ret = $facebook->api(array(
'method' => 'fql.query',
'query' => $fql
));

if(isset($ret[0]['url'])){
//いいね! を押している人に表示するページ
include 'fan.php';
} else {
//いいね! を押していない人に表示するページ
include 'nonfan.php';
}
} catch (FacebookApiException $e){

}
if ($user) {
$logoutUrl = $facebook->getLogoutUrl();
} else {
$loginUrl = $facebook->getLoginUrl(array(
'scope' => 'user_likes'
));
}

こちらはいいねを押しているか判定するのにFQLを使うことで実現しています。逆にそれ以外は先ほどのまったく一緒ですね。