Facebookページをカスタマイズする方法はいくつかあるみたいですが、Web制作ができる人だったらこれが一番やりやすいと思います。

とりあえず早くテンプレートデータが欲しい!って人はこちらから
facebook_page_2011-04-07.zip

FacebookページにiFrameを読み込む

Facebookページのトップページに iFrame(インラインフレーム)を読み込むことができます。いくつかの制限はありますが、自由にページをデザインできますね。ザックリとした流れはこんな感じです。

  1. Facebookページを作成
  2. 開発者登録をする
  3. Facebookアプリケーションを作成
  4. iFrame で読み込むページを作成
  5. レッツショータイム!

このページの内容に沿って進んでいけば問題なしと思います。
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

最後までお読みいただきありがとうございます!よろしければフォローお願いします!

もしお役に立てる情報がありましたら、そのお気持ちを Bitcoin や PayPal で送金していただけると、とても嬉しく思います!

他にも、Amazonのほしい物リストからお選びいただくこともできます。

こちらの関連記事もあわせてどうぞ!