1. 1.Facebookの登録
2. 2.Facebookページの作成
3. 3.Facebookアプリの作成
3.1. オリジナルアプリ作成手順
3.1.1. 「新しいアプリケーションを作成」をクリック
3.1.2. アプリ名を入力
3.1.3. アプリの名前空間を入力
3.1.4. 登録認証
3.1.5. 基本設定画面を編集
3.1.6. 詳細設定を編集
3.2. アプリの設定
3.2.1. 設定
3.2.1.1. 概要
3.2.1.1.1. AppID/API Key
3.2.1.1.2. アプリの秘訣
3.2.1.1.3. サイトURL
3.2.1.1.4. サイトドメイン
3.2.1.1.5. キャンバスページ
3.2.1.1.6. キャンバスページURL
3.2.1.1.7. Canvas FBML/iframe
3.2.1.1.8. 連絡先メールアドレス
3.2.1.1.9. サポートメールアドレス
3.2.1.2. 設定を編集
3.2.1.2.1. 基本設定
3.2.1.2.2. 詳細設定
3.2.1.3. Open Graph
3.2.1.4. 役割
3.2.1.5. Facebookポイント
3.2.1.6. Insights
3.2.2. オープングラフ
3.2.3. 役割
3.2.4. インサイト
4. 4.Facebook用のページ(php)の作成
4.1. 表示の仕組み
4.1.1. Facebookページに登録したアプリにiframeで表示させる
4.2. 用意するファイル
4.2.1. facebook.php
4.2.1.1. 名前は何でもいいがphp形式で
4.2.1.2. テンプレート
4.2.1.2.1. <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/fb.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> </head> <body> <div id="fb-root"></div> <div id="container"> <ul id="tabs"> <li><a href="#tabs-1"></a></li> <li><a href="#tabs-2"></a></li> <li><a href="#tabs-3"></a></li> <li><a href="#tabs-4"></a></li> </ul> <div id="tab_panel"> <div class="panel" id="tabs-1"></div> <div class="panel" id="tabs-2"></div> <div class="panel" id="tabs-3"></div> <div class="panel" id="tabs-4"></div> </div> </div> <script type="text/javascript" src="js/fb.js"></script> </body> </html>
4.2.2. fb.js
4.2.2.1. 名前は自由
4.2.2.2. iframeの高さ制限800pxの解除
4.2.2.3. タブパネル
4.2.2.4. テンプレート
4.2.2.4.1. // JavaScript SDK (function(){ var e = document.createElement('script'); e.async = true; e.src = document.location.protocol + '//connect.facebook.net/ja_JP/all.js'; document.getElementById('fb-root').appendChild(e); }()); // iframeの高さをコンテンツに合わせる window.fbAsyncInit = function(){ var height = 0; setInterval(function(){ var size = FB.Canvas._computeContentSize(); if(size.height > height + 1){ FB.Canvas.setSize({ height : size.height + 1 }); height = size.height + 1; } }, 200); } $(function(){ // タブパネルの指定 $('#tabs li:first a').addClass('selected'); $('#tab_panel .panel:not(:first)').hide(); $('#tabs a').click(function(){ if(!$(this).hasClass('selected')){ $('#tabs a.selected').removeClass('selected'); $(this).addClass('selected'); $('#tab_panel .panel').hide().filter($(this).attr('href')).show(); } return false; }); });
4.2.3. fb.css
4.2.3.1. 名前は自由
4.2.3.2. レイアウトの指定
4.3. 設定
4.3.1. サーバーにファイルをアップロード
4.3.2. Facebookアプリに設定している「Page Tab URL」と「facebook.php」のパスを合わせる
4.3.3. 「さくらインターネット」+「Movable Type」の場合
4.3.3.1. Internet Sever error 500」が出た時の対処
4.3.3.1.1. phpファイルのパーミッションが755や705でないとエラーになる
4.3.3.1.2. MTからphpを出力したときのパーミッションを指定する
4.3.3.1.3. mt-config.cgiに追記
5. 5.FacebookアプリとFacebook用ページ(php)を結合
5.1. 新しいノート
6. 6.FacebookページのタブにFacebookアプリを表示
6.1. サイドメニューからアプリのプロフィールページを表示
6.2. アプリ設定画面からからマイページへ追加
6.2.1. Facebookページを選択
6.3. 追加したFacebookページを表示
6.3.1. サイドメニューに追加されている
7. Facebookページにオリジナルアプリを追加する手順
7.1. 1.Facebookを登録する
7.2. 2.Facebookページを作成する
7.2.1. Facebookページとは
7.2.1.1. Facebook内に誰でも無料で開設できるコミュニティ
7.3. 3.Facebookアプリを登録する
7.3.1. Facebookアプリとは
7.3.1.1. Facebookページに追加する機能
7.4. 4.Facebookページ用のページ(php)を作る
7.4.1. Movable Typeで作成
7.4.2. Wordpressで作成
7.4.3. HTMLから必要なコンテンツを表示
7.4.4. など
7.4.5. 2011/10/1からiframeアプリはSSL義務化
7.4.5.1. SSLページでの作成が必要
7.5. 5.FacebookアプリとFacebook用のページ(php)を結合する
7.6. 6.FacebookページのタブにFacebookアプリを表示させる
7.7. 2～6を作業代行した場合
7.7.1. FacebookユーザーをFacebookページの管理者に承認すればOK
8. はじめに
8.1. Facebookの活用方法
8.1.1. マーケティング
8.1.1.1. 傾聴
8.1.1.2. 調査
8.1.1.3. 商品理解
8.1.1.4. ブランディング・認知促進
8.1.1.5. ニーズ喚起
8.1.1.6. ファン化・ファン育成
8.1.1.7. 商品開発
8.1.1.8. 囲い込み・定着化
8.1.1.9. UGC(user generated content)
8.1.1.10. 店舗誘導
8.1.1.11. 集客
8.1.2. サポート
8.1.2.1. 採用
8.1.2.2. 顧客サポート
8.1.2.3. 顧客間サポート
8.1.2.4. 社内コミュニケーション
8.2. 「いいね!」ボタンと「OGP」を設置すべし
8.2.1. 「いいね!」ボタンからの情報共有・配信・拡散
9. 参考資料
9.1. 動画
9.1.1. http://goo.gl/U18qD
9.2. 書籍
9.2.1. Facebookページプロフェッショナルガイド