はてなブログに AdSense インフィード広告を貼る

はてなブログにインフィード広告を貼る

さほどアクセスもないブログしか書いていませんが、せめてはてなブログの利用料くらいは広告でまかなえないかと Google AdSense を利用しています。その程度の意識ですので、つい最近まで１ページに３つまでとの制約がなくなったことも知りませんでした。

で、今回、「そんなには褒めないよ。映画評」をリニューアルした際にあらためて AdSense を見てみましたら、インフィード広告なるものがあります。はてなブログにもこれを貼れないかという話題です。

• インフィード広告とは？
• はてなブログには貼れないんじゃないの？
• AdSense インフィード広告をはてなブログに貼るスクリプト

インフィード広告とは？

インフィード広告 – AdSense ヘルプ

今更私がインフィード広告について説明することもありませんのでリンクを貼っておきます。要は、はてなで言えば、一覧表示のコンテンツの間に表示する広告という理解でいいと思います。

具体的には、記事の一覧表示 /archive やトップページを一覧表示にした場合に記事リストの間に記事と似たレイアウトで広告を挿入することができるというもののようです。

はてなブログには貼れないんじゃないの？

インフィード広告の作り方はググっていただければたくさんヒットしますので省略です。

で、それをはてなブログに貼ろうにも公式ではその方法が提供されていません。ならば、Javascript に頼るしかありません。

ですので、この方法は、AdSense のプログラムポリシーを遵守した方法なのかははっきりしていません。ですので、もしこのスクリプトを使われる場合でも自己責任でお願いします。

AdSense インフィード広告をはてなブログに貼るスクリプト

フッタに入れてください。

使っていただくのは自由ですがコードは転載しないでください。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(function(){
var adsScript = document.createElement("script");
adsScript.innerHTML = "(adsbygoogle = window.adsbygoogle || []).push({});";
// 以下それぞれ個別のデータを設定する
var google_ad_client = "ca-pub-****************";
var slot = **********;
var key = "**************";
// ここまで
var adsDiv = document.createElement("div");
adsDiv.innerHTML = '<ins class="adsbygoogle" style="display:block" data-ad-client="'
+ google_ad_client + '" data-ad-slot="'
+ slot + '" data-ad-format="fluid" data-ad-layout-key="'
+ key + '"></ins>';
adsDiv.appendChild(adsScript);
// css 設定用
adsDiv.classList.add("ads-infeed");
// 記事一覧ページの場合
// トップページなら page-index 
if(document.body.classList.contains("page-archive")){
var parentElement =document.getElementsByClassName("archive-entries")[0];
var j = parentElement.childElementCount;
// 5記事おきに入れる場合
for(var i=5; i<j; i=i+6) {
parentElement.insertBefore(adsDiv.cloneNode(true), parentElement.children[i]);
j++;
}
}
}());
</script>

うまくいけば、こうなるはずです。くれぐれも自己責任で。

（現在はインフィード広告は入れていません）

www.movieimpressions.com