見出しのないはてなブログの文中にgoogleアドセンスを自動挿入する方法。

今日は技術話題をやろうかな。記事文中にgoogleアドセンスが挿入されているはずだ。これは自動的にpタグを数えて半分ぐらいの所に突っ込むようにしている。こいつをちょっと解説しておこう。

はてなブログでgoogleアドセンスを文中に挿入するカスタマイズは結構出回っている。だけど、大概の場合、見出しタグを数えてアドセンスを移動させるカスタマイズばかりだ。

english-apple-diy.hatenablog.com

【本当にコピペ一発！】はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログはてなブログで広告の本文中への自動挿入を実現できるこの記事、いろんな方に言及していただいて、コメント等をいただいて応用例を随時増やしてたりしております。でもですね、ずっと心配してたんですよ。みなさま、実はこんなことを思ってるんじゃないのかなって。コピペで簡単って！全然コピペで簡単じゃねえよ！scriptをscripにするというわけわからん手順はあるし、なかなかうまく動かねえし！応用例追加するのはいいんだけど、どの部分がどこのコードに対応してるのかよくわかんねえからカスタマイズできねんだよ。だれもがプログラマだと思ってんじゃねえってね。いや、みんなくちには出さないけどそう思ってるはずだ、…uxlayman.hatenablog.com

まぁ見出しをちゃんと使っているブログならばこれで対応できるのだろうが、僕のブログみたいに見出しをまったく使わないブログではこの方法では文中へのアドセンスの自動挿入ができない。

いや、実を言うと上で紹介した２番めのU太郎 (id:uxlayman)さんのフォームで色々と弄れば出来るっぽいんだけど、面倒くさいから自分でコード書き換えちゃった。jqueryとjavascriptを読める奴だったらそんなに難しい事をしているわけでもないから分かるはず。

だから正直言って技術的な話ではほぼほぼ、U太郎さんのコードをパクってきてちょろっと弄っただけなんだけど、自分用メモの意味で書き残しておこう。元のコードではentry-contentクラスのdivタグを数える様ににしてたからamazonのリンクカードとかblockquoteの中にアドセンスが飛んじゃってデザインが崩れていたんだ。だからちょっと微調整した。

参照にしたのはここ。

【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 - UXエンジニアになりたい人のブログ2017/1/26追記さらに楽をしたい方は以下の記事をご覧ください uxlayman.hatenablog.com uxlayman.hatenablog.com 上記記事は当ブログの密かな人気記事なのですが、どうも最近問題が発見されたようです。 http://www.toma-g.net/entry/kijinaka_yasuiwww.toma-g.net okanewofuyaso.hateblo.jp要は記事上下の広告を移動するスクリプト使う →(2重、もしくは多重カウントされて)アクティブビュー視認可能率が下がる →(みんなが見ない場所に貼られた広告だと判断されて)広告単価が下がると…uxlayman.hatenablog.com

ソースはこちら。

<script>
var adsenseCode = (function () {/*

<center><p>SPONSORED LINK</p></center>

// ここにGoogleアドセンスのコードを入れる

<p> </p>

*/}).toString().match(/\/\*([^]*)\*\//)[1].replace(/scrip>/g, 'script>');

addEventListener("DOMContentLoaded", function() {

    var $target = $('.entry-content blockquote,.entry-content p').not('.entry-content blockquote>p');
    $target.eq(Math.floor($target.size() / 2)).before($('.insentense-adsense'));

    $('.insentense-adsense').html(adsenseCode);
}, false);
</script>
<div class="insentense-adsense"></div>

ちなみにコメントアウトされた所にいれるGoogleアドセンスのコードは/scriptを/scripに書き換えないといけない。こりゃヒアドキュメントを置換して実行するスクリプトに置き換えている為に必要な作業。そのままコードを入れると実行されない。

コードを記述する場所は

デザイン設定 > カスタマイズ > 記事 > 記事上下のカスタマイズ > 記事上のフォーム

ちなみにある程度はてなブログのカスタマイズを分かっている人を前提で話しているけど、メモ帳なりにバックアップを取りながら編集しないと痛い目にあうぞ？　他のカスタマイズなども入れているとデフォルトのブラウザのエディターだけでは編集しにくいはずだ。

まぁ、前述したけど大した変更はしていない。僕のブログに合わせてタグの読み込み方を変更しただけだ。

var $target = $('.entry-content blockquote,.entry-content p').not('.entry-content blockquote>p');

ここの部分のみ変更。entry-contentクラスのblockquoteタグからpタグの順番で読むようにしただけ。U太郎さんのサンプルではpタグとdivタグを読み込むようにしてたから、引用の中にまでアドセンスが挿入されるようになってたのよね。だからちょっとだけ書き換えた。この箇所を変更したら色んな所に応用できると思う。

というか、自分用メモなのでこれをコピペして動かないって言われても責任持たない。ある程度、javascriptとjqueryを読める人だったらそんなに難しいコードでもないだろ。はてなブログの文中へのアドセンス自動挿入は沢山記事があるけど、見出しのない場合の情報が殆どなかったから書いておいた。ヒントにして色々と書き換えてみてtry&errorで対応してください。

ソースを参考にしたU太郎さんには多謝を m(_ _)m

スクレイピングで使えそうなライブラリを見つけた。 - 超メモ帳（Web式）＠復活 Google Feed API廃止対応、はてなブログ最新記事モジュール、ブクマが付いた記事モジュールを作った。 - 超メモ帳（Web式）＠復活はてなブログのカスタマイズなんかを説明しようかな。 - 超メモ帳（Web式）＠復活