KH-WEBLOG TOP > WEBメモ > その他 > Facebookでオリジナルページを制作

Facebookでオリジナルページを制作

今回Facebookでウェルカムページ等の
オリジナルページを制作する依頼があったので
やり方をメモ

コーディング・WordPress化作業を代行します

Facebookアプリケーションを作る

フェイスブックでオリジナルページを作るには
Facebookの「アプリケーション」としてページを制作しないといけないらしいので
そのやり方を紹介します。
私自身まだあまり理解していないので参考程度に・・・

  1. まず、FacebookのDeveloperページへ行き
    右上の「新しいアプリケーションを作成」ボタンをクリック
  2. クリックしたらポップアップで入力項目が出てくるので、「App Display Name:」
    に作成するアプリケーション(ページ)の名前を入力し、下のチェックボックスにチェックを付け「続行」をクリック。
    「App Namespace:」って項目はよく分からないのですが空白でOK。
    ※はじめてアプリケーションを作成する場合は、携帯アドレスかクレジット番号での認証が必要になります
  3. セキュリティチェック画面が出るので指示に従って「送信」をクリック

これでアプリケーションの登録はとりあえず完了です。

Facebookアプリケーションの設定

次に、作ったアプリケーションの設定をしていきます。
いろいろ項目がありよく分からない項目もいっぱいありますが、

ページタブ」をクリックすると

のように入力項目が出てくるので、
赤線で囲っている部分だけ入力し、「変更を保存」でとりあえずOK。

ここで重要なのがページに表示するHTMLをアップしたURLと赤文字で書いてある部分で、
このURLが何かというと、
Facebookのアプリケーションでは、作ったアプリケーションの中身を、
自分でHTMLなどで作ってサーバーにアップし、
そのサーバーへHTMLやPHPを読みにいき、iframeとしてFacebook内で表示させるので、
そのアップしたファイルのURLを記述します。
※表示するHTMLのサイズは横520px、縦800pxまでで作成しないとスクロールバーが表示されてしまうので注意。

ちなみにもしアイコンを付けたければ「アイコンを変更」から画像をアップロード。
これはFacebookページの左メニューに貼りつけたときに表示されるアイコンです。
※サイズは横16px、縦16px

Facebookアプリケーションを表示するページに追加

上記までのアプリケーションの設定が終わったら
次に実際に表示するページに作成したアプリケーションを追加します。

  1. まず、左メニューの

    「アプリのプロフィールページを見る」からアプリのプロフィールページへ行きます。
  2. アプリのプロフィールページの左メニューの

    「マイページへ追加」をクリック
  3. ページの一覧が出ると思うので、アプリケーションを追加したいページの右側にあるボタンをクリックし選択
  4. これで作成したアプリケーションがページに追加されたので、
    最後に、追加したページの

    「Facebookページを編集」をクリックしたページの
    左メニューの「アプリ」をクリックすると、
    登録しているアプリ一覧が表示され、
    下の方に今回追加したアプリケーションがあるはずなので、
    「設定を編集」から「追加」をクリックでOK。

    以上で終了です。

    ウェルカムページの作成

    上記のアプリケーションをウェルカムページとして使用する場合は、

    「Facebookページを編集」をクリックしたページの
    左メニューの「権限の管理」をクリックし

    デフォルトで表示するタブ:」にウェルカムページで使用したいアプリを選択すればOK。

    ※ウェルカムページの設定はFacebookページの管理者には反映されず、管理者のアカウントでFacebookページに訪れても、一番最初に表示されるのはFacebookページではなくウォールなどが表示されるので確認の際は注意してください。

    参考サイト

    Facebook Lab

    コーディング・WordPress化作業を代行します

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事