(转载)如何在Blog內任意位置动态产生Google AdSense广告?

admin 发表于 [Javascript] 分类,标签: 编程技巧 网页布局
0

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

简介
若以閱讀習慣來說,將廣告放在文章內文的成效較大,畢竟讀者注意的是文章內容,順著閱讀完後一定會看到廣告,但不見得會去注意網頁兩側的訊息。如果要每篇文章都得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的標準,所以可以安心使用,各瀏覽器皆支援。

如果AjaxHolder_UpdatePanel1不是id属性而是class属性怎么办?如果是这样,你需要将上面代码修改为:

<script  type ="text/javascript">
function getElementsByClassName (className) {
   var all = document.all ? document.all : document.getElementsByTagName('*');
   var elements = new Array();
   for (var e = 0; e < all.length; e++) {
     if (all[e].className == className) {
        elements[elements.length] = all[e];
       break;
      }
    }
   return elements;
}
c = getElementsByClassName("AjaxHolder_UpdatePanel1")[0];
if  (c  !=   null ) {
  div  =  document.getElementById( "none_ads" );
  c.innerHTML  =  div.innerHTML  +  c.innerHTML;
}
</script>



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

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

发表我的评论