2011年8月1日 by aniyan
一連の「facebookページ構築日記」をお読み頂いている方は、
HTMLコーディングができる方という想定で書いておりますので、
ここでHTMLやCSSのテクニックをお話しするつもりはございません。
ただiframe内に表示させるHTMLを書くに当たり、
横幅は520pxは厳守することがポイントです。
特にCSSをHTMLに直書きしないといけないとか、
tableレイアウトでなければならないということはありませんが、
画像サイズ、margin、paddingをちっきり電卓を叩くなどして、
トータル幅520pxを超えないように組むように心がけてください。
通常の制作では多少の誤差でもなんとか表示するものですが、
長さにアシが出ると不要なスクロールが生じたり、
その部分がカットされて表示されたりします。
個人的な体験ですが、普段意識なく使っている、resetのCSSなどにも
領域内にスクロールが出るような設定をしていないかなど、くまなく見直すようにしてください。
また、Facebookページ側のスクロールの出現させないようにするには
iframe内のHTMLのほうに指令を書いてFacebookページを制御するという手法をとります。
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>タイトル</title>
※ 省略 ※
<script type=”text/javascript” src=”http://connect.facebook.net/en_US/all.js”></script>
</head>
<body>
※ HTMLソースを書く ※
<div id=”fb-root”></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ‘アプリID’, //FacebookアプリIDです。
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement(‘script’);
e.src = document.location.protocol + ‘//connect.facebook.net/en_US/all.js’;
e.async = true;
document.getElementById(‘fb-root’).appendChild(e);
}());
</script>
<script>
FB.Canvas.setSize({ width: 520, height: 1200 }); // heightの数値を変える
</script>
</body>
</html>
明確な根拠はありませんが、
いくつか記述を試してみて、指令ソースはこのような位置で記述するのがエラー無く、安定しました。
swfを埋め込みときのScriptと指令が当たって、IEでNullエラーのアラートがブラウザ左下に出たりするので、
Dreamweaver等エディタまかせでソースを放置しないようにしましょう。
en_USをjp_JPにするべきかとの意見もありますが、
そうしなければ、どこが日本語表示にならないというわけでもないし、
ブラウザによってはjp_JPにしてすんなり表示しなかったりしたので、
何でもかんでも変えなくてよいかな、と思っています。
2011年7月11日 by tabatan
