ウェブ、ショウジン

iFrameを使ったFacebookアプリ(Facebookページ)の追加

2011-4-5
Category
Facebook

2012年1月26日追記
自分でやってみて、この記事を書いたときからずいぶんと仕様が変わったようです。この記事よりも以下の外部リンクの記事のほうがきっと参考になると思います。

Facebookページの作り方 2012年1月版
Facebookアプリページが削除、タブの導入方法が変更へ

2012年1月26日追記ここまで(・∀・)

iFrameを使ってFacebookアプリ(タブ、ページ、このへんの単語でよく混乱してたけどやっと慣れてきた)を作成し、これを自分で作成済みのFacebookページに追加、左カラムのタブ群に表示する覚書。

外部サーバのWeb領域に表示する内容(htmlやphpファイル、画像、cssファイル等)を用意して、とりあえずプログラムとかではなくて静的な内容を表示させてみた。

*Facebookページの作成、アプリの開発者登録の部分は割愛。その部分は以下記事等を参照のこと。
iframe対応!初めてのFacebookページの作り方

いくつか解説記事を参考にさせてもらったけど、そのどこでも触れていない部分で余計に時間を食ってしまったので、ここで自分用の記録、覚書として残しておく。(Secure Canvas URL、Secure Tab URLでhttps通信でアクセス可能なURLを指定せずにいたら、表示されたりされなくなったり、しばらくしたらまったく表示されなくなったりとか、まる二日くらい苦悩した)

1.https通信が可能な領域を外部サーバに確保

通常アクセスでのURL:http://apieceoflife.sakura.ne.jp/fbapp/
セキュアなアクセスでのURL:https://apieceoflife.sakura.ne.jp/fbapp/

*利用しているさくらインターネットの共有SSLを使った。(割り当てている独自ドメインでは共有SSLは使えないので、httpsでの接続ではさくらに契約時に与えられたURLとなる)

このディレクトリにhtmlやphpで作成したファイル、画像データやcssファイルを格納する。

2.開発者ページにアクセス

http://www.facebook.com/developers/

ページ右上の「+ Set Up New App」をクリック。

01

3.アプリケーションを作成

必須情報の「アプリケーション名」を入力して規約に同意をチェックして
「アプリケーションを作成」をクリック。(アプリケーション名は日本語でもOK、分かりやすいものを)

02

セキュリティチェックの指示に従って文字列を入力し、送信して次へ進む。

これでアプリケーション自体は作成完了。
つづいて、アプリケーションを編集する。

4.アプリケーションの編集

03

「About」で、アプリケーションの説明を入力、言語をデフォルトのEnglish(US)から
日本語に変更。(Privacy Policy URLやサービス規約のURLは今回は必要ないので空欄のまま)

つづいて

「About」の下にある「Web Site」に移動し、Site URLとSite Domainを入力。
(アプリケーションID、Application Secretはここで確認できる)

Site URL: facebookアプリを格納する予定のサイトURLを入力(今回はhttp://apieceoflife.sakura.ne.jp)
Site Domain: facebookアプリを格納する予定のサイトのドメインを入力(今回はsakura.ne.jp)

つづいて

「Facebook Integration」に移動。ここで入力するのがアプリの詳細設定となる。

ここでCanvasページの設定をする。
Canvasページとは、アプリケーションがメインで動作するページ(アプリケーション本体?)
のことを指す。Facebookページの「タブ」として表示されるものと分けることができる。
*むしろ分けたほうがいいらしい。

以下、Canvasの各設定。

◎Canvas Page: 7文字以上の好きな英数の文字列を入力。(今回はshowzineapps)
◎Canvas URL: Facebookアプリを格納する予定のURLを入力。(今回はhttp://apieceoflife.sakura.ne.jp/fbapp/)
└iFrameで表示するコンテンツの基準となるURL。
◎Secure Canvas URL: httpsで接続できるURLを入力。(今回はhttps://apieceoflife.sakura.ne.jp/fbapp/)
◎Canvas Type: IFrameをチェック。
◎iFrameサイズ: Auto-resizeをチェック。

ブックマークURLやDiscoveryの部分は今回はとくに必要ないので空欄のまま飛ばす。

つづいて

「Page Tabs」を入力。

◎タブ名:今回作成するWelcomeページをユーザ側に表示する際のページ名(あとで変更可能)
◎Page Tab Type:iFrameをチェック
◎タブのURL:Canvas URL/表示させたいファイル(今回はhttp://apieceoflife.sakura.ne.jp/fbapp/welcome.php)
◎Secure Tab URL:Secure Canvas URL/表示させたいファイル*上記URLのhttps通信版(今回はhttps://apieceoflife.sakura.ne.jp/fbapp/welcome.php)

「編集用URL」は今回関係ないので空欄のまま「変更を保存」をクリック。

以上でアプリケーションの編集は完了。

5.作成したアプリをfacebookページに追加(表示)する

2013/09/25追記
この記事を書いた時と現在では作成したアプリをFacebookページに追加する方法が変わっていました。現在はこのように管理画面から追加の操作は出来ないようで、直接URLを指定する必要がありました。具体的には

https://www.facebook.com/dialog/pagetab?app_id=APP_ID&display=popup&next=CanvasURL

この文字列の「APP_ID」を作成したアプリのIDに、「CanvasURL」を作成したアプリに設定したCanvas URL(httpのほう)に変更してブラウザでアクセス。自分が管理者権限を持つFacebookページを選択できる画面に遷移しますので、そこでアプリを追加したいFacebookページを選択して追加の操作をすればよいです。
2013/09/25追記終わり

前段階で「変更を保存」をクリックすると「マイアプリ」ページに遷移する。
ここではこれまでに自分が作成したアプリ一覧も左サブカラムに表示されている。
(いまの時点では今回作成したアプリがアクティブになっている)

*アプリID〜下はアプリの秘訣等、このアプリの重要情報が記述されている。

04

右カラムのテキストリンクから「Application Profile Page」をクリック。

遷移先のページの左カラムにあるテキストリンクから「マイページへ追加」をクリック。

05

自分が管理している(アプリを追加可能な)facebookページがリスト表示されるので
今回作成したアプリをタブ(ページ)として表示させたいfacebookページを選んで
「Facebookページに追加」をクリック。

06

以上で、アプリの追加先として選んだFacebookページへのアプリの追加が完了。

これで、追加したFacebookページにアクセスすると
左のタブ群の中に追加したアプリが確認できる。

07

がしかし!

このままだとiFrameで読み込むページ内容がまだない状態なので
アプリ用に用意したウェブ領域(この例ではhttp://apieceoflife.sakura.ne.jp/fbapp/)に
表示する内容を記述したhtmlやphp等のファイルを用意する。使用する画像や
CSSファイルなども。

6.デフォルトページに設定する

作成した「ようこそ(てすと)」を、このFacebookページを
訪れたユーザに対してデフォルトで表示されるよう設定する。
*この設定は「いいね!」をしていないユーザに対してのみ有効。

追加したFacebookページの右上にある「Facebookページを編集」をクリックし

08

表示される「権限の管理」内の「デフォルトで表示するタブ」の項目で
今回追加した「ようこそ(てすと)」を選択し、変更を保存する。

他のタブ(ページ)にしたいときも同様の操作をすればよい。

こうして追加したアプリ(タブ)はFacebookページの編集の「アプリ」で
該当のアプリの「設定を編集」でタブ表示から削除することもできる。(あとでまた追加も可能)

09

そしてできたのが以下。

https://www.facebook.com/pages/ウェブショウジン/203422199670668?sk=app_121693647907911

アプリ内で複数ページ、遷移も確認したかったので2ページをつくって相互リンク。内容は、まぁ、サンプルなので、、はい。

次の課題は、このアプリの中でお問い合わせフォームと、ファンゲート(いいね!で条件分岐させて表示する内容を出し分ける)の実装。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿