分類：網頁開發

以 iframe 解決 BloggerAds 部落格廣告載入卡住、拖慢網頁的問題

以華人的部落格來說，主要的廣告商除了 Google 龍頭的 AdSense 之外，就屬 BloggerAds 與 BlogAD 最普遍，而 BloggerAds 也是我的部落格常會放置的廣告，但是 BloggerAds 最令人詬病的一點就是，當網頁載入時，因為 BloggerAds 的 JavaScript 載入速度很慢（可能是因為 BloggerAds 的伺服器的問題），導致網頁中所有放在 BloggerAds 之後的東西都出不來。

而網路上大都會建議把 BloggerAds 放在網頁 HTML 程式碼的最後面，但是這樣也會造成一些動態載入的小工具（如 Google+ 的按鈕等）出不來，之前一度受不了它的速度，還直接把他拿掉。

後來參考了 WFU 的作法，使用 iframe 加上一些技巧，成功地解決這個問題，使用這樣的方式即便 BloggerAds 當掉了，也不會影響到整個網頁地呈現。

Step 1
首先連到 BloggerAds 「帳戶資料」中的「取得廣告程式碼」。

Step 2
設定部落格的廣告，在設定時要注意自己使用的廣告規格，也就是大小是多大，這裡我們以 180×1100 的大小作為示範，下面的步驟會跟這個大小有關。

Step 3
接著下方會產生這個廣告用的 JavaScript 程式碼：

我來看這個程式碼，其實最主要的關鍵就是 blogid 這個參數：

<script type="text/javascript" src="http://js1.bloggerads.net/showads.aspx?blogid=20120926000019&w=1&charset=utf-8"></script>

就我的推測，大家的 BloggerAds 程式碼應該都一樣，只是差在 blogid 不同而已，所以大家在貼程式碼時，就把這個部分換成自己的就可以了。（應該是這樣啦，至少我都是這樣做的，如果有人失敗在跟我說吧）

Step 4
接著就把下面這些程式碼複製到記事本（或是任何你喜歡的編輯器）上，然後要進行一些修改。

<iframe id='bloggerAds1' scrolling='no' frameborder='0' allowtransparency='true' style='height: 900px; width: 190px;'></iframe>
<script>
(function() {
  var a = document.getElementById("bloggerAds1"),
      b = a.contentDocument || a.contentWindow.document;
  b.write('<scr' + 'ipt type="text/javascript" src="http://js1.bloggerads.net/showads.aspx?blogid=20120926000019&w=1&charset=utf-8"></scr' + 'ipt>');
} )();
</script>

基本上有顏色的地方就是要可能需要修改的地方：

紅色：這個部分就是剛剛上面講的 blogid，這個是一定要改的！就把他換成自己的 blogid 就可以了。
藍色：由程式中可以發現有兩個藍色的 bloggerAds1，基本上這只是給廣告組件取一個名字而已，隨便去基本上都可以，但是其中兩個藍色的部分都要相同才行，建議是如果你的部落格只有放一個 BloggerAds 廣告，這個就不用改了。而如果放置兩個以上的廣告單元，第一個廣告就用 bloggerAds1、第二個廣告就改為 bloggerAds2，以此類推，這樣命名比較單純。
橘色：這個就是設定 iframe 的大小，width 是寬度，height 是高度，通常要設定比廣告的大小要大一些，才不會把廣告遮住，所以請參考上面設定廣告時，所選擇的大小（不過 BloggerAds 很奇怪，明明廣告高度是寫 1100 像素，但是實際顯示出來卻只有不到 900 像素，所以我門這裡就設為 900）。