Search

このページの情報は、2011年6月の情報なので一部古いです。iframeアプリの作り方はこちらをご覧ください。
⇒ facebookのiframeアプリでいいねの有無によって表示を分ける方法

Facebookページを開設する

2011/5/2

  1. 「Facebookページを作成」ページにアクセス

    Facebookにログインしたら、下記のURLにアクセスします。
    http://www.facebook.com/pages/create.php

    作成するページにマッチするカテゴリを選択し、展開されるフォームに表示される情報を入力後、【利用開始】ボタンをクリックします。

  2. Facebookページの設定(とりあえず、最低限設定しておくところだけ)

    利用開始画面が表示されたら「基本データを編集」リンクをクリックし、Faceookページの設定を行います。

    下記の情報を設定後、【変更を保存】ボタンをクリックすると、設定が反映されます。

    権限の管理

    • Facebookページの公開・非公開設定
      Facebookページ作成後はすでに公開されている状態になります。完成するまで非公開にしておきたい場合は公開範囲の「管理人のみ」にチェックを入れると、管理人しか閲覧できなくます。

    基本データ

    Facebookページの情報を入力します。入力項目は選択したカテゴリに応じて変わります。

    • 名前
      Facebookページのタイトルを指定します。
    • ユーザーネーム(ユニークURL)
      FacebookページのURLははじめ自動生成された長いURLになりますが、「いいね!」を押したユーザーが25人以上になるとFacebookページのURLを「www.facebook.com/pjroom」のような短くて分かりやすいURLに変更できるようになります。

    プロフィール写真

    Facebookページの左上に表示されるプロフィール画像をアップロードします。 アップロード可能な画像サイズは4MB以内、画像の最大サイズは幅180×高さ540(px)です。

  3. Facebookページを確認する

    【Facebookページ見る】ボタンをクリックしてFacebookページに行ってみましょう。 左下のウォール、基本データ、写真、リンクが「タブ」リンクになっており、コンテンツを切り替え表示することができます。

  4. ようこそページを追加する

    それではこのFacebookページに初めて訪れたユーザーが見る「ようこそ」ページを追加してみましょう。

    以前はFBML言語でコンテンツを作成していましたが廃止されたため、自サーバーにアップしたコンテンツをfacebookアプリのカスタムページタブ機能を使用してiframeで読み込ませるタイプになったため、 基本的に新規にタブを追加するには、HTMLやPHPなどで作成した「ようこそ」ページを自サーバーにアップ⇒⇒ようこそページのURLをiframeで読み込むアプリを作成⇒Facebookページのタブに追加するという流れになります。 開発者登録していない場合は、下記の手順で認証を行いましょう。

    ※自サーバーがないという方も、「Static HTML」というアプリを使用すると、いいねを押しているユーザーとそうでないユーザーに対して違うコンテンツを見せることができます。

開発者登録をする

2011/5/2

  1. 開発者ページにアクセスします。
    http://www.facebook.com/developers/

  2. アプリの許可画面が表示されたら、【許可する】ボタンをクリックします。

    この後なぜかリンク切れになっているので、再度「開発者」ページにアクセスし、【+Set Up My New App】をクリックします。

  3. 開発者登録をしていない場合は、下図のような画面が表示されますので、携帯の電話番号かクレジットカード番号でアカウント認証を行います。

    ここでは携帯電話で認証してみます。 「携帯電話」リンクをクリックします。 「携帯メールアドレスを確認」ウィンドウが表示されたら、携帯メールアドレスを入力し、【承認】ボタンをクリックします。

  4. 入力した携帯メールアドレスに届いた「Facebookアカウント確認メール」に書かれているFacebookアカウント確認用コードを入力し、【承認】ボタンをクリックします。

    以上で、開発者登録は完了です。

iframeで読み込むページをアプリとして作成する
※旧

2011/5/2

新しいレイアウト(タイムライン化)により、WELCOMEページは廃止されました。 そのため、今まで設定していたWELCOMEページは解除され、Facebookページにアクセスすると、タイムラインが表示されるようになっています。

⇒ iframeアプリ作成方法はこちらで解説しています(2012年6月)。

iframe内に読み込むページとして、まず「WELCOMEページ」を作りましょう。

※WELCOMEページをPHPで作成する場合は、こちらのページが参考になります。いいねを押しているユーザーかを判定し、いいねを押しているならファン向けページ、そうでないなら非ファン向けページを表示する方法が掲載されています。

TAM テクニカルチーム|Facebookページ「いいね!」 してる?まだ?の切り替え
Signed Request - Facebook開発者

WELCOMEページができたら、自サーバーにアップし、下記の手順でiframeでコンテンツを読み込むアプリを作成します。

  1. 「開発者」ページの【+Set Up My New App】ボタンをクリックします。
    » http://www.facebook.com/developers/

  2. アプリケーションを作成ページが表示されたら、アプリケーション名を入力し、同意するにチェックを入れ、【アプリケーションを作成】ボタンをクリックします。

  3. セキュリティチェックが表示されるので、表示されている文字を入力し【送信】ボタンをクリックします。

  4. アプリケーションページが表示されます。いよいよアプリケーションの設定です。

    「About」では、アプリケーションの基本情報を入力します。

    アプリケーション名 アプリケーションの名前。
    説明 アプリケーションの説明文。
    アイコン Facebookページのタブに表示されるアイコン画像(16x16)。
    ロゴ 認証ダイアログ、検索結果、アプリケーション画面に表示されるアイコン画像(75x75)。
    言語 アプリのネイティブ言語。
    ユーザーサポートのアドレス あなたのアプリに関するお問合せ用のメールアドレスまたはURL。
    ユーザーサポートのアドレス あなたのアプリに関するお問合せ用のメールアドレスまたはURL。
  5. 左メニューの「Web Site」をクリックします。

    あなたのWebサイトのURLを入力します。

  6. 左メニューの「Facebook Integration」をクリックします。

    iframeに読み込むページはアップしておきましょう。

    ■Canvas(表示領域の設定)
    Canvas Page

    http://apps.facebook.com/○○○/

    作成したアプリケーションのFacebook上のURL。小文字のみ。
    ※数値や記号は指定できません。

    Canvas URL

    例)http://phpjavascriptroom.com/△△△/

    iframe内に読み込むファイルをおているサーバーのURL。最後はスラ止め。

    Secure Canvas URL

    例)https://phpjavascriptroom.com/△△△/

    iframe内に読み込むファイルをおているサーバーのSSLのURL。最後はスラ止め。

    ※SSLのURLを指定しないと、タブにアクセスした際、下図のようなセキュリティに関するアラートが表示されます。【はい】ボタンをクリックすれば、Facebookページが表示されます。

    Canvas Type

    「iFrame」を選択します。

    iFrameサイズ

    iFrameに縦横スクロールバーがでないようにするには、「Auto-resize」を選択。

    ■ディスカバリ
    Social Discovery

    「有効」にすると友達が使っているアプリに表示されるので、「無効」にしておきます。

    ■Page Tabs(ページタブの設定)
    タブ名

    追加するタブの名前

    Facebookページの左メニューに表示されるタブの名前を指定します。

    Page Tab Type

    「iFrame」を選択します。

    タブのURL

    例)http://phpjavascriptroom.com/△△△/index.php

    iFrame内に読み込むページのURL。ファイル名のみ入力してもOK。Canvas URLが自動的に先頭に付きます。

  7. 以上でアプリの設定は完了です。

作成したアプリをFacebookページに追加する
※旧

2011/5/2

以下の方法は変更になりました。
作成したアプリをFacebookページのページタブに追加する方法はこちらで解説しています(2012年6月)。

作成したアプリケーション「WELCOME」をFacebookにタブとして追加してみましょう。

  1. 「Application Profile Page」をクリックし、作成したアプリケーションのプロフィールページへ移動します。

  2. 左メニューの「マイページへ追加」リンクをクリックします。

    自分が管理しているFacebookページの一覧が表示されるので、タブとして組み込みたいFacebookページを選んで「Facebookページに追加」ボタンを押す。

  3. 先ほどの「WELCOME」をFacebookページのデフォルトページに設定します。

    管理しているFacebookページにアクセスします。
    » https://www.facebook.com/pages/manage/

    Facebookページの編集画面を開き、権限の管理にある「デフォルトで表示するタブ」を「WELCOME」に変更します。

  4. 【Facebookページ見る】ボタンをクリックしてFacebookページに行くと、左サイドバーに追加したタブが表示されているのが確認できます。

    当サイトのFacebookページのWELCOMEページはこちら。
    http://www.facebook.com/pjroom

作成したアプリを編集する

2011/5/2

作成したアプリは、マイアプリから編集できます。
» https://www.facebook.com/developers/apps.php

iframeの高さを調整
JavaScript SDK使用

2011/5/2

Facebookページのiframeアプリのデフォルトサイズは、幅520px×高さ800pxです。 作成する際は幅520pxで作成する必要がありますが、高さは自由に決められます。

ただし、高さが3300pxなど、800pxを超える場合は、 開発者のアプリ設定画面にあるCanvasのiframeサイズを「Auto-resize」にしていても、 iframeに縦スクロールバーが表示されます。

この縦スクロールバーが表示されないようにするには、JavaScript SDKを使用して、iframeの高さをコンテンツの高さに合わせる必要があります。

iframeに読み込むページ内に、FacebookのJavaScript SDKを読み込み、JavaScriptでiframeの高さ(キャンバスサイズ)をコンテンツの高さに変更します。

※IEだと立てスクロールが表示される場合があるので、CSS側でコンテンツの高さを指定し、さらにoverflow:hidden;を指定しておくと安心です。

<body>
	・・・略・・・
	<div id='fb-root'></div>
	<script type='text/javascript'>
		(function() {
			var e = document.createElement('script'); e.async = true;
			e.src = 'http:'+//document.location.protocol+'//connect.facebook.net/en_US/all.js';
			document.getElementById('fb-root').appendChild(e);
		}());
		window.fbAsyncInit = function() {
			FB.init({ 
				appId : '165833306807631', // アプリID
				status : true, 
				cookie : true,
				xfbml : true,
				logging : true
			});
			FB.Canvas.setSize({ width: 520, height: 3300 });
		}
	</script>
</body>
</html>

一定のいいね!を獲得しないと利用できない機能
インサイトの利用、FacebookページのURL変更

2011/5/2

※左メニューのインサイト(アクセス解析)は「いいね!」とってくれたユーザーが30人以上になると見れるようになります。

一定のいいね!を獲得しないと利用できない機能
その他注意事項

2011/5/2

PHP & JavaScript RoomのFacebookページは、旧Facebookページ(ファンページ)の時に、「コミュニティ」カテゴリで作成したのですが、 基本データに初期タブの設定が表示されないので、おかしいなと思っていたら、、、 ファンページ時代に「コミュニティ」カテゴリでファンページで作成した場合、 今回の新Facebookページに移行しても、初期タブは表示されないようです。 どうしてもという場合はページを作り直さないといけないようです...

Facebookページにページオーナーを表示する

2011/5/2

Facebookページの左サイドバーに、ページオーナーとして管理者自身のプロフィールアイコンと名前を表示することができます。 デフォルトでは無効になっていますので、表示する場合は、[基本設定]→[掲載コンテンツ]をクリックし、【ページオーナーを追加】ボタンをクリックします。 表示したいページオーナーを選択し、【保存】をクリックすると、Facebookページにページオーナー情報が掲載されます。

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women