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

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

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

Traffic Jam 塞車

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

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


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


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)。

Step 5
最後就把修改完成的程式碼貼上部落格就可以了。如果是 Google 的 Blogger 部落格,可以使用 HTML/JavaScript 小工具:


本站已經搬家了,欲查看最新的文章,請至 G. T. Wang 新網站