iframeアプリを作るためのデベロッパーページの仕様が変更されたようなので、最新版を解説。
Facebookページの作り方。 その3
でも書いたが、Facebookページを簡単に作成する方法として、FacebookアプリのiFrameを利用した方法が一般的である。
この方法を使うには、Facebookとは別にコンテンツを設置するためのサーバーが必要となるが、その分できることの自由度も増す。
以前FacebookiFrameアプリの作り方を紹介したが、いつの間にか仕様が変更されているようなので改めて解説しよう。
手順1.サーバーの準備
Facebookアプリで表示するコンテンツを、自分で用意したサーバー上に用意する。
今回は当ページで配布している「Facebook様wordpressテーマ」を利用したワードプレスをFacebookページ上に表示できるよう設定してゆく。
手順2.Facebookのデベロッパーページにて開発者登録を行う。
【開発者登録ページ】
https://www.facebook.com/developers/
上のURLにaccessして開発者ページにログイン後、右上の「create New App」ボタンをクリック。
「NEW APP」のダイアログボックスが表示されるので
App name に任意のアプリの名前
local に「日本語」を選択
利用規約を読んだ上でチェックボックスにチェックを入れて「続行」ボタンをクリック
セキュリティー認証のダイアログボックスが表示されるので、表示されている文字を入力して「送信」ボタンをクリック
上の画面が表示されるのを確認してください。
「Select how your app integrates with Facebook」のなかの
「App on Facebook」と「Page Tab」に必要な項目を入力します
※「Website」「Mobile and Devices」は今回は使いません。
開いてしまった場合は右上の「×」マークで削除してください。
■「App on Facebook」の入力
Canvas URL: には自分のサーバーのWPをインストールしたURLを入力
Secure Canvas URL: SSL対応ページがある場合はSSL対応ページのURLをココに入力
入力例)
Canvas URL: http://ftown.pupu.jp/wp/
Secure Canvas URL: https://pupu-ftown.ssl-lolipop.jp/wp/
今回はロリポップの共有SSLを使ってSSLページを用意しています。SSLページがない場合は空白でOK
■「Page Tab」の入力
Page Tab Name:Facebookページの左メニューに表示されるタブ名を入力(任意の名前
Page Tab URL: タブがクリックされた場合iFrame内に表示されるページのURLを入力
Secure Page Tab URL:タブがクリックされた場合iFrame内に表示されるページのURLを入力(SSLページがある場合のみ)
Page Tab Edit URL:空白
設定例)
Page Tab URL:http://ftown.pupu.jp/wp/index.php
Secure Page Tab URL:https://pupu-ftown.ssl-lolipop.jp/wp/index.php
Page Tab Edit URL:空白
上記を入力後「保存」ボタンをクリックして設定を保存してください。
手順4.設定したアプリをFacebookページに関連つける
1.下記左メニューの「View App Profile Page」をクリックして設定したアプリを表示
2.画像赤枠の「自分のFacebookページのお気に入りに追加」をクリックして自分のFacebookページを表示して追加ボタンをクリック
残りは「Facebookページの作り方。 その3」を参照
これでFacebookページのいっちょあがりです