WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法

WordPressで作成したFacebookページのIFrameタブデザインを崩さない方法

Posted at October 20,2011 2:55 AM
Tag:[Facebook, IFrame, WordPress]

WordPressで作成したFacebookページのIFrameタブで、デザインを崩さずにきちんと表示させるためのTipsを紹介します。

1.問題点

次のような、WordPressとjQuery Tabs UIを使ったタブページを、FacebookページのIFrameタブに表示するものと仮定します。

WordPressとjQuery Tabs UIを使ったタブ

上の場合は期待通りの表示になっていますが、場合によっては次のようにjQuery UI Tabsのスタイルが適用されず、崩れて表示される可能性があります。

WordPressとjQuery Tabs UIを使ったタブ(NG)

余談ですが、WordPressを使って上記のjQuery UI Tabsによるタブページを表示するカスタマイズは「Facebookページプロフェッショナルガイド」に掲載しています。宣伝です(笑)。

Facebookページ プロフェッショナルガイド
蒲生トシヒロ 竹村詠美 原裕 大元隆志 井出一誠 マクラケン直子 ホシナカズキ 藤本壱 荒木勇次郎 関根元和
毎日コミュニケーションズ
売り上げランキング: 699

2.原因

レイアウトが崩れる原因は次の3つの条件が重なった場合です。

1つめの条件は、ユーザーがFacebookの「セキュリティ設定」でセキュア接続を利用していることです(下)。

WordPressとjQuery Tabs UIを使ったタブ

2つめの条件は、WordPressのIFrameタブ表示用のテンプレートに次のようにhome_url()を利用していることです。

<link type="text/css"
  href="<?php echo home_url(); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

そして3つめの条件は、「https」のドメインが「http」のドメインと異なる場合です。さくらインターネットの場合、独自ドメインのSSLは次のようになります。

  • http://user-domain/
  • https://secureXXXXm.sakura.ne.jp/user-domain/

これら3つの条件が揃うと、ユーザーがセキュア接続でIFrameタブを閲覧した場合、home_url()で出力されるスキーム名は自動判別で「https」になります。ですが、WordPressの管理画面で設定している「サイトのアドレス」が「http」を想定したURLになっている場合、正しいURLが出力されません。

例えば、上記のさくらインターネットの例では、home_url()の出力は、

  • https://user-domain/

となり、jQuery UI TabsのCSSを正常に取得できず、デザインが崩れるという結果になります。

3.対策

対策は何通りかあると思いますが、次のようにhome_url()の第2パラメータにスキームを指定することで解消します。スキームを指定すれば「https」で出力されなくなります。ユーザーがセキュア接続を利用していても、IFrameタブの中ではhttpスキームによるアクセスが可能です。

<link type="text/css"
  href="<?php echo home_url('','http'); ?>/css/jquery-ui-1.8.11.custom.css"
  rel="stylesheet" />

このケースではCSSファイルのURLを例に説明しましたが、JavaScriptファイルや画像ファイルなどのアクセスでhome_url()を使っている場合も同様です。

4.その他

IFrameタブの動作確認を行う場合、セキュア接続の有無によるテストも忘れずに行いましょう。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)