facebookページのサブページ制作フローをまとめてみたWeb制作の仕事をしていると、最近はクライアントから facebookページについての質問や相談を良く受けるようになりました。私自身、このブログのfacebookページをだいぶ前に作成して以来、facebookページについての勉強はほとんどノータッチでした。そこまで手が回らなかったというのが正直なところでした。ただ、最近はそうも言っていられなくなってきたので、今まで自分の仕事用の facebook ページというものを作成してきませんでしたが、そろそろ 自分の facebookページを作成してみようと思い、寝る時間をちょっとだけ削って時間を作りコツコツと作成してみました。今回は、この経験をここに残しておこうと思い facebook ページのサブページの制作フローをまとめてみました。尚、facebook は仕様が頻繁に変更になるので、ここでご紹介する情報が役に立たなくなる日が近い将来に来る事をご了承の上、それまでの間ご参考にして頂ければと思います。

facebookページのサブページ制作フロー

  1. facebookページのサブページについてと準備について
  2. facebookページを作成する
  3. カバー画像、プロフ写真を登録する
  4. 外部サーバーにサブページ用webページを制作する
  5. facebook内でアプリを作成する
  6. 作成したアプリをfacebookページに追加する
  7. ページタブの画像を追加する
  8. ページ内リンクを書き換える

1.facebookページのサブページについてと準備について

1-1.facebookページのサブページについて

facebookページのサブページとは、facebookページのメインタブ内に作成するページの事です。 作成方法としては、外部サーバーにhtmlで書いた独自のページを作成し、facebook内でアプリを作成し表示させます。 アプリと聞くと難しいように聞こえますが、ここで作成するアプリはただ設定をするだけなので、プログラム等が書けなくても誰でも作成できます！

1-2.作成前の準備について

・外部レンタルサーバー(SSl対応必須)
外部レンタルサーバーを準備します。これは、facebookページのサブページを作成する領域です。 SSLは共用SSLでも専用SSLでもOK！

・HTML5&CSSでwebを作成する技術
外部サーバー上にHTML&CSSでWeb制作をするので、その技術が必要です。

2.facebookページを作成する

2-1.ページを作成

まず、facebookページをすでに持っている方は、4.外部サーバーにサブページ用webページを制作する から読んで下さい！ facebookページをを持っていない方は、個人アカウントでログインしたのちに、アカウント設定ページ等のページの下部の ”ページを作成” をクリックすると、下記の画面が現れますので、作成するfacebookページに該当するカテゴリをクリックして下さい！

facebookページ作成画面

2-2.必要事項入力

すると、必要事項の入力項目が現れますので、入力して ”スタート” をクリック！

必要事項入力画面

2-3.プロフ画像登録画面

次にプロフィール画像の登録画面が表示されます。あとからでも登録できるので、ここではとりあえず、 ”スキップ” しておきましょう！

プロフィール画像登録画面

2-4.基本データの登録画面

次に基本データの登録画面が表示されます。これもあとから入力可能ですので、とりあえず ”スキップ” しておきましょう！

基本データ登録画面

2-5.とりあえず非公開にする

すると、下記のような管理画面が現れます。

管理画面とタイムライン

管理者用パネルの下には、タイムラインと呼ばれるエリアが表示されます。 さて、このfacebookページはまだ作成中なので、非公開にしておきましょう。”facebookページを編集” ボタンをクリックし、”権限の管理” をクリックして下さい。

facebookページの権限の管理を編集

そして、一番上の ”facebookページを非公開にする” にチェックを入れて、一番下までスクロールして ”変更を保存” をクリックして下さい。

これで、非公開になりました。全てを作成して公開する準備が整った際には、再びここのチェックボックスをオフにすると、公開になるので覚えておいて下さい！そこまで終わったら、右上の ”facebookページを見る” ボタンをクリックして再び管理画面に戻りましょう！

2-6.facebookページのタブについて

さて、今回はサブページの作成がメインなので、他の設定等は後回しにして先に進みます。管理画面を真ん中くらいまでスクロールしていくと、下記のような画面が現れます。”写真” タブの右のタブの矢印をクリックして下さい。すると、下記のようにタブが現れます。

タブについて

サブページを作成すると、ここの各タブをクリックした時に表示されるようになります。さて、この画面、どこか寂しい印象です。先ほどスキップしたカバー画像とプロフ写真をここで登録しておきましょう！

3.カバー画像、プロフ写真を登録する

3-1.カバー画像の登録について

さて、ここではカバー画像とプロフ写真を登録します。 まず、サイズですがタイムラインのカバー画像は、縦851px、横315pxが好ましいと言われてます。 カバー画像は、実際にアップロードした画像よりも画質が劣化します。 これは、facebook上で画質を落としてファイルサイズを縮小する処理が行われている為であります。 特に、png画像は劣化が激しくなるようなので、できればjpg画像をお勧めします。

また、photoshopで画質を調整する際、jpgの最高画質よりも80%～60％くらいに画質を落とした方が、 facebook上にカバー画像をアップロードした際の画質がいいようです。 これは、下記の記事を発見し初めて分かった事なのですが、 実際に自分でも色々と試した結果、同様の結果になりました。 宜しければ、下記の記事を参考にしてみて下さい！

フェイスブックのカバー写真は画質80がベスト！特に写真を利用する場合などレビュー｜susi-paku ブログ
http://www.susi-paku.com/paku80-1.html

上記を踏まえた上で、タイムライン上の「カバーを追加」というボタンをクリックして案内に従い登録して下さい！

プロフィール写真の追加とカバー画像の追加

3-2.プロフ写真の登録について

プロフ画像は、横180ピクセル以上の画像が必要です。こちらは、タイムライン上の ”プロフィール写真を追加” ボタンをクリックして案内に従い追加して下さい！

4.外部サーバーにサブページ用webページを制作する

4-1.サブページ用webページ制作について

さて、サブページ用webページは通常のwebページのようにワイドには作れません。 以前は、横幅520ピクセルのみでしたが、いつの間にか810ピクセルでもOKになったようです。 ここでは、810ピクセルで作成する事を前提に進めていきます。 最低限の注意点を下記に列挙しておきます。

4-2.制作する上での参考にして頂きたい事項

4-2-1.ページを作成公開するサーバーはSSL対応必須！

これは、facebookページがSSL対応必須となっているので、これを守らないときちんと表示されません。共用でも専用でもOKです。

4-2-2.webページの規定サイズは、横810ピクセル、縦800ピクセル以内！

これは、facebookページの仕様上の制限です。例えば、縦800ピクセルを超えても表示はされますが、スクロールバーが表示されて見にくくなります。しかもスクロールバーが表示されるとその分横幅も狭くなり、横スクロールバーも出てしまいます。実は、これを回避する方法がありますので、それについてはこの項目の最後で紹介します。

4-2-3.できればリキッドレイアウトで作成しておく事が望ましい！

現在は、例えば横幅は520ピクセル、810ピクセルのどちらかを選択できるようですが、facebookはこれまでのように頻繁に仕様が変更になっていく事が予想されます。その度に、CSSを書き換えて調整するのも大変なので、できればリキッドレイアウトで作成しておく事をおすすめします！

4-2-4.できればHTML5とCSSで書くのが望ましい！

これにはいくつか理由があります。まずは、facebook自体がHTML5で書かれている為です。また、このあと説明しますが、アンカータグ内にhtml4.01及びxhtmlでは非推奨と言われるtarget=”_top”属性を書く必要もあるからです。target属性は、html4.01やxhtml1.0では非推奨の属性でしたが、HTML5で非推奨ではなくなりました。これらの理由からもHTML5で書く事が望ましいと思われます！但し、HTML5をまだ勉強中で、今はとりあえず作成したいという方は、html4.01かxhtml1.0で書いても表示自体には問題はありません。

4-2-5.リンクタグには target=”_top” を入れる！

サブページはfacebook上のインラインフレーム内に表示される為、リンクタグには target=”_top” を入れておき、フレームを解除する必要があります！

4-3.さて、上記の点を踏まえてwebページを作成して下さい！

4-4.追記。。。横810px 縦800pxを超えても、スクロールバーが表示されないようにする方法！


//下記の記述を</body>の直前に入れる！
//下記の●●●●●●●●●●●●●●●の部分にはそのfacebookページのアプリIDを入れる

<div id="fb-root"></div>
<script>
(function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js';
    document.getElementById('fb-root').appendChild(e);
}());
window.fbAsyncInit = function() {
    FB.init({
        appId: '●●●●●●●●●●●●●●●',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};
</script>
　　
　　

5.facebook内でアプリを作成する

個人アカウントでログインし、個人のアカウント設定画面等の下部に ”開発” というリンクがあるので、これをクリックします。

開発をクリック

下記の画面が出たら、右上の ”アプリ” をクリックします。

アプリをクリック

下記の画面が出たら、”新しいアプリを作成” をクリックします。

新しいアプリを作成をクリック

下記の画面が出たら、”App Name” に自分が分かりやすい名前を付けておきましょう。ここの名前は、自分が識別さえできればいいのですが、facebookページ名と全く同じ名前にだけはしないで下さい。あとで困ります。一文字でも違えば問題ないです。そして、地域は ”日本語” を選択します。

アプリの名前を入力

次にセキュリティチェック画面で表示されているテキストを入力します！

セキュリティチェック

すると、下記のようにアプリの基本設定画面が表示されます。 まず、上部に表示されている ”App ID” をメモっておきましょう。 そして、真ん中よりやや下部に ”アプリをfacebookに結合する方法を選択” 欄の ”facebook上のアプリ” と ”ページタブ” をクリックします！

アプリ設定画面

まず、”facebook上のアプリ” の ”キャンバスURL” に、サブページをアップロードしているアドレスを入力します。その下の ”セキュリティで保護されたキャンバスURL” は、httpsで始まるセキュアなアドレスを入力します！

アプリ設定

次に ”ページタブ” のページタブ名には、facebookのタイムライン上のタブに表示させたい名前を入力します！
”Page Tab URL” には、先ほどの ”キャンバスURL” のアドレスをコピーし、”Secure Page Tab URL” には ”セキュリティで保護されたキャンバスURL” のアドレスをコピーします。
そして、ページタブの画像の右の ”Change” をクリックしてページタブに表示させたい画像を登録します。これはあとからでも登録可能です。そして、最後に ”Page Tab Width” で810pxを選択し、”変更を保存” をクリックします。

すると、下記のような画面が出て、アプリの作成は終了です！

完了メッセージを表示

6.作成したアプリをfacebookページに追加する

先ほど作成したアプリは作成しただけではfacebookページのタブには表示されません。ですので、ここでfacebookページのタブに追加する作業をしていきます。

下記のアドレスの●●●●●部分に、先ほどメモしたアプリのIDを置き換えて、ブラウザのアドレスバーにコピーし、開いて下さい。

http://www.facebook.com/add.php?api_key=●●●●●&pages=1


すると、下記の画面が表示されます！アプリケーションの追加先で、追加するfacebookページ名を選択し、下記の ”○○追加する” をクリックします。この時の注意点として、アプリケーションの追加先には先ほど作成したアプリ名なども表示されますが、ここで選択するのはfacebookページ名です。混同しないように気を付けて下さい。

アプリの追加

ここまで終わったら、facebookのタイムラインを開いてみましょう。ここにアプリが追加されていればめでたくOK！ 複数のサブページを作成した場合、そのページ分のアプリを作成する必要がありますので、ここまでの手順を繰り返して下さい。

facebookページへの追加完了

7.ページタブの画像を追加する

7-1.作成したアプリを編集する！

さて、ページタブの画像をさせるには、先ほどアプリを作成した ”開発” の ”アプリ” 画面から作成したアプリを選択し、”アプリを編集” をクリックすると設定した画面が再び表示されますので、ここから画像の登録をして下さい。

7-2.登録する画像について

facebookのタブに表示される画像は110x74pxのようですが、大きめの画像を登録すれば自動で縮小して表示されるみたいです。自分の場合は、この倍の220x148pxで作成し登録しました。

8.ページ内リンクを書き換える

8-1.ページ内リンクについて

サブページを複数作成し、ページ内リンクを相対アドレスで指定している場合、ここで表示上の問題がおきてしまいます。

アンカーリンクにtarget=”_top”を記入するのはすでに触れました。よって、リンクをクリックした際にインラインフレームが解除されます。すると、サーバー上のwebサイトがそのまま表されてしまいます。

この現象を回避する為に、相対アドレスをアプリが表示されるアドレスに書きかえる必要があります。以下の例を参考にご自身のページのページ内リンクを修正して下さい。

8-2.例）全部で以下の３ページのページを作成した際のリンクの例

1.”ようこそ！” ページ・・・”アプリID” が ”123456789012001” で ”ページ名” は ”wellcome”
2.”会社概要” ページ・・・”アプリID” が ”123456789012002” で ”ページ名” は ”company”
3.”サービス” ページ・・・”アプリID” が ”123456789012003” で ”ページ名” は ”service”

このfacebookページの独自アドレスは、https://www.facebook.com/○○○○○○.netとします。

例）

　<a href="../wellcome/" target="_top">ようこそ</a>
　　　　　　　　　　↓
　<a href="https://www.facebook.com/○○○○○○.net/app_123456789012001" target="_top">　　

　<a href="../company/" target="_top">会社概要</a>
　　　　　　　　　　↓
　<a href="https://www.facebook.com/○○○○○○.net/app_123456789012002" target="_top">　　

　<a href="../service/" target="_top">サービス</a>
　　　　　　　　　　↓
　<a href="https://www.facebook.com/○○○○○○.net/app_123456789012003" target="_top">　　

　このようにリンクをfacebookアプリへの絶対URLに置き換えます。
　　
　　

8-3.以上の修正が終わったら全て完了です。

不具合等あれば、コメント頂ければ幸いです！