Facebookページ用の追加タブをiframeで作ってみる

  • 投稿日:
  • カテゴリ:
どうやらFacebookでは、個人アカウントは、文字通りの友達とのつながりに留め、初対面というか、ネット上で知らない人との交流はFacebookページ(旧ファンページ)でまず行うように、という方向付けがされているようです。

そのため、Facebookページのアカウント名でも、書き込みやコメントもできるようになったようです。ちなみに、Facebookページ版の「エー・プラネット」もよろしくお願いします。まだスカスカですが「いいね!」にご協力いただけると幸いです。

さて、従来のホームページの代替を考える方は、Facebookページの充実が望まれるわけですが、ツイッターのつぶやきを、ウォール(公開している掲示板のようなもの)に、ただ流しこんでも冗長で、どうも按配よくないようです。

そこで、既存アプリ使って、ウォールにはブログのRSSだけひとつ流しこみ、新たに別ページ(タブ?)も作って、自分のブログのRSSだけを、まとめて出力するようにしてみました。但し、リロードしないと表示されない時がありますが。

新規タブは、従来のスタティックFBMLというアプリを登録して、Facebookの画面上からHTMLなどを直接書き込んで作るという形は、3月11日以降使えくなるというので、iframeを使う推奨方式に則って、やってみました。

まずは、iframe内に表示するHTMLデータなどを保存するための、(レンタル)サーバーの準備、Facebook開発者としての簡単な登録が必要になります。

そしてFacebook上での、iframeの設定と、データの(自分のサーバー上で)アップロードをして、テストします。

本来はドキュメントをつぶさに読む必要がありますが、H.Fujimotoさんのブログの解説が、とても分かりやすく、それに沿っていくと、スムーズに行きます。
Facebookアプリ開発に挑戦(その2・アプリの登録)
iframe版Facebookページの作成方法


注意点は、
1.テスト段階では、サンドボックスを有効にして、自分だけ見られるようにしておくこと
2.表示用データの文字エンコードは、化けないようにUTF-8で
3.インラインフレームにつき、HTML側でリンクのウィンドウの開き方を設定しておくことです。

また、自分のFacebookのみのアプリなので、開発者としてあまりオープンになりたくない、という時は、アプリ設定画面の「Facebook Integration」にある、Social Discoveryを、「無効」にすると目立たなくなるようです。

もっとも自動的にアプリ用のページが作られてしまいますし、基本的には「シェア」なんでしょうが。


尚、ウォール内にブログのRSSを自動挿入する方は、面倒なので、小粋空間さんが紹介されていたRSS Graffititというアプリを使いました。このアプリは、導入時に公開基本データしか要求しないところが気に入りました。
FacebookページにブログのRSSフィードを表示する