2009年1月23日金曜日

Google Blogger で記事上と記事下に AdSense を挿入する

Google Blogger で記事上と記事下に AdSense を挿入する追記機能を導入していて、追記(続きを読む)がクリックされたときにGoogle AdSense 広告が記事上(タイトル直下)と記事下の2箇所に表示されるように AdSense タグを挿入します。

追記がクリックされた状態というのは全文表示されている状態で、例えば検索エンジンやソーシャルブックマーク経由で個別のエントリー記事が直接開かれた状態のことです。

繰り返しますが、記事上下に2つアドセンス広告を挿入する方法は追記機能を導入していることが前提となります。追記を導入していないときは、トップページではアドセンス広告を表示しないでエントリー記事が開かれたときだけアドセンス広告を表示する方法を参考にして、エントリー記事以外ではアドセンス広告を非表示にするようにカスタマイズしてください。

今回ご紹介するやり方は、エントリー記事全体が表示されたときに記事上と記事下の2箇所にアドセンス広告が表示できることです。上の挿入方法は記事下1箇所に挿入されるだけです。

まずは実装するための環境整理から。
  • Google Blogger にはない追記機能(続きを読む)を実装しておきます[参照記事]
  • AdSenseタグをエンティティ文字に変換する方法を確認しておきます[参照記事]
  • 記事上、記事下にアドセンス広告を表示するコードをHTMLに挿入します

追記が実装されていないとトップページで表示される記事にアドセンス広告が表示されますから、アドセンスプログラムポリシーに抵触しないよう表示記事数をコントロールする必要があります。
追記を導入せずに記事本体に AdSense タグを貼り付ける場合は別の方法で対応することもできますが、ここでは追記機能を導入したという前提で解説します。

記事上と記事下の2箇所にアドセンス広告を表示させるためのコード

<b:if cond='data:blog.pageType == "item"'> <p> [記事上のAdsenseタグ] <data:post.body/> [記事下のAdsenseタグ] </p> <b:else/> <p><data:post.body/></p> </b:if>

これは1行目の pageType(ページタイプ)が item (個別エントリー記事)だった場合は、<b:else/> の前に記述された記事上・記事下にアドセンスタグを配置した <data:post.body/> (記事本文)を採用し、それ以外だった場合はアドセンスタグの配置していない <data:post.body/> を採用しなさいという条件式です。

[記事上のAdsenseタグ] の行と [記事下のAdsenseタグ] の行にアドセンスタグを貼り付けます。
記事上はタイトル直下のことで、よく見られるのがレクタングル(大)(336 x 280) もしくは ハーフバナー (468 x 60) のアドセンス広告です。
記事下はレクタングル(大)やレクタングル(中)(300 x 250)などがよく見られます。

ここでは、記事上、記事下ともにレクタングル(大)を挿入してみることにします。
以下のコードは前述のコードも含めて全てHTMLエンティティ文字に変換した後のコードです。
<b:if cond='data:blog.pageType == "item"'> <p> &lt;script type=&quot;text/javascript&quot;&gt;&lt;!-- google_ad_client = &quot;pub-nnnnnnnnnnnnnnnn&quot;; google_ad_slot = &quot;nnnnnnnnnn&quot;;google_ad_width = 336;google_ad_height = 280;//--&gt;&lt;/script&gt; &lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt; <data:post.body/> &lt;script type=&quot;text/javascript&quot;&gt;&lt;!-- google_ad_client = &quot;pub-nnnnnnnnnnnnnnnn&quot;; google_ad_slot = &quot;nnnnnnnnnn&quot;; google_ad_width = 336; google_ad_height = 280; //--&gt; &lt;/script&gt; &lt;script src=&quot;http://pagead2.googlesyndication.com/pagead/show_ads.js&quot; type=&quot;text/javascript&quot;&gt; &lt;/script&gt; </p> <b:else/> <p><data:post.body/></p> </b:if>

以上で、記事上下に AdSense タグを挿入するコードの準備ができました。

コードをHTMLコードに貼り付け


1. 管理者でログイン
2. レイアウトタブから「HTMLの編集」タブを選択
3. 「ウィジェットのテンプレートを展開」のチェックボックスをON

下記の記述を検索します。
<data:post.body/>

作成した記事上下 AdSenseタグ挿入コードで、この1行を上書きして置き換えます。
もし、<data:post.body/> の記述が <p><data:post.body/></p> のように、Pタグで囲まれているようだったら、Pタグを含めて上書きして構いません。上記のアドセンスタグのコードには P タグも含まれています。

参考記事
Google AdSenseタグをHTMLエンティティ文字に変換
個別エントリー記事が開かれたきだけ AdSense 広告を表示する

0 コメント:

コメントを投稿

 
Copyright © 2008-. Google BloggerブログHacks Tips Tweaks - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger . Google