> > Facebookタブ追加方法完全公開



Facebookタブ追加方法完全公開



Facebook ページは、外部のサーバにあるコンテンツを iframe で読み込めるので、これを利用して自分の Facebook ページにタブ追加することができます。その基本的な方法は、Facebook への開発者登録後、App追加による方法です。

既に多くのFacebook ページオーナーがこの方法でオリジナルなFacebook ページを作成しております。オリジナルタブを初めて追加する方にその手順と具体的な方法をご紹介します。



次の手順でオリジナルタブを追加

・最初にFacebook ページの開設
・Facebook への開発者登録(詳細はこちらを参照
・オリジナルタグのApp作成
・SDK のアップロードと PHP ファイル化
・PHPが動作するSSLサーバーへPHPファイルをアップロード
・FacebookページにApp追加と設定



Facebook への開発者登録が済んでいることを前提に詳細をご紹介します。


1.オリジナルタグのApp作成

Facebook アプリケーション作成にアクセス
https://www.facebook.com/developers/createapp.php?

クリックすると大きな画像でご覧になれます。


任意のアプリケーション名を記入し「アプリケーションを作成」をクリック。



クリックすると大きな画像でご覧になれます。

アプリケーションの説明など必要事項を記入し「変更を保存」をクリック。



左側のメニューから 「Web Site」 を選択。

クリックすると大きな画像でご覧になれます。

ここでは 「サイト URL」 「Site Domain」を記入し、「変更を保存」をクリック。



クリックすると大きな画像でご覧になれます。


<ここでの記入は重要>

「キャンパス」;任意の半角英数字
  この URL に作成したアプリケーションの Facebook ページができる。

「キャンバスページURL」:アップロードする外部サーバのURL
  下で設定する「タブのURL」と同じ。

「Secure Canvas URL」 :アップロードする外部SSLサーバのURL
  下で設定する「Secure Tab URL」 と同じ

「iFrameサイズ」 :Auto-resizeを選択く

「タブ名」 :Facebook ページに読み込む際のデフォルトのタブ名

「タブのURL」:実際に読み込むコンテンツの URL
  例) http://www.pb-support.com/facebook/index.php

「Secure Tab URL」 :実際に読み込むコンテンツの URL(SSL)
  例) https://www.pb-support.com/facebook/index.php

「編集用 URL」 :未入力


記入したら「変更を保存」をクリック。



クリックすると大きな画像でご覧になれます。

ページの一番下に、「サンプルコード」 というリンクがあるので、そこをクリックし PHP コードコピー保存。



2.SDK のアップロードと PHP ファイル化

サーバにアップするPHPファイルにPHPソースコードを入れる場合、必要になるので以下にアクセスしダウンロードする。

SDKs & Tools : Facebook開発者
https://developers.facebook.com/docs/sdks/


クリックすると大きな画像でご覧になれます。


「PHP SDK」をクリック。



クリックすると大きな画像でご覧になれます。

「Download」をクリックしダウンロード。

ダウンロードしたファイルを解凍すると 「src」 というフォルダがあるので、フォルダまるごと前述の「アプリケーションを作成」で設定したURLと同じディレクトリにアップロードする。

「タブのURL」:実際に読み込むコンテンツの URL
  例) http://www.pb-support.com/facebook/src/

「Secure Tab URL」 :実際に読み込むコンテンツの URL(SSL)
  例) https://www.pb-support.com/facebook/src/



3.PHPファイルを作成

Facebookページで追加するタブに表示するコンテンツPHPファイルを作成。
以下サンプルのようなPHPファイルを作成する。


<?php
require_once 'src/facebook.php';
$facebook = new Facebook(array(
'appId' => 'ここにアプリID',
'secret' => 'ここにアプリの秘訣',
'cookie' => true,
));
?>

<html>
<head>
<meta charset="utf-8" />
<title>ページタイトル</title>
</head>

<body overflow="hidden">

<script type="text/javascript" src="//connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : 'ここにアプリID',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setSize({ height: 10000 });
</script>


<!-- ここにHTMLタグでコンテンツ作成(横幅は500px以内) -->


</body>
</html>



body部分には、HTMLタブで書き込めばいいが、横幅は500px以内にするといい。
httpでもhttpsでも見れるように画像ファイルのリンクは、SSLサーバを指定するといい。
縦幅は長くなってもスクロールバーが出ないようになっています。

ここにアプリID」「ここにアプリの秘訣」を置き換え、bodyを作り込めば完成です。


「index.php」のような名前をつけて保存し、前述の

「タブのURL」:実際に読み込むコンテンツの URL
  例) http://www.pb-support.com/facebook/index.php

「Secure Tab URL」 :実際に読み込むコンテンツの URL(SSL)
  例) https://www.pb-support.com/facebook/index.php

のようにサーバにアップロードする。



「いいね!」ボタンを押しているファンのノーファンの表示切り替え

表示切替の方法はたくさんありますが簡単に、ページの背景画像を切り替え見た目を変える。「いいね!」押している人には、コンテンツの body 要素に 「class="liked"」 を付けて出力します。body 要素を切り替えるソースコードを以下に紹介しますので、body要素の位置に記述してください。


<?php
$signed = $facebook -> getSignedRequest();
if ($signed['page']['liked']){
echo '<body class="liked">';
} else {
echo '<body>';
}
?>





4.FacebookページにApp追加と設定

マイアプリページの右メニューにある 「Application Profile Page」 をクリックしアプリケーションのページに移動する。


クリックすると大きな画像でご覧になれます。



左サイドメニューに 「マイページへ追加」 をクリック。


クリックすると大きな画像でご覧になれます。



Facebookページで設定


クリックすると大きな画像でご覧になれます。



左に新しいタブが追加されているのを確認し、「基本データを編集」クリック。

クリックすると大きな画像でご覧になれます。


左のメニューで「アプリ」をクリックし、新しく追加されたアプリの「設定を編集」をクリック。
カスタムタグ名を記入し「保存」「OK」で完成。


いかがでしたでしょうか?

参考になったと思う方は、以下の「いいね!」ボタン、
「ツィート」ボタンを是非クリックを押してみてください。

どうぞよろしくお願いいたします。




このエントリーをはてなブックマークに追加



Check

トラックバック(0)

トラックバックURL: http://www.nauinet.co.jp/mt6/mt-tb.cgi/441



Check
一般社団法人ジャパンEコマースコンサルタント協会特別講師
Kindle出版のAmazon出品解説書です。
ECzine執筆記事一覧です。
Amazon出品ファイル作成代行
ブログ新着情報プログラム

ブログ記事リスト

IEが勝手に起動
消してしまった画像復元
Amazon検索で商品を表示
Amazonカテゴリー分類
Amazonで商品を見つけてもらう
iTunesアップデートのトラブル
ブログ新着情報ブログラム
Amazon編集ソフトを作成
Amazon出品ファイル作成代行
ボックス感あるデザイン
CSS作成ツール
無料のSTORES.jpに出店
源泉徴収税が免税になった!
はじめてのAmazon出品ガイド
サイトテーマの構造化マークアップ
パンくずリストの構造化マークアップ
Kindle書籍アメリカ免除申請
一太郎で作る電子書籍
Amazon 商品画像登録ガイドライン
Amazon 商品名登録ガイドライン
商品画像処理代行
ファイルコンテンツコピー
パソコンの熱暴走を防ぐ
ドライブボリューム容量変更ソフト
プロダクトキー確認ソフト
PPCキーワード作成ツール
日本語プログラミング「なでしこ」参考集
営業日カレンダー
適切なコストで既存客を守るには
LTV-Pro体験版(iPhone用)
FileMaker Go 12の活用
顧客ポートフォリオ・LTV解析ソフト
楽天市場ヤフーショッピング一括編集ソフト
Yahoo!夏の大リニューアール
MTの画像配置
TwitterとFacebookの相互連携
簡単!自動でYahoo!ショッピング商品掲載
Googleのホームページ作成支援
Google +1 の登録と設置方法
人の集まるところに仮想露店を出店
チェックインクーポン発行の実践
Facebookタブ追加方法完全公開
オリジナリィティのタブアイコン
個人輸入で稼げるってホント?
チェックインクーポンの作成方法
Facebookチェックインポイント登録
App登録なしでFacebookタブ追加
Amazon EC2にSSHを設定する方法