如果你有申請 Google Adsense,你會將廣告投放在網頁中什麼地方?側邊欄嗎?由於網友們瀏覽網頁時都是看文章內容,不見得會注意到側邊欄的廣告,把廣告放在文章結束的地方是再好不過了。我在網路上找到了許多的方法,寫法有千千百百種,但方法大致上都是一樣的:用 Javascript 把 google adsense 的 ad code 放到某個 div 區塊中。

  像是使用 getElementById 來取得 div id 的名稱,再用 innerHTML 將 ad code 置入這個區塊(參考資料)。但由於痞客邦的文章內文的 div 是 class 屬性,無法使用 getElementById 來取得區塊,而且 Javascript 也沒有 getElementByClass 這個方法,雖然有個外國人寫了一個 getElementByClass 的 function ,但實際應用在痞客邦時,不知道是不是跟痞客邦的程式有相衝,也無法使用。

  既然無法用純 Javascript 來達成功能(不是不能,應該是說我的程式功力有限),那我們何不利用 jQuery 強大的選擇器來選取 class 區塊呢?

方法如下:

1.先到你的 google page creator 裡上載一張網頁,這張網頁的內容為:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<!--這裡放置Adsense ad code-->
</body>
</html>

內容愈簡單愈好!

2.然後到痞客邦後台的自由欄位中,貼上以下程式碼:

<script>
jQuery(document).ready(function($){
$(".bookmark").next().append("<iframe style=\"width:468px; height:60px; position:static;\" scrolling=\"no\" frameborder=\"0\" marginheight=\"0\" marginwidth=\"0\" src=\"廣告頁面的網址\"></iframe>")
;})
</script>
width(寬)、height(高)的值請依廣告的大小來設置。



後記:

我很取巧地把廣告內容放在 iframe 裡,再用 jQuery 把這個 iframe 置入 .bookmark 的下一個元素中,也就是文章內文的下面。至於為什麼不直接置入 ad code,要透過 iframe 來置入?那是因為如果直接將 ad code 置入,網頁會讀取一片空白,為什麼會這樣…以我的能力來說目前還是無解,如果網路上有高手知道為什麼請告訴我…

注意:

千萬不要直接將廣告放置在 .article-content 中,因為這會違反 google adsense 的規則 - 一個頁面只能放置一個 iframe 廣告

bshadow 發表在 痞客邦 PIXNET 留言(0) 人氣()