ウェブ、ショウジン

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

2011-4-5
Category
Facebook

2011/07/05追記
FacebookページでSDKを使ってスクロールバーを非表示にした際のIEでのエラーを解消するのほうが都度、高さを直接記述する必要がなく(JSで高さを取得しているので)楽だと思います。

Facebookページに読み込んだiFrame内コンテンツをスクロールバーを表示せずに表示するメモ、って、あ、タイトルとほぼ同じことを繰り返してますね。

お世話になったのは
JS+PHPでFacebookページをカスタマイズ!

iFrameで設置したタブは設定されている領域のサイズを超えるとスクロールバーが表示される。このサイズは幅520px、高さ800pxで、これを超えるとスクロールバーが表示される。(ブラウザがもつデフォルトのスタイルがあるはずなので、その差異を初期化しなければ実際にこのサイズではないはずだけど、まぁだいたいこれくらいと)

とりあえず確実にスクロールバーが表示されるように高さを1000pxに指定したdivをiFrameで読み込む内容に追加。

<div style="height:1000px; border:1px solid #ccc; padding:1em;">

<?php
$welcome_txt = <<<eol
<h2>ようこそサンプル、Welcome</h2>
EOL;

echo $welcome_txt;
?>
	<p>スクロールバーを出すのに高さをとりあえず1000pxに指定した上で、Facebook提供のJavaScript SDKを使ってスクロールバーを表示しないように設定。</p>
	<p>#cccのborderは実際に指定されているheightを視覚化するのに指定。</p>
	<img src="img/buddha.jpg" width="120" height="120" alt="" />

	<ul>
		<li><a href="sample.php">ページ遷移てすと</a></li>
	</ul>
</div>

これで縦のスクロールバーが表示されるようになった。

スクロールバーが表示されないようにするため、Facebookが提供しているJavaScript SDKというものを使う。

Facebookの「開発者」ページにアクセスし、右カラムに表示される「自分が作成済み」のFacebookアプリである「My Apps」の一覧から、スクロールバーを非表示にしたいアプリを選んでクリック。

遷移先ページの右カラムにあるテキストリンクから「設定を編集」をクリック。

遷移先ページの左カラムにある「Facebook Integration」をクリックして、遷移先ページにある「Canvas」ブロックにある「iFrameサイズ」で「Auto-resize」にチェックを入れる。

つぎに、iFrame内に読み込まれるページ(htmlやphpで作成済みのWebページ)のソース内で前述のJavaScript SDKを読み込んだ上でhead要素とbody要素内に以下の記述を追加する。

*複数の外部jsファイルを読み込む場合は、が一番先に読み込まれる必要があることに注意。

head要素内

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script language="JavaScript">
	FB.init({
	  appId: 'アプリID',
	  status: true,
	  cookie: true,
	  xfbml: true
	});
	// ここまでが JavaScript SDK を使うための準備(初期化)
	// ここから iframe のサイズを変更するための記述(FB.Canvas.setSize)
	window.fbAsyncInit = function() {
	 FB.Canvas.setSize();
	}
	// Do things that will sometimes call sizeChangeCallback()
	function sizeChangeCallback() {
	 FB.Canvas.setSize();
	}
</script>

body要素内

<div id="fb-root"></div>
<script>
 FB.Canvas.setSize({ width: 520, height: 1200 });
</script>

上記の「height」部分で指定する数値は、コンテンツの高さを指定する。それよりも下回る数値を指定すればスクロールバーは表示されてしまうので、それを上回る数値を指定。(cssでデフォルトスタイルを初期化してからやったほうがよさそう。まだやってないけど)

スクロールバーを表示するためにコンテンツの高さを1000pxに指定しているけれど、それを200px上回る1200という数値をJSで指定しているので、スクロールバーは表示されなくなった。

このやり方だとページごと、コンテンツの高さによって「height」の値を変える手間が生じますが「FacebookページでSDKを使ってスクロールバーを非表示にした際のIEでのエラーを解消する」の終わりのほうに書いているやり方のほうが楽だと思います。(jQueryで高さを取得してます)

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 さくらインターネット アクセス解析 カスタム投稿