ウェブ、ショウジン

FacebookページでSDKを使ってスクロールバーを非表示にした際のIEでのエラーを解消する

2011-7-5
Category
Facebook

FacebookページにおけるiFrame内コンテンツでスクロールバーを非表示にする

前に書いたこのやり方だとIEでエラーが出るので、これを解消する。

iframeで読み込む外部ページの中に、httpsではなくhttpから始まる外部ファイルを読み込む部分があるとIE(8で確認、他は知らない)で「セキュリティの警告」エラーが出る。

セキュリティエラー

このエラーを解消するには、スクロールバーを消すためのJavaScript SDKを読み込むのにFacebook Developers JavaScript SDKにあるSSLの項目にあるall.jsにリンクを張る。

SDKを読み込む

<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"></script>

これで解消(エラー)かと思ったらそうでもなく、これまたIEで出るJavaScriptエラーをなんとかしないといけない。(’root’ は Null またはオブジェクトではありません。というエラー)

JavaScriptエラー

以前実践して「おぉ、これでものにしたぜ」と思っていたコード(FacebookページにおけるiFrame内コンテンツでスクロールバーを非表示にする)ではダメで(前は大丈夫だったような気もするけど)

これもFacebook Developers JavaScript SDKを確認して、Loading the SDK Asynchronouslyという項目部分にある記述を使って(appId部分だけ変更)今度こそやっとこのエラーを解消することができた。

head内に追加(App IDの部分だけ変更)

<script language="JavaScript">
window.fbAsyncInit = function() {
	FB.init({appId: 'ここにApp ID', status: true, cookie: true, xfbml: true});
};
(function() {
	var e = document.createElement('script'); e.async = true;
	e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
	document.getElementById('fb-root').appendChild(e);
}());
</script>

エラーは解消できたけど、前に調べておいた「高さ」を自動取得させて、いちいちスクロールバーを表示させないように「数値を記述する手間」を省く記述も追加することにする。

これはjQueryを使うので、まずjQueryを読み込む。(Googleにあるやつでhttpsから始まるリンクパスなのでセキュリティエラーの問題もなし)

<script language="JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js" type="text/javascript"></script>

ページのbody内に以下を記述(これが縦、横、どちらにもスクロールバーを表示させない直接の記述)

<div id="fb-root"></div>
<script>
$(window).load(function(){
var pageHeight = $(document).height();
FB.Canvas.setSize({ width: 520, height: pageHeight }); // 2011.8.10追記 OSX版のFxでスクロールバーが出てしまう場合は pageHeightに1を足して「pageHeight + 1」としてみると解消できたりするけど絶対起こる現象でもなく、原因不明。
});
</script>

英語だからって苦手意識もって避けてないで、グイグイとFacebook Developers JavaScript SDKを読めってことですね。

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿