• HOME
  • COLUMNS
  • FacebookにWelcomeページを追加する

広告やデザイン、クリエイティブの情報コラム

テクノロジー

FacebookにWelcomeページを追加する

アートアンドサイエンスのFacebookページにWelcomeページを追加したので、その作業手順をポストしてみたいと思います。これは外部サーバーに作成したページをiFrame(インラインフレーム)形式でFacebookに読み込むという、現在最もポピュラーな方法になります。
※Facebookの仕様変更によりこの手順で進められない場合がございますが、何卒ご了承ください。こちらは2011年1月20日現在の操作手順です。

STEP1|準備する
■Facebookアカウントとページ
【例】
http://www.facebook.com/artnscienceinc

■WelcomeページとそのURL
サイズが幅520px高さ800px以内のphpファイルとして作成

サーバーの共有SSL機能を使用してセキュアなディレクトリを作成

そこへ作成したphpファイルをアップロードしURLを取得
【例】
サーバーにアップしたWelcomeページURL:
http://facebook.artandscience.jp/index.php
セキュアなWelcomeページURL:
https://secure550b.sakura.ne.jp/facebook.artandscience.jp/index.php
※ファイルの拡張子(htmlかphpか)、SSLページのURLの形式は使用するレンタルサーバーにより異なります。

■メニュー用リストアイコン
左サイドメニュー横に表示されるリストアイコン作成
サイズ:16×16ピクセル
ファイル形式:png、jpg、gifのどれか
【例】

STEP2|Welcomeページをアプリ化してFacebook内のページとして追加する
■Facebookの開発者ページにアクセスし、アプリを作成
開発者ページ:https://developers.facebook.com/apps
※このページを見るためにはログインが必要です。

右上の「新しいアプリケーションを作成」 をクリック


「App Display Name(アプリの名前=作りたいページのタイトル)」を入力
【例】ようこそ!
規約にチェックし、「続行」をクリック


認証を行う

———-アプリ作成が完了し、アプリの基本設定画面が表示される———-

■アプリアイコン画像を設定
「アイコンを変更」をクリック


STEP1でで作成したリストアイコン用の画像ファイルを選択しアップロード

■「アプリをFacebookに統合する方法」を設定
「Facebook上のアプリ」をクリックし各項目を設定
・「キャンパスURL」:
STEP1で取得したWelcomeページのURLからページのファイル名(index.php)を削除したもの
【例】http://facebook.artandscience.jp/
・「セキュリティで保護されたキャンパスのURL」:
STEP1で取得したWelcomeページのセキュアなURLからページのファイル名(index.php)を削除したもの
【例】https://secure550b.sakura.ne.jp/facebook.artandscience.jp/

「ページタブ」をクリックし各項目を入力
・「ページタブ名」:左サイドメニューに表示される名前
・「Page Tab URL」:STEP1で取得したWelcomeページのURL
【例】http://facebook.artandscience.jp/index.php
・「Secure Page Tab URL」:STEP1で取得したWelcomeページのセキュアなURL
【例】https://secure550b.sakura.ne.jp/facebook.artandscience.jp/index.php

「変更を保存」をクリック

———-設定完了———-

STEP3|WelcomeページへのリンクをFacebookの左サイドメニューに追加
基本設定ページのアプリタイトルのすぐ下にある「App ID」コピー(メモ)し、
下記 URL の●●部分ペーストして出来たURLにアクセス
http://www.facebook.com/add.php?api_key=●●&pages=1

アプリケーションの追加先ページをプルダウンメニューから選択


「(アプリ名)を追加する」 ボタンをクリック


追加完了し自動的にFacebookページに移動するので、追加を確認
下記のように左サイドのメニューの一番最後に「ようこそ!」が追加されている

完成したwelcomeページ例:http://www.facebook.com/artnscienceinc?sk=app_211750818918328

STEP4|Facebook ページへ訪れた人にWelcomeページを最初に表示させる
Facebook ページ内の「基本データを編集」をクリック


左サイドメニュー「権限の管理」をクリック

「デフォルトで表示するタブ」でプルダウンメニューから作成したアプリを選択

「保存」をクリック


ログインしていない人にしか表示されないため、
ログアウトするか別のブラウザでFacebookページを確認する

これで完了です。