FC2ブログ
PR
プロフィール

exhagane67

Author:exhagane67
FC2ブログへようこそ!

twitter
カテゴリ
最新記事
最新コメント
SEO関連
RSSリンクの表示
RSSチェック
  • [Valid RSS]
検索フォーム
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
リンク

FacebookページのIframe仕様で出てしまうスクロールバーを消す覚書



FacebookページをIframeでカスタマズすると、ある一定の縦の長さで、スクロールバーがでますね。これ、いやじゃないですか?パソコンによっても出現したりするし。

scul.jpg

これをなんとかしたくて、いろいろ調べ、ようやくスクロールバーを消す事が出来ました。その方法を書きたいと思います。


●手順

手順といっても難しくはありません。あるスクリプトをhtmlに入れるだけです。参照したのは以下のブログです。

iframe版ページタブでもFB.Canvas.setAutoResize()できる : Facebook開発者向けドキュメントの日本語訳とTips

そのスクリプトは


<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root"></div>
<script type="text/javascript">
FB.init({
appId : '<span style="color:#990033">自分のアプリIDを入力</span>',
status : true, // check login status
cookie : true, // enable cookies
xfbml : true, // parse XFBML
logging : true
});
FB.Canvas.setAutoResize();
</script>




これをコピペして自分のアプリIDを入力を入力。それを
<body>~</body>の間の、任意の場所に貼り付けます。
自分はとりあえずの真下に貼りつけました。

iframe化したページタブでは高さ800px固定のようなのですが、このソースはiframe内のコンテンツのサイズが変わると自動でリサイズしてくれるソースなので、スクロールバーが消えるというわけです。結果↓


sclr2.jpg

ページを開いた一瞬だけスクロールバーが表示されますが、自動で消えます。多分どの大きさにしても、縦スクロールを消してくれるはずです。

ちなみに

FB.Canvas.setAutoResize();

の部分を、自動リサイズではなく、長さを確定したソースに変換すると下のようになります。

FB.Canvas.setSize({ height: 10000 });

ブログで記載されていた長さで転載していますが、実際2000にしてやって、確かに問題無く動作しました。これは便利です。しっかりしたサイトが作れそうですね。

●横のスクロールバーを消す

もし、横のスクロールバーが気になる!という方がいましたら、同じように以下のスクリプトを<body>~</body>の間の、任意の場所に貼りつけて下さい。


<STYLE type="text/css">
<!--
BODY { overflow-x : hidden ;}
//-->
</STYLE>

多分消えたはずです。

自分は、スクリプトに関しては素人も素人なので、配置等は結構適当です。動いているのでいいかなで終わらしているので、心配な方は、詳しい方に聞いてみて下さい。


●問題が…

自動リサイズのスクリプトのせいなのか、もともとChromeがそうなのわからないのですが、ChromeでみるとソーシャルプラグインのFacebookのコメント欄が、とても狭く表示されてしまうのです。

動きが変な所もあり、表示された!と思って更新したら、出なくなったりなど。IEやfirefox等では問題なく表示されているのに…

Firefox,IE

smon2.jpg

コメント欄はしっかり出ています。

Chrome

smon1.jpg

短い…。しかもスクロールバーもでないし。でもドラッグすると動くような状態です。


この問題もいろいろやったのですが、全然だめでした….
Chromeをメインで使っている自分には致命的です...

もしわかる方がいたら、教えて欲しいです(>_<)使用しているのはChrome8です。

コメントの投稿

 管理者にだけ表示を許可する
 

トラックバック
トラックバック URL