Facebookページ作成についての覚書
2011年5月13日
マイアプリでiframeを組み込むタイプのFacebookページ作成手順を覚書として書いてみます。
マイアプリの作成からFacebookページへの組み込みまで
既ににFacebookページ（旧名称：ファンページ）は持っていると想定して、アプリ登録して組み込むまでの手順は下記のページを参考にしました。
Facebookページのデザインカスタマイズをしてみた（iframeの方ね）
iframeのスクロールバーを取る方法
iframeのスクロールバーを取る方法は当ブログのFacebookページのスクロールバーを消す方法の改良版を参考にしてください。
iframeに読み込ますページについて
iframeで読み込ますページについて言及しているページが少なかったので、私が作成した際に思った事を記載します。
拡張子ですが、html、phpともに使えるのですが、「いいね！」をクリックした際に表示を変えるなどの処理を行う際にはphpにしておいたほうが無難です。なので、最初からphpで作成してしまったほうが良いと思います。phpを使用する際にはphpSDKを利用すると便利です。「いいね！」をクリックした際に表示を変えるなどの処理などは下記のページを参考にしました。
新Facebookページでいいね！してる人だけ表示を変える方法
いいね！をクリックすることで何かのページのURLを表示させたり、コンテンツをダウンロードできるリンクを表示させたりするプロモーションに使えます。
以上をまとめたテンプレート
以上をまとめたテンプレートはこんな感じになりました。
<?php
require_once 'facebook-php-sdk-04168d5/src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'xxxxxxxxxxxxxxx',
'secret' => 'xxxxxxxxxxxxxxx',
'cookie' => true,
));
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="robots" content="noindex,nofollow" />
<title>Facebookファンページタイトル</title>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'xxxxxxxxxxxxxxx',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>
<?php
$signed = $facebook->getSignedRequest();
if ($signed['page']['liked']) {
echo '「いいね！」を押された後に表示する内容';
} else {
echo '「いいね！」を押される前に表示する内容';
}
?>
</body>
</html>
上記テンプレートで作成したデモはこちらになります。