最近はFacebookの仕様もアホのようにガラっと変わってしまい、北米も日本も関係無く仕様変更に対応しようと四苦八苦。

色々Facebookページを作るための方法も見かけますが、小生が今現在Facebookページを作る時にFacebookページを作る流れを一からご紹介しようと思っています。

Facebookページにiframeで読み込む時のSSL問題

Facebookページが何か、どうやってFacebookページを作るかという話は是非Google先生に聞いていただくとして、小生がFacebookページを初めて作った時は、最近流行りのアプリケーションを登録する流れで作ってみた訳ですね。参考にしたのは下記の記事。

iframeでFacebookページをつくるための流れ

上記記事を参考にしながら、iframeで読み込むHTMLを作って、自分のサーバーに置き、実際にアプリに登録してみたわけですが、小生はいつもsslでFacebookを見てるユーザーでして、実際に自分のFacebookページをhttpsからアクセスすると下記のようになってしまうわけです。

「いや、見れないし」とツッコミを入れてみました。

つまり、読み込むiframeのファイルがsslサーバー内じゃ無いとだめとかそういう話らしく、sslサーバーを持つ必要の無い個人や中小企業にとっては痛い仕様だと思っていたわけです。

どれだけの人がセキュア設定でFacebookを見ているのかは分かりませんが、小生は気がついたらsslで見ていたので、もしかしたら初期設定なのかもしれませんし、どこかで設定しなおしたのかもしれません。

何にせよ、このままじゃダメだと色々調べてみたところ、カナダ人の友人にFacebookアプリの”Static IFRAME Tab”というアプリがあり、このアプリケーションを使って対応しているという情報をゲット！

下記で早速ご紹介させて頂きます。

Static IFRAME Tabとは？

FBMLが廃止されてから、様々なFBMLの代わりとなるアプリケーションが出ましたが、どれもFBMLの延長。Facebookアプリで作ったFacebookページのようにアイコンの変更ができなかったり、微妙に重かったりと個人的に使えない印象が大きく。かと言ってアプリ登録してiframeで読み込む方法だとSSLサーバーがいるしと、八方塞がりでしょうがなく使っていたのですが、このStatic IFRAME Tabは、FBMLに似ていますが、独自アイコンの指定もできるようきっちりアプリ申請を行った上でページを作成する優れもの。下記にて作成までの流れをご紹介。

Static IFRAME Tab導入手順

まずはStatic IFRAME Tabを追加します。

すると自分のFacebookページにWelcome!というページが追加されているのが分かります。

Welcomeの左についているようなアイコンでは無く、独自アイコンにしたい！というわけでこちらからアプリ登録します。

1. アプリケーションのセットアップ

下記画面から新しいアプリケーションのセットアップボタンを押します。

アプリケーション名を入力してください。

2. アイコンをアップロード

アプリケーションのアイコンをアップロード！このアイコンがFacebookページに追加されるページのアイコンになります。（先ほどのWelcomeの左みたいな）

ここからちょっと面倒です。ここに設定するURLは必ず下記の物を入力してください。

• Canvas URL - Enter http://YOURAPPLICATIONID.iframehost.com/
• Secure Canvas URL - Enter https://YOURAPPLICATIONID.iframehost.com/
• Tab URL - Enter http://YOURAPPLICATIONID.iframehost.com/tab
• Secure Tab URL - Enter https://YOURAPPLICATIONID.iframehost.com/tab

上記の「YOURAPPLICATIONID」という項目は全て作成したアプリケーションのIDに書き換えます。終了したら保存してください。これで準備完了です。

3. アプリケーションの登録とIDメモ

下記のAPI keyとApp Secretをメモ！そして右側のApplication Profile Pageより作成したアプリを自分のFacebookページへ追加します。

さて、ここまでくれば後は自分のアプリケーションへ移動すると登録したアプリケーションが表示されており、下記のような画面が表示されるはずです。

こちらに先ほど控えたAPI KeyとApp Secretの番号を入力してください。

あとは上記のHTML欄に好きにHTMLを書いて画像引っ張るなり、適当に作るなりしてください！自由！貴方は自由です！

ちなみに、タブの名前はいつでもアプリケーションの設定から変更できます。

以上、いかがでしたでしょうか？

ページの作り方というよりは、SSL対応とアイコンを付けるのがメインの紹介になってしまいましたが、最近小生がFacebookページを作る仕事をするときはこの方法を主に使っています。

SSLサーバー持ってる人にはあまり関係無いお話かもしれませんが、ご紹介までに。

ちなみに、こちらの記事は小生のFaecebookページでも見ることができます。

さて、以前から「小生なりのEvernote活用法を書くぞ！」と意気込みながら今に至ってしまいましたが、やっと重い腰が上がったので小生のEvernoteまとめをご紹介。

• 000-1 ネタ探し

完全に面白いとかとりあえず見るとかぶっちゃけ適当箱です

GTD関連

• inbox
  とりあえずGTD関連でつっこむノート
• すぐやる
  １０分以内に手をつけろよノート
• いづれやる
  気が向いたらやれよノート
• PJ
  プロジェクト関連で気にしとけよノート
• VANCO
  うちの会社でお前覚えておけよノート
• IDEA
  実際に実行に移すIDEAノート
• 完了
  よっしゃ終わったわー！って感覚を味わうためのノート

Learning English

• 日常会話
  日常会話でこれつかえんじゃねと思う文まとめノート
• 暗記する
  暗記しろアホと活を入れるノート
• レッスン
  チューターとか英語教えてもらったら書くノート
• 文法
  嫌いです
• Speech 
  スピーチする時に使えるかもと思っている表現とかまとめるノート
• 参考資料
  英語ならこれ参考にしろよノート

LifeLog

• inbox
  生活に関する色々とりあえず入れろよノート
• Cooking
  料理関連のレシピだったり作った物だったり反省だったり検討だったり
• 個人情報
  給与明細、請求書、その他口座とか何から何までこの中突っ込みます、「セキュリティどうすんだよコエーよ」という方はこちら
  https://www.youtube.com/watch?v=VWfuPIRxSe0&feature=player_embedded#at=37
• 遊び
  遊びに使えそうなノート
• 登録関連
  アカウント登録とかソフトのキーとかその辺
• 完了
  もうこのログは取る必要ねぇなという物突っ込むノート

Tech / Design

全部職業柄のメモ用紙、覚えておかないと駄目なこととか、アイデアハック系

Life / Business

• 業務改善／試行
  業務完全や効率化の試作、自分が仕事をする上で必要な業務効率上昇ノウハウ系
• Life Hack
  そのままの意味。生活面での時間節約術とか
• 一括
  なんか名前適当すぎるけど、秘密のノートブック
• Marketing
  マーケティング関連で覚えておくためのノート。仕事だけじゃ無く、生活面でのマーケットもここに突っ込む
• Book
  主にLife hack系の本とか読みたい本リスト
• 学習記録
  個人的にEvernoteで一番重宝してるノート。何かを勉強するぞ！ってなったらノートを一個作る。そんで今日頑張って学んだことをここに突っ込む

終了

お前、これ絶対見直すこと無いだろ？って奴を突っ込むノート

全体的に

個人的にはノート間の移動が激しいです。Lifehackに入れてブログに書けると思ったらネタ帳に行ったり、業務改善に行って、そのままGTD化したり。

ノートは基本、毎日見るものじゃ無く、必要だと思った時に見るようにしてます。

Evernoteで記憶してることは頭からすっかり抜き去り、その他の部分で頭のキャパを使い切る感じでしょうか。その中で生まれたものもまた、同様にEvernoteの中へ放り込む感じですね。

あとは、完了系のノートって反対派の人も多いようですが、小生は何かしらタスクややり終えた感が欲しい人間なので、とにかく完了のノートに終わったと思ったら突っ込むようにしてます。

検索で出したいキーワードとかはタグでつけるようにして、万が一再度必要になった時に取り出せるようにしとくtまえ、ゴミ箱じゃ無く終了や完了のノートに突っ込みます。

これが絶対は無いと思いますが、何かの参考になれば幸いです。