Facebookページの作り方pagetabページタブ制作方法 | WooXs

Facebookページの作り方pagetabページタブ制作方法

  • 2012年2月18日
  • Web
  • はてなブックマークに追加

Facebookページは、2年ほど前に一度作ったきりだったのですがこの度制作することになり、以前と仕様が変更になっていましたので、Facebookページの作成と新規にできたpagetab(ページタブ)の作り方をご紹介します。


まずはFacebookページを作成します。

Facebookページを作る

まずはご自分のアカウントでログインしフッターメーニューからページを作成をクリックすると上の画面が表示されますので、作成したいカテゴリを選択して、ページ名を入力しfacebookページ規約に同意します。にチェックを入れスタートボタンをクリックしてください。これだけの作業で、Facebookページが作成できます。

Facebookページの作り方とpagetab(ページタブ)のカスタマイズ。

ページの一番下に開発リンクがありますのでそれをクリックすると上の画面が表示されますので、一番上のメニューからアプリをクリックします。

そうすると右上に+新しいアプリケーションを作成すると言うボタンがありますのでそれをクリックすると下記のようなホップアップウィンドウが表示されます。

Facebookアプリ登録

Create New Appウィンドウが立ち上がるので、App Display Nameを入力しますがこの名前は、Facebookアプリを管理するアプリ名になります。

App Namespaceは、任意なので今回はカラで、I agree to the Facebook Platform Policies.にチェックを入れたら続行をクリックします。

セキュリティチェックが必要ですと言うウィンドウが表示されますので、画面に表示させていている文字を入力し送信をクリックします。

Facebookアプリのpagetab(ページタブ)の設定

Facebookアプリ基本設定画面

Facebookアプリの基本設定画面が表示されます。ここで設定する項目は、一番上のブロックにあるアイコンを変更とページタブのページタブ名とPage Tab URL、Secure Page Tab URLの4箇所になります。

まずはアイコンの変更なのですが、アップロードするサイズは、上限75×75ですがページタブに表示されるアイコンは、16×16になりますのでリサイズされることを考慮した画像をアップロードすることをおすすめします。

ページタブ名は、Facebookページに表示されるタブ名になります。

Page Tab URLとSecure Page Tab URLは、httpsでアクセスできるサーバーアドレスになります。今までは、httpでも大丈夫だったのですが仕様変更になったようで、現在はsslのセキュリティでのアクセスが基本になっているためhttpsの許可させたサーバー上に表示させるファイルを設置する必要があります。

  1. App IDは、アイコンを変更した一番上のボックスに書いてあるApp IDに変更してください。
  2. Page Tab URLは、httpsからはじまる登録したサーバーアドレスに変更してください。
  3. 2Secure Page Tab URLは、httpsからはじまる登録したサーバーアドレスに変更してください。

登録後ブラウザーのアドレスバーに下記のURLを入力してアクセスしてください。下記のようなウィンドウが表示されと思います。

https://www.facebook.com/dialog/pagetab?app_id=App ID&next=登録したSecure Page Tab URL

pagetab追加

先程作成したページを表示させたいFacebookページを選択して、ページタブを追加をクリックしたら完成です。

WooXs Facebook page

赤枠の部分にページタブが追加されます。

Facebookページに表示されるサイズについて、520px X 800pxが基本となっています縦が800pxを超える場合は、スクロールバーが表示されます。

縦のスクロールバーを非表示にしたい場合は、Javascriptなどを記述する必要があります。

次回は、いいね!で表示ページを切り分ける方法やjavascript設定などfacebook内のページ制作について書きたいと思います。

  • はてなブックマークに追加