jQuery｜在痞客邦部落格文章內置入Google Adsense (1)（透過iframe） @ 發卡布洛

如果你有申請 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 廣告。