Facebookページ作成についての覚書

2011/05/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>

上記テンプレートで作成したデモはこちらになります。