Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

Facebook 小技集

Facebookページのiframe形式タブに切り替える場合は、バグに注意!

投稿日:


【2011/03/23:追記】
セキュアな接続(https)の場合に、iframeタブが表示されない問題が解決されていました。
Facebook Platform .:. Bug 15200 – Iframe on Page Tab not visible if User is https-only

【2011/03/02:追記】
ログアウト時にiframeタブが表示されない問題が解決されました。
Facebook Platform .:. Bug 15166 – custom iframed tab for a FB Page not loading when logged out.

しつこく、facebookネタっす。ちょっと速報気味にちゃちゃっと書きますね。
前回、3/11に移行が決まっているStatic FBMLからiframe形式に乗り換える方法を書きましたが、突然の発表ということもあり一部バグが残っているようです。主に企業で利用される方は情報を吟味してから導入すべきでしょう。

  1. セキュアな接続(https)の場合に、iframeタブが表示されない
  2. ログアウトした状態で、iframeタブが表示されない
  3. 古いFacebookファンページでは、iframeタブは正常に動作しない

2011/02/21時点の情報ですが、状況が変わるかもしれません。なるべく、このブログでもフォローしていくので最新の情報に注意してください。

セキュアな接続(https)の場合に、iframeタブが表示されない

facebookでは、アカウント設定で「可能なかぎりhttpsでの接続を行う」オプションを選択かのうです。

アカウント設定>アカウントのセキュリティ>セキュアな接続(https)をチェック

この設定は、Facebookページにも適用されます。iframe形式のタブの作り方の解説で、Canvasページの設定に「Secure Canvas URL」という項目があり、SSL証明書を持っている場合はhttpsのURLを入れておけば、セキュアな接続をされた場合そちらのURLからiframeを表示します。しかし、どうやら、タブにはこの設定が適用されていないようで、うまく表示されません。
Bug Tracerに上がっていたのでfb側のバグだと思われます。
Facebook Platform .:. Bug 15200 – Iframe on Page Tab not visible if User is https-only

ログアウトした状態で、iframeタブが表示されない

見出しの通りですが、Facebookページ自体はfacebookにログインしていない人でも閲覧できるため自社サイト・サービスのサテライトサイト的に使う事ができます。ところが、新しいiframeタブでは非ログイン時にページが表示されませんでした。
こちらも、Bug Tracerに上がっていたのでfb側のバグだと思われます。
Facebook Platform .:. Bug 15166 – custom iframed tab for a FB Page not loading when logged out.

古いFacebookファンページでは、iframeタブは正常に動作しない

こちらはバグではなく仕様と思われますが、引っかかっている人がちらほらいるようなので言及しておきます。
英文でのiframeタブの説明でも新しいFacebookページ用の機能というニュアンスで紹介されているとおり、iframeタブは新しい”facebookページ”でしかどうさせず、古い”facebookファンページ”では動作しないようです。試しに、アップグレードしていない古いファンページにiframeタブを追加したところ、FBMLタブとして読み込んでいるのかFBMLの文法エラーが表示されました。
iframeタブを使いたい場合は、必ず新しいfacebookページにアップグレードしてからにしましょう。

まとめ

しつこいですが、1/2についてはバグと認識されていますのでその内対応されるかもしれません。最新の情報をチェックしましょう。
とはいえ、現状httpsでのアクセスや非ログインでのアクセスなど、そこそこ有り得そうな方法で100%再現できるバグですので、Welcomeページなどトップページに指定するタブにはiframe形式を選ばないというのが無難な気がします。3/11まではStatic HTMLが作成でき、そのまま継続できるとアナウンスされているのでまずは簡単なFBMLを覚えてページを作って置いたほうがよさそうです。
このブログでも出来る限り続報をお知らせしますので、ぜひ、いいね!してくださいね!

-Facebook, 小技集

執筆者:

関連記事

MacのDock風メニューを縦方向にも設置できる「MacStyleDockPlus.js」

コリスさんで以下のスクリプトが紹介されていました。 MacStyleDock.jsは、Mac OS X風のドックをPrototypeやjQueryなどのライブラリを必要とせず実装できる、わずか3KBの …

WordPressでstyle.cssを更新したらwp_enqueue_styleでキャッシュクリアする

どうも、ヤガーです。 しばらくWEB技術ネタを投稿していませんが、頻繁に使うテクニックについてはちゃんとブログに残していこうと思います。 企業HPなどを制作する時に、長い間Wordpressが使われて …

Googleスプレッドシートのチェックボックスを便利に使う方法

2018年中旬、Googleスプレッドシートにチェックボックス機能が搭載されました。エクセル同様に、計算式やGAS(Google Apps Script)による高度なカスタマイズで、ビジネスの効率化に …

MovableTypeで記事に挿入したFlickrやAmazonの画像タグをサムネイルサイズに変換して表示する方法

最近のブログやWEBメディアで、新着記事や人気記事の一覧を小さなアイキャッチ画像と共に表示しているのをよく見ます。画像があると、記事の内容が一目で把握できるのとともに、アイキャッチの名前の通り目を引き …

第4回:twitter の JavaScript Badge をIEで表示するとおかしい件に対応してみる

twitter 流行ってますね。みなさんも使っていますか? オレはというと…ポツリポツリと呟いています。 friends は2人しかいません orz twitter は SNS 的な使い方もできるツー …

スポンサードリンク

スポンサードリンク