iFrame版 Facebookページ作成方法(最新版 仕様変更対応)

iframeアプリを作るためのデベロッパーページの仕様が変更されたようなので、最新版を解説。

Facebookページの作り方。 その3
でも書いたが、Facebookページを簡単に作成する方法として、FacebookアプリのiFrameを利用した方法が一般的である。

この方法を使うには、Facebookとは別にコンテンツを設置するためのサーバーが必要となるが、その分できることの自由度も増す。

以前FacebookiFrameアプリの作り方を紹介したが、いつの間にか仕様が変更されているようなので改めて解説しよう。

手順1.サーバーの準備
Facebookアプリで表示するコンテンツを、自分で用意したサーバー上に用意する。
今回は当ページで配布している「Facebook様wordpressテーマ」を利用したワードプレスをFacebookページ上に表示できるよう設定してゆく。

手順2.Facebookのデベロッパーページにて開発者登録を行う。

【開発者登録ページ】
https://www.facebook.com/developers/

手順3.アプリの登録

上の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ページのいっちょあがりです

匿名 にコメントする コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です