Create your own awesome maps

Even on the go

with our free apps for iPhone, iPad and Android

Get Started

Already have an account?
Log In

Facebookページ iframeアプリによるカスタマイズ by Mind Map: Facebookページ
iframeアプリによるカスタマイズ
0.0 stars - reviews range from 0 to 5

Facebookページ iframeアプリによるカスタマイズ

1.Facebookの登録

2.Facebookページの作成

3.Facebookアプリの作成

オリジナルアプリ作成手順

「新しいアプリケーションを作成」をクリック

アプリ名を入力

アプリの名前空間を入力

登録認証

基本設定画面を編集

詳細設定を編集

アプリの設定

設定, 概要, AppID/API Key, アプリの秘訣, サイトURL, サイトドメイン, キャンバスページ, キャンバスページURL, Canvas FBML/iframe, 連絡先メールアドレス, サポートメールアドレス, 設定を編集, 基本設定, 概要, アプリのアイコン, アプリ名, App ID, App Secret, 基本データ, アプリの表示名, ユーザーに表示される名前, 登録時に指定・後から編集できる, プリの名前空間, オープングラフとキャンパスページ用に使う名前空間, 連絡関メールアドレス, アプリのドメイン, カテゴリー, Choose a category, Books, Food and Drink, Games, Choose a sub-category, Action and Arcade, Board, Card, Virtual World, Word, Puzzles, Trivia, Health and Fitness, Music, News, 写真, Sports, Trabel, 動画, Other, Cloud Services, アプリをFacebookに結合する方法を選択, ウェブサイト, サイトURL, http://example.com/, Facebook上のアプリ, キャンバスURL, セキュリティで保護されたキャンバスのURL, キャンバスページ, ページタブ, Page Tab Name, 左メニューに表示される, Page Tab URL, 読み込むFacebook用ファイルのURL, Secure Page Tab URL, Page Tab Edit URL, Native iOS App, iOSバンドルID, iPhoneアプリストアID, URL Scheme Suffix, Native Android App, Android Key Hash, 詳細設定, Authentication, App Type, ウェブ, Native/Descktop, 認証拒否時のコールバック先, Sandbox Mode, 有効, 無効, Description, 移行, Remove Deprecated APIs, 有効, 無効, Stream post URL security, 有効, 無効, signed_request for Canvas, 有効, 無効, Timezone-less events, 有効, 無効, Upgrade to Requests 2.0, 有効, 無効, Require manage_notifications, 有効, 無効, 暗号化アクセストークン, 有効, 無効, Requests 2.0 Efficient, 有効, 無効, Enhanced Auth Dialog, 有効, 無効, page_hours_format, 有効, 無効, Security, Server Whitelist, Update Settings IP Whitelist, Update Notification Email, Advertising, Advertising Accounts, Canavs Settings, Canvas Width, Fixed(760px), Fluid, Canvas Height, 設定(デフォルト:800px), Fluid, Social Discovery, 有効, 無効, Bookmark URL, 連絡先情報, Privacy Policy URL, Terms of Service URL, User Support Email, User Support URL, 言語, Open Graph, 役割, Facebookポイント, Insights

オープングラフ

役割

インサイト

4.Facebook用のページ(php)の作成

表示の仕組み

Facebookページに登録したアプリにiframeで表示させる

用意するファイル

facebook.php, 名前は何でもいいがphp形式で, テンプレート, <!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>

fb.js, 名前は自由, iframeの高さ制限800pxの解除, タブパネル, テンプレート, // 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; }); });

fb.css, 名前は自由, レイアウトの指定

設定

サーバーにファイルをアップロード

Facebookアプリに設定している「Page Tab URL」と「facebook.php」のパスを合わせる

「さくらインターネット」+「Movable Type」の場合, Internet Sever error 500」が出た時の対処, phpファイルのパーミッションが755や705でないとエラーになる, MTからphpを出力したときのパーミッションを指定する, mt-config.cgiに追記, HTMLUmask 0022 DirUmask 0022 HTMLPerms 0777

5.FacebookアプリとFacebook用ページ(php)を結合

新しいノート

6.FacebookページのタブにFacebookアプリを表示

サイドメニューからアプリのプロフィールページを表示

アプリ設定画面からからマイページへ追加

Facebookページを選択

追加したFacebookページを表示

サイドメニューに追加されている

Facebookページにオリジナルアプリを追加する手順

1.Facebookを登録する

2.Facebookページを作成する

Facebookページとは, Facebook内に誰でも無料で開設できるコミュニティ

3.Facebookアプリを登録する

Facebookアプリとは, Facebookページに追加する機能

4.Facebookページ用のページ(php)を作る

Movable Typeで作成

Wordpressで作成

HTMLから必要なコンテンツを表示

など

2011/10/1からiframeアプリはSSL義務化, SSLページでの作成が必要

5.FacebookアプリとFacebook用のページ(php)を結合する

6.FacebookページのタブにFacebookアプリを表示させる

2~6を作業代行した場合

FacebookユーザーをFacebookページの管理者に承認すればOK

はじめに

Facebookの活用方法

マーケティング, 傾聴, 調査, 商品理解, ブランディング・認知促進, ニーズ喚起, ファン化・ファン育成, 商品開発, 囲い込み・定着化, UGC(user generated content), 店舗誘導, 集客

サポート, 採用, 顧客サポート, 顧客間サポート, 社内コミュニケーション

「いいね!」ボタンと「OGP」を設置すべし

「いいね!」ボタンからの情報共有・配信・拡散

参考資料

動画

http://goo.gl/U18qD

書籍

Facebookページプロフェッショナルガイド

ブログ記事