Facebookページの作り方 2012年1月版

2012年1月10日
Webサイト制作

一年ちょっと前に「Facebookページを自由にカスタマイズする方法」という記事でFacebookページの作成方法を説明したのですが、Facebookはコロコロ仕様を変更するため、その記事を読んでもFacebookページは作れませんｗ今や使い物にならない記事にもかかわらずアクセス数はかなりあるので、訂正…というか新仕様にあわせたFacebookページの作成方法を説明します。

冒頭でも書きましたが、Facebookページの作り方についての記事は、半年以上前に書かれたものはアテにしないほうがいいです。それほどFacebookは仕様変更のスパンが短いのです。この記事もあと半年後には書き直しなのか…そうなのか…。

基本的なFacebookページの作り方

まずはFacebookページを新規作成します。こちらの「Facebookページを活用」ページの右上、「Facebookページを作成」をクリック。

カテゴリーを選びます。Facebookページ名を入力し、規約に同意したら「スタート」！

はい完成！楽チンですね。「ようこそ」と表示されているところの「画像をアップロード」からFacebookページ用画像を追加できます。

画像を追加したら右上の「Facebookページを編集」をクリック。

「基本データ」からFacebookページの基本情報を入力しましょう。「基本設定」「権限の管理」も必要があれば変更。これで基本的な設定は完了です。

「ウェルカムページ」の作成

「ウェルカムページ」は、Facebookページへ初めて訪れたユーザーに表示されるランディングページです。設定によりウォールをランディングページとして表示させることもできますが、このFacebookページが何についてのものなのかを説明できるので、ウェルカムページを作成しておいた方が効果的です。

「Facebookページを自由にカスタマイズする方法」で紹介した時との一番の変更点は、iframe（インラインフレーム）を使うことになった点です。表示されるウェルカムページの部分はユーザーが自分で用意したサーバーにファイルをアップロードすることになります。iframeになった事でより自由にFacebookページをカスタマイズする事ができるでしょう。

iframeを使ったFacebookページ

ただし、注意しなければいけないのが、そのiframeで表示するページは2011年10月1日からSSL必須となりました。つまり https:// で始まるURLに対応したセキュアなページでなければなりません。そのためSSLが利用できるサーバーが必要です。レンタルサーバーによっては最初から共有SSLが使用できるところもあるので、まず今使っているサーバーで使えるかどうかを確認しておきましょう。

それではSSLが利用できることを前提に手順を紹介します。大きく分けて3ステップあります。

1. iframeの中身を作成

画像一枚でも、HTML/CSSを使った簡単なランディングページでも、PHP等プログラミングを使った本格的アプリでも何でもOK！ただし、いくつか注意点あり。

<div id="fb-root"></div>

追記：大事なことなのに書き忘れていたので追記。HTMLの </body> の直前に <div id="fb-root"></div> を記述します。これ自体なくても表示されるし、動作もするのですが、記述するのがルールです。おまじないだと思って書いておきましょう。HTMLファイルの最後はこんな感じになります。

    <div id="fb-root"></div>
</boby>
</html>

リンクターゲット

iframeなので、ターゲットを指定しないとiframe内に表示されてしまいます。すべての a タグに target="_blank" を追加して別タブで表示するのを忘れないようにしましょう。JavaScriptですべてのリンクのターゲットを _blank にすることもできます。便利ですね。以下のコードを <head>〜</head> 内に記述してください。

<script type="text/javascript">
window.onload = function() {
     for (var i = 0; i < document.links.length; i++) {
          var ele = document.links[i];
          if (ele.href.match(/^http/)) {
               ele.target = "_blank";
          }
     }
}
</script>

iframeのサイズ

規定のサイズは幅520px、高さ800pxです。このサイズを超えるとスクロールバーが表示されます。幅はCSSで body の幅を指定すればOK。

body{width: 520px}

問題は高さです。もちろん800pxをこえても表示はされますが、スクロールバーが嫌っていう人もいますよね。そんなときはJavaScriptでおまじない。以下のコードを <div id="fb-root"></div> の後、</body> の前に入力します。「YOUR_APP_ID」を任意のものに変更。「YOUR_APP_ID」については下で出てくるのでしばらくお待ちくださいまし。

追記（2012/1/10/15:30）：コードを最新のものに変更しました。

<div id="fb-root"></div>

<script src="https://connect.facebook.net/en_US/all.js"></script> 
<script type="text/javascript"> 
  FB.init({
    appId  : 'YOUR_APP_ID',
    oauth  : true,
  });

  FB.Canvas.setAutoGrow();

  function growSize() {
    var height = Number(
      document.getElementById('myContent').style.height.split('px')[0])
      + 100;
    document.getElementById('myContent').style.height = height + 'px';
  }
</script>

</boby>

以上の点に注意してiframeページが完成したらサーバーにアップロードします。これでiframeの中身が完成！

2. アプリ登録

Facebookページのコンテンツはアプリとして登録します。

まずは「Facebook開発者」ページへ行き、「アプリ」をクリック。

「新しいアプリケーションを作成」をクリックするとポップアップウィンドウが表示されます。コンテンツ（タブ）の名前を入力して規約に同意したら「続行」。「App Namespace」はとりあえず空欄でOK。

恒例の読みにくすぎるセキュリティチェックが終わったら「送信」。

とりあえずアプリ完成。先ほどでてきた「App ID」はコレのことです。

コンテンツの横に表示されるアイコンを設定しましょう。ファイル形式はJPG, GIF, PNG。ファイルの上限は5MB。サイズは16x16ピクセルです。それより大きなものはリサイズされます。ロゴも登録できますが、どこに表示されるのか…？サイズは75x75です。

ページ下部にある「ページタブ」をクリック。ページタブ名、iframeで表示するURLを「Secure Page Tab URL」に記入して「変更を保存」で完成！

3. FacebookページにIFrameタブを追加

アプリを作っただけではFacebookページに反映されません。Facebookページで見れるように設定します。

ブラウザから以下のアドレスを開きます。

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

YOUR_APP_IDを 2. でも登場したApp IDに、YOUR_URLを「Secure Page Tab URL」で記入したiframeのURLに書き換えてGo！

するとこのように表示されるので、ページタブを追加したいFacebookページ名を選択して「ページタブを追加」。

Facebookページに戻ると、タブが追加されています！うまく表示されているか確認しましょう。時々反映されるまでに時間がかかる事があります。（この例を作っている時は20分くらいかかりました…）「あれ？表示されない？！」という時は慌てず紅茶でも飲んで反映されるのを待ちましょう。

デフォルトではFacebookページを開くとウォールが表示されるようになっています。ウォールではなくウェルカムページを表示させたいので、Facebookページを編集＞権限の管理にある「デフォルトで表示するタブ」のセレクトボックスから、最初に表示させるコンテンツを選択します。

うまく設定できましたか？え？前よりハードルが高くなってる？はい、私もそう思います。なんかややこしいですよね…。「アプリを作成」という単語だけでびびっちゃいますね…。もっとわかりやすい作り方になるよう願っています。まあそしたら私はまた記事を書く事になるんですけどね。

今回記事に合わせて新たにウェルカムページを作りなおしたので、ぜひぜひご覧ください！お気に召したらぜひ「いいね」！

Webクリエイターボックス

参考サイト：