Share on FacebookTweet about this on TwitterShare on Google+

6/24にクレオ大阪東行われた「経験者が語る! facebook達人になるためのノウハウ&事例勉強会」でセッションを担当させて頂きました。
当日の話の中でURLや制作のソースなどの補足資料をここにアップします。

Facebookページ(旧ファンページ)の制作手順

1)最初にページを作成
http://www.facebook.com/pages/create.php
ジャンルを確認して任意の名前で登録。
2)タイムラインのカバー画像とプロフィール画像を変更
pictronでFireworksのテンプレートを配布してますので、ご随意にお使い下さい。
http://www.pictron.net/2012/03/28/facebook-timeline%E3%81%AE%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%92fireworks%E3%81%A7/#more-975
3)iFrameでタブページを追加
デベロッパーページへ行きます。
https://developers.facebook.com/apps/
4)ページ右上の「新しいアプリケーションを作成」をクリック。
5)表示されるダイアログでアプリの名称を入力。
6)セキュリティチェックなどがありますので、表示された文字を入力すればアプリケーションが作成されます。
7)アプリの基本設定で「ページタブ」の設定を行います。Secure Page TabはSSLが使えるようであればSSLのフルパスを入れてください。このページのみなさんがお使いのサイトのどこのURLでもかまいません。
8)「ページタブの画像」をを入れ替えます。
9)これで特定のページを、タブページとして登録しました。
10)いいねを押しているユーザーと押してないユーザーで異なったものを表示される最低限のソース
Jsphonのダウンロード
ダウンロードして頂いたファイルを以下のような構成にindex.phpがタブページにするファイル。
<?php
//まじないスタート
require_once('Jsphon/Decoder.php');
function parse_signed_request($signed_request, $secret) {
$json = new Jsphon_Decoder();
list($encoded_sig, $payload) = explode('.', $signed_request, 2);

// decode the data
$sig = base64_url_decode($encoded_sig);
//$data = json_decode(base64_url_decode($payload), true);
$data = $json->decode(base64_url_decode($payload));

if (strtoupper($data['algorithm']) !== 'HMAC-SHA256') {
error_log('Unknown algorithm. Expected HMAC-SHA256');
return null;
}

// check sig
$expected_sig = hash_hmac('sha256', $payload, $secret, $raw = true);
if ($sig !== $expected_sig) {
error_log('Bad Signed JSON signature!');
return null;
}

return $data;
}

function base64_url_decode($input) {
return base64_decode(strtr($input, '-_', '+/'));
}

//アプリのシークレットキー
$data = parse_signed_request($_POST['signed_request'], 'シークレットキー');

?>
<html>
<head>
<meta charset="UTF-8">
<title>Fbseminar Osaka</title>
<style>
body {
width:810px;
padding:0;
margin:0;
overflow: hidden;
}

#notiine {
display:block;
width:560px;
margin:0 auto;
}
</style>
</head>

<body id="wallMain">
<?php
if ($data && $data['page']['liked']) {
/*iineが押されたら*/
?>
いいね押した人
<?php }else{
/*iineが押されてなかったら*/
?>
いいね押してない人
<?php } ?>
<!--おまじない-->
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.Canvas.setSize({ width: 810, height: 520 });//サイズ固定
</script>
<!--おまじない-->
</body>
</html>

開発情報

Gianism
Wordpressのユーザー登録をfacebook,twitterのOAuth認証で登録できる。
http://wordpress.org/extend/plugins/gianism/

キャンペーン事例紹介

KotexのPinterestを使ったキャンペーン
http://www.youtube.com/watch?v=UVCoM4ao2Tw
コカコーラリサイクルキング ?イスラエル
http://www.youtube.com/watch?v=mi4NeoMYCMM
Onitsuka Tigerシドニー映画祭のキャンペーン
http://www.youtube.com/watch?v=IUxr-atwNfw

5つの管理者権限の違い

私の勉強不足で質問を受けましたが、使った事がなかったのですが5つの管理者権限の違いは以下のような権限だそうです。これから運用で使えそうですね。

マネージャ コンテンツ製作者 モデレータ 広告主 インサイトアナリスト
管理人の役割を管理する
ページを編集する、アプリを追加する
投稿をページとして作成する
コメントに返信する、コメントを削除する
メッセージをページとして送信する
広告を作成する
インサイトを見る