ajike switch

ajike switchの更新をメールでお伝えします!

8年以上ajikeが蓄積したデザイン思考とUXデザインの知見を発信し続けるブログ<ajike switch>の更新情報を無料でメールにてお知らせ致します。

×

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

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

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


■ 目次

1.はじめに
2.実装方法(Facebookページ)
3.実装方法(Webページ)
4.さいごに


■ 1.はじめに

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

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

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

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

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


■ 2.実装方法(Facebookページ)

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

[php]
<?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>”;
}

?>
[/php]

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

[html]
<!– 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>
[/html]
いいねを押したかの判定は上記のjavascriptで可能です!

demo

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

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


■ 3.実装方法(Webページ)

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

[php]
<?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’
));
}
[/php]
こちらはいいねを押しているか判定するのにFQLを使うことで実現しています。逆にそれ以外は先ほどのまったく一緒ですね。

demo

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

こちらもスマホでアクセスして試してみてください!


■ 4.さいごに

いかがでしたでしょうか?

スマーフォトンの普及が急速に進む中で、キャンペーンなどでも「スマホも対応」というのは今後もどんどん増えてくると思います。

サイトだけでなく上記のようなFacebookの機能などについては、そもそも対応できるのか?というのを調査する必要があり、意外と文献や紹介しているサイトが少ないため、なかなかその可否が難しいケースもありますよね。。

ファンゲート機能については上記で出来ましたので是非参考にしてみてください。

では!

■参考:
FacebookのGraph APIで「me/likes」を取得したのですが、「いいね」をつけたサイトの情報が含まれていません

url_like – Facebook開発者

servi