読者です 読者をやめる 読者になる 読者になる

IMUZA.com

Joomla!によるウェブ制作, PHP, Javascript, CSS

はてなブログ

はてなブログ テーマ制作
・とことこ with Menubar
・Simple Responsive with Menubar
・Mobile-First Responsive
・Hyperspace

Joomla!

Joomla! によるウェブ制作
・テンプレート自作
・モジュール自作
・Joomla!でサイト構築

Web Tips

ウェブサイトづくりに役立つかも
・Javascript
・CSS

Windows, Linux

Windows10
Plamo Linux

Adsense を Javascript で動的に作成し、ブログの好きな場所に挿入する

はてなブログ

2016/4/13一部文章を削除してしまったのか、中途半端に始まっているようです)

その他 index ページの記事中に入れられないとか、本文中に入れようとすると毎回コードをコピペしなくてはいけないとか結構面倒なものです。

で、全て Javascript でできないかと試してみました。

Adsense の動的コード作成

レスポンシブのコードを見てみます。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-XXX"
data-ad-slot="XXX"
data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({}); *1
</script>

まずこのコードを document.createElement() を使って動的に作ります。

var elmDiv = document.createElement('div');
var spsLink = document.createElement('div');
 spsLink.innerHTML = 'スポンサーリンク';
elmDiv.appendChild(spsLink);

var adsScr = document.createElement('script');
 adsScr.async = true;
 adsScr.src = '//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';

var adsIns = document.createElement('ins');
 adsIns.className = 'adsbygoogle';
 adsIns.style.display = 'block';
/* XXX は置き換えてください */
 adsIns.dataset.adClient = 'ca-pub-XXX';
 adsIns.dataset.adSlot= 'XXX';
 adsIns.dataset.adFormat = 'auto';

var adsGgl = document.createElement('script');
/* []は半角に置き換えてください */
 adsGgl.text = '(adsbygoogle = window.adsbygoogle || []).push({});';
elmDiv.appendChild(adsScr);
elmDiv.appendChild(adsIns);
elmDiv.appendChild(adsGgl);

これで Adsense の DOM オブジェクトができました。

div エレメントにクラス名を付けたい場合は次のようにすればOKです。

elmDiv.setAttribute('class', 'クラス名');

ブログの好きな場所に挿入

できた DOM オブジェクトを任意の場所に挿入するには、次のいずれかを使えばどこにでも入れられそうです。

  • 親ノード .insertBefore(追加ノード, 元となるノード)
  • 親ノード .insertBefore(追加ノード, 元となるノード .nextSibling)
  • 親ノード .insertBefore(追加ノード, 親ノード .firstChild)
  • 親ノード .insertBefore(追加ノード, 親ノード .children(No))
  • 親ノード .appendChild(追加ノード)

はてなブログでの例

記事タイトルの下に挿入 

target = document.querySelector('.entry-header');
target.appendChild(elmDiv);

全ての記事タイトルの下に挿入

targets = document.querySelectorAll('.entry-header');
for(var i=0; i<targets.length; i++) { targets[i].appendChild(elmDiv.cloneNode(true)); }

時間がなくなりましたので続きは次回です。 

*1:[]は半角ですが、表示で消えてしまいますので全角で入力しています。