フェイスブックページの追加ページをDropboxで運用する方法 | Technolog.jp - ICTウェブマガジン

フェイスブックページの追加ページをDropboxで運用する方法

フェイスブックページの追加ページを作成するには幾つかの方法がありますが、iFrameが主流となる今、有償サービスを利用するか、ホスティングを用意する必要があります。後者の方法を採る場合、Dropboxを使用すれば無料かつ自動でバックアップが行え、ファイル転送の手間も省けます。

以下では既にフェイスブックページをお持ちで追加ページを作成される方を対象にしています。フェイスブックページを作成されていない方はこちらのページをご参照下さい。

STEP0 概要

概要

iFrameにより追加ページを作成する場合、はじめにHTMLやCSSを用いて当該ページを作成します。作成したファイルをサーバにアップロードしますが、今回はこの部分がDropboxになります。次にFacebook上でアプリ(追加ページ)を作成し、これを対象のフェイスブックページに割り当てます。

STEP1 Dropboxの準備

すでにDropboxアカウントをお持ちの方は不要ですが、ご利用のない方はアカウントの登録を行い、PCにDropboxをインストールします。

STEP2 作業フォルダの確認

インストールが完了すると「」という名称のフォルダが作成されますので、その中にある「Public」がワークスペースになります。もし、Publicを削除された方は、同名のフォルダを再作成してください。同フォルダが外部公開には必要です。

STEP3 追加ページの作成

通常のウェブサイトを作成するようにHTMLやCSSを用いて幅520px以内のページを作成してください。尚、DropboxではPHPのようなサーバサイドスクリプトは使用できません。

STEP4 URLの取得

ページを作成したら対象ファイルのURLを取得します。下図のようにファイルを右クリックし、[Dropbox] – [パブリックリンクのコピー] をしてください。同URLをブラウザで表示できればOKです。

URLの取得

STEP5 アプリの作成

Developersのアプリページを開き、「新しいアプリケーションを作成」を押下します。

新しいアプリケーションを作成

次にアプリ名と別名(アルファベット)を付与します。これらは既存のアプリと重複しないようにしてください。

アプリ名の付与

次に表示された文字を下のボックスに入力し、「送信」します。

CATPCHA

続いて表示される基本設定では、アプリにDropboxで作成したページ情報等入力していきます。

フェイスブックページ内でメニューに独自のアイコンを使用したい場合は、「アイコンを変更」をクリックし、画像ファイルをアップロードします。

アイコンを変更

基本データはほとんど自動入力されますが、「アプリのドメイン」のみ空欄なので、STEP4で取得したドメインを入力します。

基本データ

アプリをFacebookに結合する方法を選択してください」では、「ウェブサイト」「Facebook上のアプリ」「ページタブ」の3項目に入力を行います。下図の「ユーザID」はご自身のDropboxユーザID(STEP4で取得したURLにある連番数字)を代入してください。ここではindex.htmlを指定していますが、こちらはSTEP3で作成したファイル名に合わせ変更します。

アプリをFacebookに結合する方法を選択してください

入力が完了し、「変更を保存」したらアプリの完成です。

フェイスブックページへの追加

最後に作成したアプリ(ページ)をフェイスブックページに追加する必要があります。アプリページに再度アクセスし、「App ID/API Key」と「キャンバスページ」の値をコピーしてください。

アプリページ

その上で以下のURLにアクセスします。この時「アプリID」には「App ID/API Key」を、「キャンバスページ」には「キャンバスページ」を代入して下さい。

[html]https://www.facebook.com/dialog/pagetab?app_id=アプリID&display=popup&next=キャンバスページ[/html]

追加先となるフェイスブックページを選択し「ページタブを追加」を押下すれば完了です。

ページタブを追加