SNS企画の参考に！FacebookチェックインとPHPでユニクロキャンペーン風に連動させる

これからソーシャルメディアと連携した仕事が増えてくると思う・・・。
イヤ、きっとくると思うので勉強のためにデータを取得してみた。

今回は最近始まったユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE 」がfacebookのチェックイン機能と連動していた仕組みが気になったので、連携部分の実現方法を調べてみた。
Facebook APIを初めて触ってみたが、PHPと連携させてなんとなくそれっぽいものが作成できたので、方法を紹介。

Twitter APIやInstagram APIに比べてFacebook APIは凄い簡単だったのアイデア次第で楽しいことができそうです。
チェックイン機能と連動した企画は、地域の観光や実店舗への誘導などに活用できそうです。

ユニクロのキャンペーン「UNIQLO CHECK-IN CHANCE」の手順

※これは完全再現ではありません。また、Facebookと連動する仕組みが知りたかったので、それ以外は出てきません。

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをさせる

4.クーポンの抽選が開始される

5.Facebookに投稿させる

実際の「UNIQLO CHECK-IN CHANCE 」

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをする

4.クーポンの抽選が開始される

5.Facebookに投稿させる

再現した「UNIQLO CHECK-IN CHANCE 」

1.Facebookに認証する

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

3.チェックインをする

4.クーポンの抽選が開始される

5.Facebookに投稿させる

Facebook APIを使うための準備

Facebook ApIを使うには、アプリ登録を行ってアプリIDとアプリの秘訣を取得しないといけません。
そのため、最初にfacebook DEVELOPERSでアプリの登録を行います。
登録が完了するとApp IDとApp Secret:が表示されるのでこれをコピーしてきます。

次に、PHP SDKをSDKs & Toolsからダウンロードしてきます。
フォルダには色々ファイルが入っていますが、使うのはsrcディレクトリ内の
base_facebook.php
facebook.php
fb_ca_chain_bundle.crt
の３ファイルで、facebook.phpをインクルードすれば準備は完了です。

1.Facebookに認証する

最初にPHP SDKのfacebook.phpをインクルードします。
そして、アプリのApp IDとApp Secretをつかってfacebookオブジェクトを作ります。

require_once 'src/facebook.php';

$appId = 'hogehoge';
$secret = 'hogehoge';

$facebook = new Facebook(array(
    'appId' => $appId,
    'secret' => $secret
));

次に、FacebookにログインするためのURLを取得します。
このときにウォールへの投稿やチェックインのデータの取得のためにパーミッションを指定します。

$par = array('scope' => 'publish_stream,read_friendlists,
publish_checkins,user_checkins');
$fb_login_url = $facebook->getLoginUrl($par);

getLoginUrlでログイン用のURLが取得できるのでそれを表示させます。
このURLをクリックすると以下のようにログイン認証に進みます。

さきほど指定したパーミッションが表示されます。

これで、ウォールへの投稿、チェックインを検索したり、読み込んだり、投稿することが可能になったので、あとは店舗でチェックインをしたらクーポンを発行してウォールに投稿すれば完了です。

2.ユニクロ店舗でサイトにアクセスして店舗情報を取得する

チェックインに関する情報はCheckinに紹介されています。

今回は今いる場所から近隣の店舗を探します。店舗内でチェックインしてもらわないといけないため検索範囲の距離を10mにします。
GET https://graph.facebook.com/search?q=店舗名&type=place&center=緯度,軽度&distance=10

近隣の店舗を検索

$locSearch = $facebook->api('/search?q=ユニクロ&type=place&center=36.75,138.35&distance=100');

店舗を検索するには、今いる場所の緯度経度の情報が必要なのでJavaScriptでGPSから緯度、経度を取得します。
非同期で店舗検索をして店舗名と店舗IDを収得して表示させます。
店舗IDは、チェックインを投稿させるときに必要なのでhiddenの値に入れてチェックインボタンを押したときにPOSTで送ります。

$(function() {
	navigator.geolocation.watchPosition(update);
});

function update(position) {
	var lat = position.coords.latitude;
	var lon = position.coords.longitude;
	var acc = position.coords.accuracy;
	
	 $.ajax({
		type: "POST",
		url: "hoge.php",
		dataType: "json", 
		data: "lat=" + lat + "&lon=" + lon,
		success: function(res) {
			$("#shop").html(res.name);
			$("#shopId").val(res.id);
		}
	});
}

他のチェックインの情報の取得方法はこちら

チェックイン情報を取得
GET https://graph.facebook.com/[checkin_id]
ユーザーがチェックインした場所
GET https://graph.facebook.com/[user id]/checkins
個々の場所
GET https://graph.facebook.com/[page id]/checkins

3.チェックインをする

チェックインをした店舗IDをPOSTで受け取って店舗情報を取得します。
店の情報は、

GET https://graph.facebook.com/[checkin_id]

で取得できます。

$locPage = $facebook->api('/' . $id);
$sh_locData = $locPage;
$sh_name = $sh_locData['name'];
$sh_id = $sh_locData['id'];
$sh_lat = $sh_locData['location']['latitude'];
$sh_lon = $sh_locData['location']['longitude'];

次に取得した店舗名、店舗ID、緯度、経度を使ってチェックインをします。このときに写真、URL、説明などを入れてあげれば一緒に投稿できます。

$facebook->api('/me/checkins', 'POST', 
	array('message' => 'メッセージ',
		'link' => 'URL',
		'name' => '店舗名',
		'description' => '説明',
		'place' => '店舗ID',
		'picture' => '写真',
		'coordinates' => '{"latitude":"' . $sh_lat . '",
 "longitude": "' . $sh_lon . '"}'
	));

このときに、ユーザー情報も取得して、それをデータベースに保存したらアイコンと名前とチェックインした店舗名、クーポンをPCサイトで表示させます。
これを使ってPCのキャンペーンサイトではにぎやかに演出しています。
ユーザーのプロファイル情報の取得はこちら

$fb_user_profile = $facebook->api('/me');

4.クーポンの抽選が開始される

チェックインが完了するとクーポンの抽選が始まります。
このときにクーポンの抽選とクーポンIDを発行してデータベースに格納します。
抽選確率は1,000円と2,000円のクーポンが15人に1人当たるようです。

5.Facebookに投稿させる

クーポンの発行が完了したら、みんなに教えるためにフェイスブックの自分のウォールへの投稿します。

$facebook->api('/me/feed', 'POST', 
		array('message' => '【実験】さあ、みんなもチェックインしよう！',
			'link' => 'URL',
			'picture' => '写真',
			'description' => 'このサイトから...'
		));

なんとなく「UNIQLO CHECK-IN CHANCE」っぽいものができました。
チェックインデータをDBに保存したり、クーポンの管理やセキュリティ、同じ店舗での複数回チェックインを制御すれば使えそうな気がします。