IMUZA.com

<<WordPress(ConoHa)<<はてなブログ

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

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

2015/10/7 はてなブログ

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

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

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

  • Adsense の動的コード作成
  • ブログの好きな場所に挿入
  • はてなブログでの例
    • 記事タイトルの下に挿入 
    • 全ての記事タイトルの下に挿入

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:[]は半角ですが、表示で消えてしまいますので全角で入力しています。

【Windows10】Thinkpad E420 & BUFFALO Bluetooth マウスに苦しむ(未解決)
Joomla!(3)システムのアップデート
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2022/08/13

はてなブログProを解約したらエェ〜?!

2022/08/10

WordPress にプラグインなしで fancybox4 導入

2022/07/29

WordPressでiframeが表示されない(解決)

2022/07/14

WordPressのデータベースを入れ替える

2022/07/7

WordPress:テーマをゼロから作ってみる(3)

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript96
  • Joomla!88
  • Windows68
  • CSS62
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Wordpress38
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php19
  • Node.js18
  • SASS16
  • Ubuntu16
  • laravel415
  • Chrome10
  • cms-style10
  • iPhone9
  • genesis6
  • Git入門6
  • ConoHa WING5
  • Python4
  • Android4
  • SSD3
  • Docker3
  • スマートフォン3
  • Facebook3
  • Firefox3
  • 静的サイトジェネレーター3
  • Blankslate3
  • Mactype2
  • GitHub2
  • rails入門1
  • はてなブクマ1
  • Twitter1
  • 映画1
  • youtube1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Another Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2022 · IMUZA.com