(原創) 如何在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顯示正常。

原本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 c = 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">
c = 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