もくじ
Facebookページをカスタマイズする方法はいくつかあるみたいですが、Web制作ができる人だったらこれが一番やりやすいと思います。
とりあえず早くテンプレートデータが欲しい！って人はこちらから
facebook_page_2011-04-07.zip
FacebookページにiFrameを読み込む
Facebookページのトップページに iFrame（インラインフレーム）を読み込むことができます。いくつかの制限はありますが、自由にページをデザインできますね。ザックリとした流れはこんな感じです。
- Facebookページを作成
- 開発者登録をする
- Facebookアプリケーションを作成
- iFrame で読み込むページを作成
- レッツショータイム！
このページの内容に沿って進んでいけば問題なしと思います。
FacebookページにiFrameを組み込もう｜Social Media Experience
Facebookページの仕様をメモ
- iFrame の横幅は 520px
- プロフィール画像のサイズは 180×540px まで
- プロフィール画像を元にサムネイルが自動生成されるが、「サムネイルの編集」で位置の微調整は可能
- プロフィール画像の jpg は画像が荒れるので png が無難
- ファンが25人を超えると、Facebookページの URL を任意のものに変更できる。さらにファンが100人を超えると Facebookページの名前や URL を変更できなくなる。
「いいね！」を押しているかどうかを判別して分岐させる
Facebook では通常「いいね！」をクリックすると、そのことが自分のウォールに表示され、さらには友達のニュースフィードにも表示されることになります。つまり情報を共有する機能ですね。
Facebookページの「いいね！」はこれに加えて、特殊な意味を持っています。「いいね！」をクリックすると、その Facebookページのファンになったということになり、それ以降はページの情報が自分のニュースフィードにも流れることになります。Twitter でいうフォローに近いです。
ファンかそうじゃないかを PHP で判別して、表示するページを振り分ける方法がまとめられています。実際すぐに使えるサンプルコードもありますよ。
iFrameでファン専用のコンテンツを作成しよう｜Social Media Experience
すぐに使えるデータをアップしたよ
上記の参考サイトで書かれているものに加え、すぐに使えるテンプレートデータを一式用意しました。
ダウンロードはこちらから
facebook_page_2011-04-07.zip
データ内容はこんな感じ
- fan.html（ファン用ページ）
- notfan.html（非ファン用ページ）
- index.php（ファンかどうかを判別）
- parse_signed_request.php（セキュリティ用ファンクション）
- common
- lightbox（lightbox のパーツデータ）
- close.psd
- close.gif
- loading.gif
- next.gif
- prev.gif
- css（ファン/非ファン用ページの CSS）
- import.css
- jquery.lightbox.css
- screen.css
- img（ファン/非ファン用ページ、プロフィール画像）
- fan.psd
- notfan.psd
- profile.psd
- fan.jpg
- notfan.jpg
- profile.png
- js（JQuery など）
- common.js
- jquery.js
- jquery.lightbox-setting.js
- jquery.lightbox.js
- yuga.js
parse_signed_request.php
「いいね！」を押している（＝ファン）かどうかを判別する「signed_request」を使う際、それがちゃんとFacebookから送られたものかどうかを判別するためのものです。セキュリティ面の考慮ですね。
<?php
function parse_signed_request($signed_request, $secret) {
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);
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, '-_', '+/'));
}
?>index.php
「いいね！」を押している（＝ファン）かどうかを判別するプログラムです。「ここにアプリの秘訣を入力」の部分は書き換えます。アプリの秘訣って…たぶん…シークレットキーとか言いたかったのだと思います。Facebook のローカライズはちょこちょこおかしい。
<?php
include 'parse_signed_request.php';
if (isset($_POST['signed_request'])) {
$data = parse_signed_request($_POST['signed_request'], 'ここにアプリの秘訣を入力');
}
if($data['page']['liked'] == '1'){
include 'fan.html';
} else {
include 'notfan.html';
}
?>fan.html、notfan.html
それぞれファン用ページ、非ファン用ページです。要するに、500×780px で自由にページを作成すればいいということです。JQuery が普通に読み込めてますねぇ。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Imagetoolbar" content="no" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="css/import.css" media="all" title="Default Style" />
</head>
<body>
<div id="container"> <img src="img/fan.jpg" width="500" height="780" /> </div>
<script type="text/Javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/yuga.js" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery.lightbox.js"></script>
<script type="text/javascript" src="js/jquery.lightbox-setting.js"></script>
</body>
</html>common/lightbox
lightbox のパーツです。詳細はこのあたりから。
Lightbox 2
css/import.css
それぞれの CSS を読み込むためのものです。
css/screen.css
メインの CSS ファイルです。
css/jquery.lightbox.css
lightbox の CSS です。
img
ファン用ページ、非ファン用ページ、プロフィール画像用のデータです。
js
JQuery と yuga.js です。yuga.js についてはこちらから。
yuga.js :: Kyosuke.jp
あ、テンプレートデータをダウンロードするの忘れた！って人はこちらから
facebook_page_2011-04-07.zip
