脳内プラグイン

プログラム関連のメモ書きというか落書きというか

Facebookページにアプリのページ（ページタブアプリ）を追加する手順

Facebook

チャオムジカ〜！

最近FM802ののむらまさおさんがたまらなく好きです。

Facebookページにオリジナルのコンテンツページを追加する手順を

まとめておこうとおもい、腕立て伏せをしながら記事を書いています。



■方法

ページ制作にはおおまかに2つの制作方法があります。

１、ページ制作アプリを使わせてもらって作成

参考アプリ：Static HTML、WelcomeHTML 等

２、ページ自体をアプリでつくる方法



今回は「２」の方法で、腹筋（アブなんとか）をしながらページを作成します。


■手順

１、サーバの用意

アップロードするサーバを用意。SSLアクセスできるようにしておく。

２、アップロード

表示するコンテンツをPHPファイルとしてアップロードし、おまじないを書いておく

（表示される際に高さを調節するスクリプト）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>ページタイトル</title>
</head>
<body>

<!-- コンテンツ -->

<!-- ▼おまじない -->
<div id="fb-root"></div>
<script type="text/javascript">
<!--
(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: 'App_ID',
        status: true,
        cookie: true
    });
    FB.Canvas.setAutoGrow();
};//-->
</script>
<!-- ▲おまじない -->
</body>
</html>

３、アプリ管理者ページへ移動し、「新しいアプリを作成」をクリック

４、項目の入力１

「App Name」アプリの名前と「App Namespace」名前空間（識別子みたいなもん）を入力。アプリの設定名なので分かりやすいような名前を入力

５、項目の入力２

Display Name：アプリの表示名
Namespace：アプリの名前空間
連絡先メールアドレス:メールアドレス
App Domains:ページを設置したサーバのドメイン
Sandbox Mode:有効：テスト状態、無効：公開

アプリをFacebookに結合する方法を選択

ページタブにチェックを入れる
ページタブ名：Facebook上で出てくるアプリ名
Page Tab URL：ページ設置URL
Secure Page Tab URL：SSLのページ設置URL
ページタブの画像：横幅111px × 縦74px 5MB にしないとアップロードでエラーになることがある。

以上の入力をして変更を保存。

６、ページタブアプリをFacebookページにひもづける

http://www.facebook.com/dialog/pagetab?app_id=「App_ID」&next=「URL」

こちらのURLにアクセスして、「App_ID」にはアプリのID、「URL」にはPage Tab URLで設定したURLを入力してアクセスすると、管理しているFacebookページをプルダウンで選択できるようになりますので、アプリを表示させたいページを選択します。
参考：ページタブアプリ(iframe)の作成とFacebookページへの追加方法


以上で完了です。


■公開

上でも書いていますが、アプリの設定画面で、Sandbox Modeというのを無効にすると公開されます。


さぁ、スクワットをしながらページタブアプリをつくるか！！