DropboxでSSLにも対応したfacebookのタブページを作る @AKIBE

Facebookページに新たなタブを作成するには、StaticFBML等のページ作成アプリを使うと簡単便利ですが、要件に合わなかった場合に自分で作る事も多いと思います。
その場合、コンテンツは自分のサーバーでホスティングする必要があります。

また、最近はSSL接続が必須になってきているので、ホスティングするサーバーはSSL対応である必要があります。
SSL対応のサーバを借りるのも設定するのも慣れていない人には大変ですが、実はDropboxのファイル共有を使う事で、静的ファイルのみですが条件に叶ったホスティングをすることができます。

Dropboxの登録はコチラから

DropboxでFacebookページを作成する利点と欠点

利点

2Gまで無料で使える。
共有ファイルは、http://~ からも、https://~ からもアクセス可能。
ローカルで編集すれば、自動でFacebookページも更新される。
Dropboxのバージョン管理機能でうっかりミスしても戻せて安心。
クラウドなので、災害にも強い。
静的ファイルはなんでも置けるので、Javascript で Facebook API に接続可能。

欠点

動的なサーバーサイドプログラムは使えない。

テストコンテンツの作成

まず、Dropbox上の「Public」フォルダか、新たにフォルダを作成して共有設定したフォルダに html ファイルを作成します。

~/Dropbox/Public/fb/index.html

次にhtmlを書いていきます。
Facebookのページと言ってもiFrameにWebページを表示させてるだけなので、なんでもOKですが、最低限fb-rootというidのエレメントを作っておきましょう。

<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8">
<title>fbpage</title>
</head><body>
<div id="fb-root"></div>
</body></html>

これだけだと最低限すぎるので、基本形のメモとして、以下を追加します。

コンテンツに応じてiFrameの高さをそろえる

通常iFrameは表示するコンテンツの高さが固定されてしまいますが、Facebookのスクリプトにコンテンツの高さを計算して自動調節するコマンドがあるので、これを適用します。
また、読み込むFacebookのjavascriptライブラリは本来はプロトコルを出し分けするべきですが、ここでは「https」で読み込んでいます。

<script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
    FB.Canvas.setAutoResize();
</script>

ページ遷移時にページトップに移動

コンテンツに応じてiFrameの高さをそろえた時、縦に長くなったiFrame内のコンテンツからリンクした時に、親ページのスクロールは移動しない為に一瞬迷子になることがあります。これを解決する為に、iFrame内コンテンツの最上部のアンカーにリンクする事で親ページも含めてスクロールさせることができます。いちいちリンクを書き換えるのも面倒なので、「http」から始まらないリンクに「#fb-root」を自動で付加します。

<script type="text/javascript">
(function (anchors) {
    for (var i = 0, l = anchors.length; i < l; i++) {
        var link = anchors[i].getAttribute("href")+"#fb-root";
        anchors[i].setAttribute("href",link);
    }
})(document.querySelectorAll("a:not([href^='http'])"));
</script>

これらをフッターに追加して、適当なコンテンツを入れた基本形は以下のとおりです。

<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8">
<title>fbpage</title>
</head><body>
<div id="fb-root">
<p>Hello World!!</p>
</div>
<script type="text/javascript" src="https://connect.facebook.net/ja_JP/all.js"></script>
<script type="text/javascript">
    (function (anchors) {
        for (var i = 0, l = anchors.length; i < l; i++) {
            var link = anchors[i].getAttribute("href")+"#fb-root";
            anchors[i].setAttribute("href",link);
        }
    })(document.querySelectorAll("a:not([href^='http'])"));
    FB.Canvas.setAutoResize();
</script>
</body></html>

Facebookページの登録

Facebookの開発者ページへアクセスして、新しいアプリを作成します。最低限設定すべき項目は以下のとおりです。

設定> Basic> 基本情報> App Display Nameアプリの名称を記入
設定> Basic> Page Tab> Page Tab Nameタブの初期名
設定> Basic> Page Tab> Page Tab URLDropboxの共有ファイルのURL
設定> Basic> Page Tab> Secure Page Tab URLDropboxの共有ファイルのURL(https)

Dropboxの共有ファイルのURLは、先程作成したhtmlファイルのパブリックリンクURLを入力します。
「Page Tab URL」のほうは http://〜のURL

例）　http://dl.dropbox.com/u/000000/fb/index.html

「Secure Page Tab URL」のほうは https://～のURL（上記と同じURLでプロトコルをhttpsに変えるだけ）

例）　https://dl.dropbox.com/u/000000/fb/index.html

Facebookページへのタブの追加

アプリの設定のページの左カラムの下のほうにある「アプリケーションのプロフィールページを見る」リンクから、アプリページを開きます。アプリページの左カラムの下のほうにある「マイページへ追加」リンクをクリックして自分のFacebookページへ追加します。

これで自分のFacebookページにタブが追加されます。

Dropboxの登録

下記のリンクからDropboxに登録すると、最初から 500MB 増量ボーナス付きで登録できます。
私にも少しボーナスがありますので、是非是非ご利用ください。

Dropboxの登録はコチラから

NOTES : 2011-09-22 : WEB

DropboxでSSLにも対応したfacebookのタブページを作る