FacebookページにiFrameを組み込もう

Facebookページ(旧ファンページ)に関して大きな話題になっていることが、FBMLの新規追加ができなくなることと、iFrameによるページ作成が推奨されるようになったことです。

今回は、この変化によって何がもたらされるのか、また実際にiFrameを追加するための設定について解説していきます。

なお、iFrameを追加するにあたっては、新デザインのFacebookページにアップデートする必要があります。アップデートの方法などについては、「新デザイン対応!:Facebookページ完全ガイド」を参照してください。

FBMLからiFrameへ

Facebookは、2011年の3月11日以降、FBMLによるページのカスタマイズをするのに必要な「スタティックFBML」というアプリケーションを新規に追加することができなくなるということを発表しました。なお、すでにFBMLによって作成したページはこれまでどおり動作するようですが、iFrame版への移行が推奨されています。

iFrameとは何か

iFrame(Inline FRAME:インラインフレーム)は、<iframe src=”…”>~</iframe>で記述されるWebページの制作においてはおなじみのタグです。

iFrameを使うと、一つのWebページの中にフレームを作って別のWebページから読み込んだ内容を表示させることが可能です。

例えば、Social Media ExperienceのWebサイトの右枠の一番下にあるグラフを見てください。こちらもiFrameを利用して表示させており、グラフを表示するページは別のページにあります。以下のようなソースコードを使って記述されています。

&lt;iframe src=&quot;[PATH]/chart_6h.html&quot; frameborder=&quot;0&quot; width=&quot;265&quot; height=&quot;315&quot;&gt;chart&lt;/iframe&gt;

コードを見ればわかるように、読み出すWebページのコンテンツを指定し、表示するフレームのサイズを指定すればOKです。

iFrameを使うことにより、HTML、javescript、CSSなどで作成したリッチなコンテンツをFacebookページ上に表示することができるので、自由度が高まりました。

iFrameを利用するのに必要なこと

外部に公開されたWebサーバーが必要

Facebook上でiFrameを利用するということは、Facebook内に外部Webサイトを表示させるということです。よって、公開されているWebサーバーが必要になります。

自社でWebサイトなどを運用していればよいのですが、自分で管理できる外部Webサーバーがなければ、iFrameを使ってFacebookページを自分の好きなように作成できないということです。

FBMLでカスタマイズするFacebookページは、Webの専門的な知識がほとんど必要ないので、飲食店などローカルビジネスを行っている人にとっては、使いやすいものでした。しかし、iFrameでFacebookページをカスタマイズする場合は、自分で管理できるWebサーバーが必要になるため、若干敷居があがった感もあります。

とはいっても、リッチなページを作成できるFacebookアプリなども公開されているので、それらを上手に活用すれば、iFrameを利用しなくてもFacebookページの内容を充実させることはできます。

Facebookアプリの開発者としての登録が必要

詳細は以降で説明しますが、iFrameによるページの作成は、Facebookアプリケーションの追加という扱いになるため、最初に開発者として登録する必要があります。

新デザインにアップデート

iFrameを追加する前に、Facebookページを新デザインにアップデートしましょう。アップデートは「Facebookページのアップグレード状況」から行います。

iFrameをFacebookページに追加しよう

Webサーバー側に表示するファイルを用意する

Webサーバーに適当なディレクトリを用意して、表示するHTMLファイルまたはPHPファイルを格納しましょう。

開発者登録をする

Facebookアプリの開発者登録をしていない場合は、開発者登録をしましょう。開発者ページにアクセスしてください。

以下のような画面が表示されますので、「許可する」をクリックします。

アプリの許可

クリックすると拡大します

以下の画面に遷移しますので、赤枠の「Create one.」をクリックします。

Create one.

クリックすると拡大します

開発者としての認証を促されますので、携帯電話、もしくはクレジットカードのいずれかで認証してください。

携帯電話かクレジットカードで認証

クリックすると拡大します

これで認証ができました。

アプリケーションを登録する

上記認証が終了したら開発者ページに遷移し、ページ右上の「+Set Up New App」をクリックします。

Set Up New App

クリックすると拡大します

任意のアプリケーション名を入力します。Facebookの利用規約を確認し問題なければ「同意する」を選択し、「アプリケーションを作成」をクリックします。

アプリケーションを作成

クリックすると拡大します

セキュリティチェックの画面に遷移しますので、入力し、「送信」をクリックしてください。

セキュリティチェック

クリックすると拡大します

Facebookアプリケーションの設定画面に遷移します。

Aboutタブでは、以下の内容を設定します。

今回はサンプルとして作成するので、最低限必要な項目である赤枠で囲んだ部分のみ入力します。

「アプリケーション名」は先ほど入力した値があらかじめセットされています。
「ユーザーサポートのアドレス」はサポート用のメールアドレスを入力します。URLを選択して、Webサイトのお問い合わせフォームに遷移させることも可能です。
「連絡先メールアドレス」はFacebookからの連絡の際に利用されます。

Abouttab

クリックすると拡大します

左メニューの「Facebook Integration」をクリックします。

Facebook Integration

クリックすると拡大します

Facebook Integrationの画面に遷移します。

「キャンバスページ」には任意の文字列を入力しましょう。これがFacebookアプリケーションのURLになります。ただし、小文字のアルファベット以外は使用できません。

「キャンバスページURL」を入力します。ここには最初に設定したWebサーバ側のURLを入力します。URLの最後に「/(スラッシュ)」を入力するのを忘れずに。

「Canvas Type」で「Iframe」にチェックを入れます。

キャンバスページ

クリックすると拡大します

画面をスクロールして、一番下の[Page Tab]を表示します。

「タブ名」に任意の文字列を16文字以内で入力します。これは、Facebookページの左側のメニューとして表示されるものになります。
「ページタブタイプ」は「Iframe」にチェックを入れます。
「タブのURL」は作成したページが表示されたときに最初に読み込まれるファイル名(index.html、index.phpなど)を指定します。

ページタブ

クリックすると拡大します

「変更を保存」をクリックします。

これでページが作成されました。

iFrameアプリケーションをFacebookページに追加する

作成されたアプリの画面から「Application Profile Page」をクリックします。

作成したアプリの画面から「Add to My Page」をクリックします。

アプリケーション追加

クリックすると拡大します

追加するFacebookページを選択し「Facebookページに追加」をクリックします。

Facebookページを確認する

Facebookページを表示しましょう。左側のメニューに追加したアプリケーションが表示されます。表示されていない場合は、「他を見る」をクリックします。

アプリケーション表示

クリックすると拡大します

追加したiFrameが表示されます。

アプリケーション表示

クリックすると拡大します

まとめ

このようにiFrameを使うことでFacebookページの中に外部サイトを埋め込むことができるようになりました。他のサービス(YouTubeやSlideShareなど)で公開しているファイルも公開することができます。

また、Facebookページを[いいね!]といっているかどうかで見え方を変えたりすることもできますが、それはやや難しいので別の機会に紹介します。

さて、実際にSocial Media Experienceとして作成したiFrameはSocial Media ExperienceのFacebookページから確認することができます。

関連記事


この記事にコメントをどうぞ

Social Media Experience
記事提供
運営会社