簡単なFacebookページタブアプリ(iFrame)の作成方法 【ページ追加】

  • 投稿 : 2012-07-16

本記事は広告およびアフィリエイトプログラムによる収益を得ています

複数のページを追加するために

Static HTMLというアプリが便利だと思ったのですが、無料だと1ページ分しか作成できません。

そこで自前でFacebookアプリを作成して、それでページを表示しましょうということにしました。

SSLアクセスできる場所(サーバー)が必要なのですが、私はなかったためDropboxを利用することにしました。

レンタルサーバーと違ってPHPが動作しないという制限が付きますが、Javascriptペースでも多くのことができるので工夫次第で何とかなるでしょう。

SSLやPHPはどうしても必要か?

Facebookページ?にhttps接続(SSL)接続しない場合は、問題ないです。SSLのURLを設定できないと、SSL接続した端末にはページが白紙で表示されます。それでも良ければ・・・ということになりますね。

PHPがないと、イイネなどの状態取得ができないと思います。

アプリの登録の仕方

※画像はクリックすると大きくなります

開発者サイト
https://developers.facebook.com/apps

上記URLにアクセスして、新しいアプリケーションを作成】ボタンをクリックします
携帯電話に認証が必要といわれたら、認証する以外に次にすすめません。
参考:Facebookの携帯電話(モバイル)認証の仕方

■基本設定
・Display Name
・Page Tab URL: httpから始まるURL
・Secure Page Tab URL: httpsから始まるURL
・Page Tab Width ・Narrow (520px) ・Wide (810px)

どれも後から変更できます。

Dropboxでパブリックリンクの取得の仕方は以下の記事を参考にしてください
DropboxにJavascriptファイルを置く方法

httpでパブリックリンクが取得できますが、SSLのURLには、httpsと書き換えてそれ以下は同じです。
あと、拡張子は「.html」にしてください。

■詳細設定
・Sandbox Mode:無効
有効にすると非公開アプリになるようです。
有効にすると自分自身しか見えないので、ほかの人がログインした状態でページタブは一切見えません。

ページタブの追加の仕方

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

YOUR_APP_ID:アプリの設定画面に表示されている値を設定
YOUR_URL:上記の設定画面でSSL接続用に設定したURLを指定

上記のように置き換えて、そのURLにアクセスするとタブページが追加されます。

参考:ページタブアプリ(iframe)の作成とFacebookページへの追加方法|Webpark

ページの中身

<!DOCTYPE html><html lang="ja">
<head><meta charset="UTF-8" />
<title>fbpage</title>
</head>
<body>
※ここに中身
<div id="fb-root"></div>
</body></html>
設定したURL先のファイルを編集して作成します。
こんな感じになります。
Javascriptやブログパーツ類は動作するみたいです。



Dropboxについて

■紹介先を探しているのなら
http://db.tt/rhLIXGg
こちらから申し込むと、私とあなたの両方に500 MB のボーナス容量 が追加されるようです。
もしよろしければご利用ください。

■写真をアップロードするだけで3GB追加
現状のDropboxクライアントで写真をアップロードすると最大3GB追加されます。
参考:Dropboxベータテスト参加で追加3GBを獲得する方法 【無料でDropboxの容量追加】

共有SSLでもよいのなら

ロリポップ!などの格安レンタルサーバーがあります。

私もロリポップを使っているのですが、一番安いプラン(105円/月)を使っているのでついていません。263円/月以上のプランなら、標準でついてきます。

スポンサーリンク