Bloggerで記事の前後に広告を貼る

2014年7月31日木曜日

Bloggerで記事の前後に広告を貼る

Bloggerブログにて、記事の前と後ろに広告を挿入する場合のメモ。

テンプレートをバックアップ

万が一の為にまずはテンプレートをバックアップ。

Bloggerにログインしてブログを選択。

左列の「テンプレート」をクリック。
右上の「バックアップ/復元」をクリック。
「テンプレートをすべてダウンロード」をクリックして保存。

広告タグを取得

広告各社の管理ページによるので詳細操作は割愛。

記事直前用の広告タグと、記事直後用の広告タグを生成、取得。
テキストエディタに貼り付けてそれぞれ別途保存しておく。

広告タグをhtmlエンティティ文字に変換

広告タグをテキストエディタ上で一部文字変換する。

半角左カッコ < → <
半角右カッコ > → >
半角ダブルクォート " → "

これらの文字を（実質３種しかないと思う）上記の&で始まる文字列に文字列置き換えする。
置き換えたら再度それぞれを保存。

追記：変換しなくても良い場合もあるようです。変換しておけば間違いない感じかも。
追記：変換しなくても今は大丈夫な気配？

広告が３つを超えて表示してしまう対策

AdSense等で規定されている、同ページ内での広告表示数制限。
（広告会社によっては３つを超えても良いところもあるらしい）。

仮に記事が１０件表示された場合、その前後に広告が表示されると広告の表示数が３つを超えてしまう。

対策としては、

１ページに複数記事を表示している時は、記事前後の広告表示は無しとする。
単一記事が表示されている時は、記事前後に広告を表示する。

といった方法があるらしい。

今回はこの手法でやってみた。

テキストエディタで新規ファイルを１つ開き、以下のように編集する。

<b:if cond='data:blog.pageType == "item"'>
<p>
～～～ここに文字置換後の記事直前用広告タグを貼付～～～
<data:post.body/>
～～～ここに文字置換後の記事直後用広告タグを貼付～～～
</p>
<b:else/>
<p><data:post.body/></p>
</b:if>

この編集したテキストを貼り付けることになる。

追記：昨今はAdSenseや他広告各社も配信側で規定数以上は表示させない制御をかけているので、必須ではないかもしれないが、一応は念頭においておいたほうが無難(?)。

広告タグ貼り付け

Bloggerにログインしてブログを選択。

左列の「テンプレート」をクリック。
　
「HTMLの編集」をクリック。
　
<data:post.body/> を探す
<data:post.body/>は３つほど見つかる
３つのうちどこを修正するかはテンプレートにもよるらしい。
今回当方では、２番目に見つかった<data:post.body/>を削除し（2084行付近）、代わりに先程編集したテキストを貼り付けた。
　
自ブログを表示して確認。
うまくできていれば記事を１つ表示させた状態で、記事の前後に広告が表示されている。