(原創) 如何在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无双 阅读(1323) 评论(6) 编辑 收藏

评论

#1楼 2008-05-18 23:51 test123221231231231243234[未注册用户]

支持一下,兄弟,你是台湾省的呀?  回复 引用   

#2楼[楼主] 2008-05-18 23:57 真 OO无双      

@test123221231231231243234
是的
我是台灣省的
 回复 引用 查看   

#3楼 2008-07-28 23:22 petitlen[未注册用户]

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

为什么我要在js中加入window.alert('aa');才能显示广告呢?不加这句似乎没有触发,显示不了
 回复 引用   

#4楼 2008-07-28 23:45 petitlen[未注册用户]

没有window.alert()时,c is null!!!
如何处理使c初始好,再调用呢?
 回复 引用   

#5楼[楼主] 2008-07-29 00:06 真 OO无双      

@petitlen
那就很詭異了
你可以看我的source code
我沒有加alert()
 回复 引用 查看   

#6楼[楼主] 2008-07-29 00:07 真 OO无双      

@petitlen
我想起來了
你是不是頁面還有放其他的google adsense?
 回复 引用 查看   

导航

公告

emblem-2010

first2009-011

我是一個小小的數位IC工程師,從事SOC IP開發,業餘則喜歡研究FPGA、Embedded System、OS、MFC、NET與OOP相關技術。我並不是靠寫Blog或寫書維生,只是記下來怕自己忘記,所以不加任何廣告。所有文章與程式碼歡迎轉載使用。

昵称:真 OO无双
园龄:5年4个月
粉丝:281
关注:0

随笔分类(2100)