2011年9月13日 星期二

facebook 如何移除iframe捲軸


在製作粉絲專頁的時候, 如果頁面寬度超過520px或是高度超過800px時後就會出現超級惱人的橫向及縱向卷軸，放在頁面上實在是非常不好看，要移除這些惱人的捲軸需要幾個步驟，除了要更改應用程式設定外，還需要運用facebook javascript sdk的setAutoResize function，在頁面載入之後執行重新設定iframe的尺寸來達到移除捲軸的目的，詳細的步驟如下:

1. 設定應用程式auto-resize模式

首先需要確定你的應用程式設定，先到facebook developer頁面，選取你的應用程式，點選編輯設定，然後看到 “Facebook 集成” 大項，裡面有一個 “IFrame 大小” 欄位，勾選 Auto-resize。

2. 載入facebook javascipt sdk

再來我們需要用到facebook javascript sdk裡面的autoresize功能, 利用javascript來動態移除捲軸, 先在<body>裡面輸入下列程式碼
<!--加入fb-root div-->
<div id="fb-root"></div>

<!-- 載入javascript sdk -->
<script src="http://connect.facebook.net/en_US/all.js"></script>

<!-- 初始化你的應用程式 -->
<script>
  FB.init({
    appId: 'YOUR appID',
    status: true,
    cookie: true,
    xfbml: true
  });
  FB.Canvas.setAutoResize(); // 呼叫setAutoResize function
</script>

3. 設定CSS

我們已經完成基本上的設定了，不過光作上面那兩步驟還是不太夠，如果你的內容寬度大於520px，還是會出現捲軸，所以我們需要再加上一些CSS設定來限制內容寬度。我個人的習慣是會把所有的內容都放到一個 “fbpage_wrapper” div容器裡面，我們只需要替”fbpage_wrapper”加上下列屬性即可:
.fbpage_wrapper{
  width:520px; /*set page width fit facebook page canvas*/
  overflow:hidden;
  margin:0;
  padding:0;
  border:0;
}
當然也可以直接加在上面或是用屬性的方式來定義 <div style=”width:520px;overflow:hidden;margin:0;padding:0;border:0;“> ，一樣都可行。如果你還是一直有捲軸出現，先查看javascript sdk是不是有順利載入，再來最常造成問題的就是內容的寬度，用fire bug好好確定有沒有元素的寬度超過520px，或是有padding、margin讓元素超過520px囉!
張貼者： 於

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)