Facebookページの作成 第3回『Static HTML Iframe Tabアプリケーションを使ってページ作成』

『Static HTML Iframe Tab』アプリ

Facebookページの作成方法で最後に紹介するのが、『Static HTML Iframe Tab』アプリケーションです。Facebookページを作るアプリは他にもいくつかありますが、当ブログのページを作る時に使用したのがこのアプリです。このアプリで制作したページは『https』で接続した場合でも問題なくページを表示してくれます。

Step01

まずは『Static HTML Iframe Tab』をインストールします。
http://www.facebook.com/search.php?q=Static%20HTML%20Iframe%20Tab#!/iframehost

ここで気をつけたいのは、メニューに表示させたいアイコンによってインストールボタンが異なる部分です。下の画像を参考に表示させたいアイコンを決めてからインストールしてください。

インストール画面では選択したアイコンが表示されています。アプリケーションの追加先を選択後に追加ボタンをクリックしてください。

インストールが完了するとFacebookページには選択したアイコンと｢welcome｣の文字が表示されています。

Step02

左メニューの｢Welcome｣タブをクリックするとTab Settingのページが表示されます。ここで表示したいコンテンツを設定します。

Tab Settingの一番最初の『Page Source』項目でコンテンツ内容の表示方法を選択します。

• URL：コンテンツ内容をURLで指定できます。
• Redirect：コンテンツ内容をリダイレクトさせて表示できます。
• Image：コンテンツ内に表示したい画像を自分のPCからアップロードできます。
• HTML：コンテンツ内容をHTMLタグを利用して表示できます。

『Page Source』のimageはサーバーに画像をアップする必要が無いのでとても便利だと思います。ただし、幅520px・高さ800px以内でサイズも400kb以内にしてくださいと注意文が表示されるのでサイズには気をつけてください(※高さ800px超えても普通に表示できました・・・。不思議です。)。

今回、私はHTMLでコンテンツ内容の表示を指定しましたが、JavaScript SDKの設定をせずに高さが800pxを超えてもスクロールバーは表示されませんでした。ここまでで、Facebookページの作成 第1回、2回で行った設定が簡単にできてしまいます。

さらに、｢https｣でアクセスしてもちゃんとコンテンツが表示されるので始めて使ったときは感動しました。

Static HTML Iframe Tabでは、いくつかのオプション設定ができます。その中でとても便利だと思ったのは『Non-Fan Page Source』の設定です。

ここで設定した内容は｢いいね｣ボタンを押していないユーザーのみに表示することができます。ですから初めてページに訪れたユーザーに｢いいね｣を押してもらうために『いいねを押してくれた方のみに〇〇〇をプレゼント』のようなコメントのFacebookページを表示しておくことができます。そして｢いいね｣をクリックしたら、今後は『Page Source』で設定したコンテンツ内容が表示されるように自動で振り分を行ってくれます。『Non-Fan Page Source』のコンテンツ内容設定も｢URL・Image・HTML｣の3種類から選択することができます。もし、そのような設定が必要なければ｢off｣にしておきます。

これまでの設定を、設定完了後に再度変更したい場合は、表示されたコンテンツの上に表示されている『Settings』メニューをクリックしてください。先ほどの設定画面が表示されます。

Step03

最後にタブ名の変更方法です。画面右上の『Facebookページの編集』ボタンをクリックしてください。

編集画面に移動したら左メニューの『アプリ』メニューをクリックします。クリックすると現在ページに追加されているアプリがすべて表示されるので、Static HTML Iframe Tabの『設定を変更』をクリックします。

『設定を変更』をクリックすると下画像のような設定画面が表示されるので、カスタムタブ名の項目を｢Welcome｣から違う言葉に変更して『OK』ボタンを押してください。私は｢はじめての方へ｣と変更しました。

タブメニュー名を変更したらFacebookページに戻ってください。タブ名が変更されていたら設定の完了です。

これまでFacebookページの作成方法を3回に分けてご紹介しましたが、Facebookページ関連で学ぶことはまだまだたくさんあると思いますので、ここで終わりではなく今後も機会をみてご紹介できたらなと思います。