IMUZA.com

Xserver<<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で送る

最初のサイドバー

最新記事

2023/03/21

WordPress:メール送信にGmailのSMTPを使う(プラグインなし)

2023/03/10

WordPress:サムネイル付き次の記事/前の記事

2023/02/28

Twitterシェアリンクはintent/tweetを使おう

2023/02/21

GoogleタグマネージャーとアナリティクスGA4

2023/02/8

WordPress:人気記事を直近の期間指定で表示する

最新記事を一覧で見る

よく読まれている記事

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

カテゴリー

  • はてなブログ214
  • WebTips109
  • javascript98
  • Joomla!88
  • Windows68
  • Wordpress65
  • CSS63
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Google34
  • Plamo33
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • ConoHa WING6
  • Git入門6
  • genesis6
  • Python5
  • Android5
  • PC全般4
  • Facebook4
  • スマートフォン4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Blankslate3
  • Docker3
  • Twitter2
  • GitHub2
  • Mactype2
  • はてなブクマ1
  • 映画1
  • youtube1
  • rails入門1
  • Xserver1

Footer

My Web Sites

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

Related Sites

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

Contact Us

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

Copyright © 2023 · IMUZA.com