いいねボタンでIEがセキュリティアラートを出す

facebook

どこでも付いてますね

弊社のコーポレートサイトでもサービスサイト上でもいいねボタンは結構付いてます。僕自身は作った事はなくて、いつももらった iframe のタグを貼りつけてるだけなんですが。。

https と http での接続

iframe でいいねボタンを設定する時は以下のようなタグを設置します。

<iframe src="http://www.facebook.com/plugins/like.php?
%ここはそれぞれのアプリによる%;send=false&amp;layout=standard&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=35" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:35px;" allowTransparency="true"></iframe>

詳しくは分からないですが、作成した「いいね」などなどが付いたアプリを数々のオプションと一緒に呼び出す感じですね。

上のコードでは「http://www.facebook.com」から始まってます。でもこれ、サービスサイトみたいなセキュアなページでは、そもそも https のページに http が入ってしまってしまいます。最近のブラウザだとこういうのは警告の対象になってしまいますね。

特にIE

IE7 以降だと、情報バーが出てきたりで「セキュリティで保護された Web ページをうんたら」みたいなアラートで「表示しない」にしちゃうと、IEの「Web ページへのナビゲーションは取り消されました」みたいなエラー情報が iframe の中にでてしまって非常に格好悪いというか、ユーザーにとっては不信感に繋がってしまいます。

対応方法

facebook のドキュメント見れば書いてあるのかもしれませんが以下のようなページがありました。

要は以下ですね。

  1. <iframe src="http://www.facebook.com/〜 なら http だ。
  2. <iframe src="https://www.facebook.com/〜 なら https だ。
  3. <iframe src="//www.facebook.com/〜 ならよしなにしてくれる。
さっそくやってみた。

結果。

  • https 開始に変更すると上手くいきました。
  • // 開始に変更しても上手くいきませんでした。

なぜ結果が異なったのかはイマイチ分かりません。

アラートが止まない。

上記までの対応でエラーページみたいのは出なくなったのですが、まだ「セキュリティでされた Web ページコンテンツのみ表示しますか？」みたいなアラートが出てくる。
ただ、別のいいねアプリだと大丈夫だったりしました。

どうしてそうなった？

実際に生成された「いいね」ボタンを、OKだったもの、NGだったもの両方 HTML を見てみました。すると、「いいね」ボタンの画像の URL が OK だったものは https から始まっているのに対して、NG だったものは http から始まっていました。

なるほど、確かにこれだと NG の方は http と https が混在している事になるのでアラートが出て当然です。

■

結局最終的にはこの「いいね」アプリを作ってるとこに原因まで話してお任せしましたが、実際作成するときにそういうオプションを付ける事ができるんでしょうかね。
触ってみたくなりました。