今回のWEBテクニック？は
「フェイスブックページにアプリを追加する
最新手法のFacebookアプリ公開!!
＋作り方と技術情報」です!!
フェイスブックページをお持ちの方や、これからフェイスブックを始めたい初心者の人、APIやアプリなんか作ってるプログラマーな方を対象としたお話です。
まず本題に入る前に、今回は予備知識としてザックリFacebookについて説明したいと思います。
Facebookとは、元々学生同士の「出会い・コミュニティ」目的で作られた、全世界で約６億人、日本で約６００万人以上が使用されている実名登録型のSNSで、個人～法人まで幅広く無料で利用できるサイトです。
★ご利用になられる方は、
原則個人アカウント１個と、法人・団体・著者などのコミュニティがいくつでも作れるFacebookページを利用する事ができます。
★初めてFacebookをされる方は、
個人アカウントを取得して、個人ユーザーとして活動する事が出来ます。
また、個人アカウントはgoogleなどの検索サイトには表示されないようになっています。
★個人アカウント⇒フェイスブックページを取得
個人アカウントをお持ちの方は、誰でも簡単にフェイスブックページを作る事が出来て、フェイスブックページユーザーとしても活動する事が出来るようになります。
また、Facebookページは、googleなどの検索サイトにも表示されるようになります。
すでにご存知の方や、感の良い方は分かると思いますが、
無料で企業や販売などのページを作れて、かつ、googleやyahooなどの検索サイトに表示されるようになります！
って事は・・・つまり！
Facebookページを作っていれば、内部のFacebookでも、外部の検索エンジンなどに対しても、効果的に露出をかける事ができるんですね！！
これをビジネスなどで使わないのは勿体ないので、興味のある方はぜひFacebookページを始めてみてください。
Facebookには楽天などの大手サイトなどが続々と参入を決定していっていますし、日本でのユーザー数も爆発的に増えて続けていますので、これからのビジネスツールになることは間違いないと思います。
っと、簡単にFacebookそのものを説明したところで本題へ♪
私がFacebookを始めたのも、このアメブロを始めたのとほぼ同時期からです。
記事を書き始めた（2011年12月まで）頃では、本やネットに掲載されている方法でフェイスブックページにiframeタブを追加できたのですが、現在は仕様が変わってしまい従来の方法ではタブを追加する事が出来なくなりました。
不覚にも私自身が落とし穴にはまってしまった所です。
ブログなどの日付も比較的新しいし、本にも同じような事が書いてある。
だけど、出来ない・・・(；・∀・) なぜだーーーーｗ
って散々色んな所を読んでいたら、去年の12月頃から仕様が変更になったという記事を発見して、やっとこの落とし穴から開放されましたｗ
そこで思った事！
公開APIなどの技術は、仕様変更が多々ある発展途上の技術であると理解した上で、面倒でも英文で書かれたDeveloperを読むべきだと。
そこには当然ながらオフィシャルなので、過去の間違った方法は新らしい方法に書き換えられていますので、変化の波に乗ることもできるなと。
そして、公開技術系のシステムの依頼が有った場合は、契約条項に「他責仕様変更」がある旨を記載しないといけないなと。
※これは兄の親友のプログラマーの方に教えて頂きました。
だ・け・ど
英文を読むのはやっぱり大変ですｗ
テキストとして記載されている文章は、分からない単語などはコピペで翻訳して調べられますが、チップタイトル表示や画像内表示されている文章はコピペが使えず、タイプ入力する必要があるし、HP丸ごと全文翻訳すると、訳の分からない日本語になるばかりか、ソースコードの領域も日本語化されてしまうため、やはり読みにくいです。
出来る事なら避けたい！と思われる方も多いでしょうし、何人もの人が英文を和訳させる事は時間が勿体無いと思うので、知ってる人はドンドンブログなどで紹介していって欲しいです。
と、そんなこんなな思いで私も知った事は不定期ですが、書いていこうと思います。
まずはFacebookページの作り方！
こちらも仕様変更されていて、作り方は２パターンあります！
まず簡単に作れる1つ目
するとこんな画面に移動します。
これは従来の本やネットでも掲載されている手法ですので、細かく知りたい方はgoogleなどで「Facebookページ 作り方」などで検索してみてください。
つづいて2つ目の手法
これはアプリ開発から入るFacebookページの作り方で、仕様変更されているため、従来の方法とは違っています。
まずフェイスブックのアカウントを作ってから、デベロッパー登録してアプリ開発が出来るようになる必要があります。
Facebookデベロッパー
こちらは従来どおりですので、詳しくは検索してみてください。
そしてアプリを作るURLがコレ
https://developers.facebook.com/apps
このURL画面の一番右上にある「新しいアプリケーションを作成」のボタンをクリックすると、ポップアップ表示でこれが出てきます。
App Namespace / アプリの名前空間（英数字のみ）
その下にあるチェックボックスは、利用規約の同意を求めていますので、チェックして続行ボタンをクリックするとアプリ登録が完了して、
App ID/API Key ： アプリケーションID
secret key ： アプリの秘訣
を教えてくれます。
続いて先ほど作ったアプリが、左側の項目に掲載されますので、そこをクリックすると、アプリのAppIDなどが記載されたページへと移動しますので、さきほどの「新しいアプリケーションを作成」ボタンの左横にある「アプリを編集」ボタンをクリックします。
左側のアプリ項目が、メニュー項目に変わりますので、まずは基本設定から。
★基本設定画面
「アプリのドメイン」は、必須ではありませんので、空っぽのままで大丈夫です。
「カテゴリー」は、使えるSDK機能が変わりますので、それに見合ったカテゴリを選択してください。例えば、Gameを選択すると、ゲームスコアが使えるようになります。
「Cloud Services」も、必須ではありませんので、空っぽのままで大丈夫ですが、herokuなどを使用したい方は登録してください。
続いて
アプリをFacebookに結合する方法を選択してください
ウェブサイト：
あなたのサーバにある情報をそのまま表示します。
Facebook上のアプリ：
これを設定すると、アプリ専用のURLがもらえます。
また、この設定か「ページタブ」の設定をしておかないと、Facebookページにタブ追加が出来ませんのでご注意下さい。
ページタブ：
この設定か「Facebook上のアプリ」の設定をしておかないと、Facebookページにタブ追加が出来ませんのでご注意下さい。
その他の項目は、モバイルやスマートフォンに特化したページを設定することで、モバイルやスマホでも表示されるようになります。
続いてやる事が、
左側のメニュー項目に表示されている「詳細設定」です。
認証と書かれた下にある「Sandbox Mode」は、有効にするとアナタ以外の人には非表示になりますので、開発中はこのモードを有効にしておいて、リリース時にオフにするとイイです。
また、移行と書かれた下にある「拡張認証ダイアログ」は、使える機能が増える反面、アプリ登録時の認証画面が1個増えてしまいますので、用途によって設定した方が良いです。
と、駆け足で重要だと思われる所を説明した所で、やっとFacebookページの作成です。
連絡先情報と書かれた下にある「アプリのページ」項目欄にある、「Facebookページを作成する」ボタンをクリックすると、アプリ側からFacebookページを作る事ができます。
これまた、英文のみの表示ですが、「本当に作っていいですか？」てきな文で確認を促されるので、気にせず作成しちゃってください。
あとは、１つめで紹介したように、チュートリアルに従うだけで、Facebookページが完成します!!!
ここまでで、2つのFacebookページの作り方と、アプリの登録方法やタブなどの設定をしないと、Facebookページにタブ追加できない事が分かったと思います。
ここからが本日のメイン！
従来までの方法だと、アプリページやFacebookページに行って、「マイページに追加」みたいなリンクがあって、それをクリックするとアナタがお持ちのFacebookページに登録が出来ていたのですが、現在ではこの方法での登録は出来なくなっています。
では、どうすればいいのか？
デベロッパーに書かれているのを読んでみると・・・・
原文はこちら
https://developers.facebook.com/docs/reference/dialogs/add_to_page/
https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_IDん？自分で直接URLを叩け！！って言ってますｗ
&display=popup&next=YOUR_URL
YOUR_APP_IDは、先ほど言っていた「App ID/API Key」の事です。
YOUR_URLは、アプリ・ページタブで設定したURLの事です。
※YOUR_URLでアプリキャンバスの
http://apps.facebook.com/ から始まるURLはエラーになりますので、ご自信が設定したURLを入力して下さい。
これらを貼り付けて、URL欄に入力すると登録できますよーって事なんですね。
なんとも不親切になったもんだｗ
もしかしたら・・・・てか願望ですが、次のバージョンアップでは、デベロッパーのアプリ画面から登録できるようにして欲しい物です。
そこで！もう少し簡単に登録ができるように、Facebook上にアプリを作ってみました。
Face bookページ IframeTab追加アプリ
http://www.facebook.com/pages/Face-book%E3%83%9A%E3%83%BC%E3%82%B8-IframeTab%E8%BF%BD%E5%8A%A0%E3%82%A2%E3%83%97%E3%83%AA/169418879828388
Facebook以外からも使用したい！って方は、こちらのページからも登録ができます。
通常ページIframeTab追加アプリ
http://facebook.asenos.net/iframe_tab_input/
機能としてはJavaScriptだけで作っていて、入力された項目を先ほどのURLに合わせて送信するだけ！っていう非常に簡単な内容です。
ソースを公開するとこんな感じ。
function openWindow() {
path = "https://www.facebook.com/dialog/pagetab?app_id=";
path += document.form1.app_id.value;
path += "&next=";
path += document.form1.app_url.value;
window.open(path,"OpenWindow");
}
クリックすると、上記のURLを生成して新しくタブ表示させて、そこから追加したいアナタのFacebookページを選択するだけで登録が出来ます。
もし、Facebookページを持っていて、アプリなどタブ追加できるコンテンツをお持ちでない方は、この「Face bookページ IframeTab追加アプリ」を試しに登録してみてください。
YOUR_APP_ID ： 315370601842086
YOUR_URL ： http://facebook.asenos.net/iframe_tab_input/
これを入力すると、新しいタブ表示でこんな画面が出てきます。
ここでタブ追加を行いたいFacebookページを選んで、青い「ページタブを追加」のボタンをクリックするとタブ登録が完了になり、タブ登録を行ったFacebookページへ移動します。
これで、アナタがお持ちのFacebookページにも簡単にページタブを追加するアプリを加える事が出来ますので、ページタブの追加やお気に入りに追加をしておくと楽ですよ(・∀・)
これからFacebookページを始める方や、アプリ開発の方などは是非使ってみてください。
基本情報に簡単な利用規約を載せていますので、使用される方は一度よんでくださいね！
そして最後に！！
SNSつながりのお話ですが、つい先日Google＋さんがgoogleアカウントを登録する際に、デフォルトでgoogle＋も登録されるようになりました！
私は元々発展に期待して早い段階で登録済みなのですが、これって、あまり人気が出てないから強制的に使わせようって感じがしますね。。
でも、Go言語（googleが作ったプログラミング言語）を作ったりしている背景をみると、google＋ももっと使いやすく、アプリなんかもこれからドンドン出てきて、人気がでるかも知れません。
ただ、Facebookにタイムラインの特許を取られているので、今後は特許使用料を払うか、タイムライン表示を止めるか？になるので、SNSを普及させていくには、別の機能が必要そうですね(-_-;)
はい、今回はここまで！
参考になりましたでしょうか？
読みにくい。
もう少しココ掘り下げて。
ここを知りたい！
などがありましたら、是非コメントに残してください。
参考にさせて頂いて、修正・加筆を加えたいと思います。
長文を最後までお読みくださり、ありがとうございました。
もし、Facebookページを持っていて、アプリなどタブ追加できるコンテンツをお持ちでない方は、この「Face bookページ IframeTab追加アプリ」を試しに登録してみてください。
YOUR_APP_ID ： 315370601842086
YOUR_URL ： http://facebook.asenos.net/iframe_tab_input/
これを入力すると、新しいタブ表示でこんな画面が出てきます。
ここでタブ追加を行いたいFacebookページを選んで、青い「ページタブを追加」のボタンをクリックするとタブ登録が完了になり、タブ登録を行ったFacebookページへ移動します。
これで、アナタがお持ちのFacebookページにも簡単にページタブを追加するアプリを加える事が出来ますので、ページタブの追加やお気に入りに追加をしておくと楽ですよ(・∀・)
これからFacebookページを始める方や、アプリ開発の方などは是非使ってみてください。
基本情報に簡単な利用規約を載せていますので、使用される方は一度よんでくださいね！
そして最後に！！
SNSつながりのお話ですが、つい先日Google＋さんがgoogleアカウントを登録する際に、デフォルトでgoogle＋も登録されるようになりました！
私は元々発展に期待して早い段階で登録済みなのですが、これって、あまり人気が出てないから強制的に使わせようって感じがしますね。。
でも、Go言語（googleが作ったプログラミング言語）を作ったりしている背景をみると、google＋ももっと使いやすく、アプリなんかもこれからドンドン出てきて、人気がでるかも知れません。
ただ、Facebookにタイムラインの特許を取られているので、今後は特許使用料を払うか、タイムライン表示を止めるか？になるので、SNSを普及させていくには、別の機能が必要そうですね(-_-;)
はい、今回はここまで！
参考になりましたでしょうか？
読みにくい。
もう少しココ掘り下げて。
ここを知りたい！
などがありましたら、是非コメントに残してください。
参考にさせて頂いて、修正・加筆を加えたいと思います。
長文を最後までお読みくださり、ありがとうございました。
asenos / アセノス