iframeを使う場合のfacebookアプリの作成

2015年4月16日

facebookアプリ完成図
今回はこんなのに挑戦

facebook、私の周りだけかもしれませんが流行ってますね~。
というわけで、facebookページの作り方・・・
を通り越してfacebookアプリをやります(^o^)
まずは検索から
まずは検索から・・・
検索窓で「開発者」と入れるとでてくる「開発者アプリ」を使います。
「アプリを見る」ボタンを押すとパスワードを求めてくるので
ログインパスワードを入力します。

この辺りで認証が入り、携帯電話の番号などを聞かれるので
答えておきましょう。。
(画面が欲しかったけど私のIDではどうやら認証してたみたいで無理でした。)
ここは当然「許可する」で。。。
ここは当然「許可する」で。。。
するとこんな初期画面が出てきます。
って、無名アプリがたくさん。。。
って、無名アプリがたくさんありますね。。。
どうやら、知らない間に初期状態のアプリを量産していたようで・・・(^_^;)
新規だとこんな画面ではないはず。。。
まぁ、そこは気にせず右上の「Create New App」を押しましょう。
すると
アプリの名前とたぶん日本語を選びチェックをつける。
アプリ名の入力(自分が判れば何でも可)と日本語を選びチェックをつける。

一通り済ませたら、続行で先へ進みましょう。
次の画面でセキュリティチェックがあるので指示に従います。

するとアプリの初期画面が出てきますので必要事項を入力します。
ここ重要!

ここ重要!
App Display Name は、さっき入力したものが表示される。
App Domain は、アプリを置いてあるドメイン名

ここより下は項目をクリックしたら開きます。
Site URL はそのまんまURLですね。
Canvas URL も同じもので大丈夫・・
ファイル名までは入れなくて良いみたいです。
※この二つ、最後に「/」を入れないと私の場合はエラーになりました。

Page Tab Name はFaceBookページに表示される名前。
Page Tab URL はアプリのファイル名

FaceBookページに表示されるアイコンを変更するのは一番上の緑部分から。

アプリ自体はfacebookのAPIなどを使えばかなり凝ったものまで
できてしまうのですが、そこは割愛して。。。
PHPなら動くようなので
これにしてみました。
これにしてみました。
そう、WordPressです。
私のパソコンブログ・・・しかも移行前のモノ(放置予定)
これを作ったことにして先へ進みます。
まじめに作る場合は縦800px 幅520pxを前提として作成します。
これを超えるとスクロールバーが出ます。
縦は回避できるみたいですが、横は何ともならないでしょう。
(本来、ここに一番時間がかかるでしょうね)
☆HTMLページでも拡張子をPHPにするだけで表示されました☆
PHPが動作する環境で無いとだめですよ~。。たぶんね。

これらを入力してエラーが無ければ、
右側にある「View App Profile PAge」をクリックすると
こんな感じで初期画面が見られます。
こんな感じで初期画面が見られます。
ここから「マイページへ追加」をクリックすると
facebookページへ追加する画面が現れるので追加します。
facebookページにはこのようなカタチで追加されます。
facebookページにはこのようなカタチで追加されます。

というわけでこれで完成ですね。
本来はきっちりと作りましょう。



PAGE TOP