【備忘録】Facebookページにタブページを追加するための4ステップ

【備忘録】Facebookページにタブページを追加する方法 久しぶりにFacebookページにたぶページを追加したら、いろいろ忘れていたり、微妙に変わっていたりしたので、メモがてらエントリー化。
ちなみにタブメニューはあまり見られないという話。

#1 アプリを作る とりあえずアプリを作りにデベロッパーページに向かいます。
Facebook開発者
右上にある「新しいアプリを作成」をクリック
【備忘録】Facebookページにタブページを追加する方法
App Name、App Namespaceに任意の文字列を記入します。
※タブページだけであれば特に影響ないので、適当でOKです。

#2 ページを作る タブページに表示したいコンテンツを作成します。
Facebook内ではiframeで表示されるので特に制限はありませんが下記には注意が必要です。

■SSL領域に設置
■横幅は810pxあるいは520pxで作成

また、コンテンツ量が多い時にスクロールバーが出ないように下記のようにJavaScriptを入れる必要があります。
<script type="text/javascript" src="//connect.facebook.net/ja_JP/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.Canvas.setAutoGrow();
window.onload = function(){
FB.init({
appId: 'アプリID', //次の#4で確認できます
status: true,
cookie: true,
xfbml: true
});
FB.Canvas.setAutoGrow();
}
</script>

なお、このままだと縦のスクロールバーが出てくるのでCSSで下記を記述します。
<style type="text/css">
html,body{overflow:hidden;}
</style>

#3 ページをアプリに適用 アプリの基本設定に「アプリをFacebookに結合する方法を選択」というのがあります。
基本設定ページ:https://developers.facebook.com/apps/アプリID/summary
【備忘録】Facebookページにタブページを追加する方法
ここのページタブをクリックし、順に以下の項目を入力していきます。

ページタブ名:Facebookページのタブメニュー画像の下に表示されるテキストです。上限は9文字
■Page Tab URL:#2で作成したページのURLを入力します。
■Secure Page Tab URL:Page Tab URLのhttpsから始まるものを入れます。
■ページタブの画像:Facebookページのタブメニュー画像です。111x74 pix
■Page Tab Width:#2で作成したページの幅を選択します。
※Page Tab URL、Secure Page Tab URLはhttpsからのを両方入れても問題ないようです。
最後に基本データの「App Domains」に#2で作成したURLのドメインを入力します。
例:skuare.net

#4 アプリをFacebookページに表示 最後にアプリをFacebookページのタブページとして適用させます。
まず、基本設定にある【App ID】をコピー
【備忘録】Facebookページにタブページを追加する方法
そして下記にアクセスします。
http://www.facebook.com/dialog/pagetab?app_id=アプリID&next=YOUR_URL

YOUR_URLには#2で作成したURLを入れると下記のようなものが出てきますので表示させたいFacebookページを選択し追加すれば完成です。 【備忘録】Facebookページにタブページを追加する方法

sponsors

「【備忘録】Facebookページにタブページを追加するための4ステップ」をシェアする

記事作成:
記事URL:

TOP > > > 【備忘録】Facebookページにタブページを追加するための4ステップ