(原創) 如何在Blog內任意處動態產生Google AdSense廣告? (Web) (CSS) (JavaScript)

Abstract
一般的Blog都會在兩側提供自由欄位,讓你可以輕易的將Google Adsense的JavaScript放上去,若想要在文章內文也放Google Adsense,難道得一篇一篇的Copy & Paste嗎?

Introduction
若以閱讀習慣來說,將廣告放在文章內文的成效較大,畢竟讀者注意的是文章內容,順著閱讀完後一定會看到廣告,但不見得會去注意網頁兩側的訊息。如果要每篇文章都得Copy & Paste那些Google Adsense的JavaScript,那就太麻煩了!!

本文利用JavaScript動態產生如下圖的Google Adsense廣告,經過測試,在IE6、IE7與FireFox 2顯示正常。
adsense00.gif
原本Google Adsense的JavaScript如下

 1 <script type="text/javascript"><!--
 2 google_ad_client = "pub-8345123166060053";
 3 /* 728x90, 已建立 2008/5/15 */
 4 google_ad_slot = "3609602782";
 5 google_ad_width = 715;
 6 google_ad_height = 90;
 7 //-->
 8 </script>
 9 <script type="text/javascript"
10 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
11 </script>


但因為我們沒有Blog的source code,而且多數的Blog的自由欄位只在左右兩側,除非我們將以上JavaScript手動貼到每篇文章之內,才可能將Google Adsense廣告放在Blog任何地方。

我們將以上JavaScript做一些修改

 1 <script type="text/javascript"><!--
 2 google_ad_client = "pub-8345123166060053";
 3 /* 728x90, 已建立 2008/5/15 */
 4 google_ad_slot = "3609602782";
 5 google_ad_width = 715;
 6 google_ad_height = 90;
 7 //-->
 8 </script>
 9 <div id="none_ads"  style="display:none">
10 <script type="text/javascript"
11 src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
12 </script>
13 </div>
14     
15 <script type="text/javascript">
16 = document.getElementById("AjaxHolder_UpdatePanel1");
17 if (c != null) {
18   div = document.getElementById("none_ads");
19   c.innerHTML = div.innerHTML + c.innerHTML;
20 }
21 </script>


以上的JavaScript基於兩個概念,利用這個方法,你可以將Google Adsense放在Blog內任何地方:
1.將產生廣告的JavaScript藏在一個看不見的<div>內。
2.找到你想要插入的HTML ID,將廣告插進去。

1 ~ 8行

<script type="text/javascript"><!--
google_ad_client 
= "pub-8345123166060053";
/* 728x90, 已建立 2008/5/15 */
google_ad_slot 
= "3609602782";
google_ad_width 
= 715;
google_ad_height 
= 90;
//-->
</script>


設定廣告的參數,google_ad_client與google_ad_slot這兩個變數不能改,若改了你就收不到錢了。但google_ad_width與google_ad_height設定的是廣告的寬度與高度,若預設的寬度與高度不適合你的網頁配置,可以自做適度的修改。

9 ~ 13行

<div id="none_ads"  style="display:none">
<script type="text/javascript"
src
="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


將Google Adsense的JavaScript藏在一個<div>內,由display:none這個CSS使<div>看不見,到時這段JavaScript會展開成為<iframe>的廣告內容。

15 ~ 21行

<script type="text/javascript">
= document.getElementById("AjaxHolder_UpdatePanel1");
if (c != null) {
  div 
= document.getElementById("none_ads");
  c.innerHTML 
= div.innerHTML + c.innerHTML;
}
</script>


由於我想將廣告放在AjaxHolder_UpdatePanel1這個<div>之前,所以使用getElementById()找到這個<div>,你可以使用Internet Explorer Developer Toolbar這個工具自行觀察要加入之處HTML的ID。

然後找到隱藏的none_ads這個<div>,由於我想將它放在AjaxHolder_UpdatePanel1之前,所以將隱藏<div>的innerHTML與原本的innerHTML相加,innerHTML是W3C的標準,所以可以安心使用,各瀏覽器皆支援。

之前曾在(原創) 如何為Blog加上簡體中文(繁體中文)翻譯? (Web) (CSS) (JavaScript)(原創) 為什麼W3C DOM不提供insertAfter? (Web) (JavaScript)討論將HTML插入到某個tag之前的方法,但這次發現使用innerHTML相加的方式,也可以簡單的達到這個要求。

Remark
在我實際測試時,發現若你的網頁中同時放置三個Google Adsense廣告,使用靜態Copy & Paste的JavaScript沒問題,若用動態JavaScript,則最後一個廣告可能會顯示不出來而呈現空白,詳細原因不明。

Conclusion
透過以上的方式,你也可以為自己的Blog內任意處動態產生Google Adsense廣告,不再只是侷限於Blog兩側。

See Also
(原創) 如何為Blog加上簡體中文(繁體中文)翻譯? (Web) (CSS) (JavaScript)
(原創) 為什麼W3C DOM不提供insertAfter? (Web) (JavaScript)

Reference
簡睿隨筆不用再一篇一篇剪貼了:在文章內文動態產生google AdSense的廣告
超苦的Ga[JavaScript] 把Google Adsense放到Header Banner
Internet Explorer Developer Toolbar

posted on 2008-05-17 17:55  真 OO无双  阅读(2268)  评论(6编辑  收藏  举报

导航