「X分で読めるよ」のブログパーツ作ったよー！

サイトの滞在時間を13.8%伸ばすブログパーツです

参考画像


元ネタ
たった一行追加するだけでサイトの滞在時間を13.8%伸ばす方法･･･ - IDEA*IDEA ～ 百式管理人のライフハックブログ
これのリンク先を読んだり、カヤックさんの所のエントリを読んだりして、PHPとかに手を入れなくてもなんとかする方法を考えてみた。
ぶっちゃけ、javascriptで出来るんじゃないかなぁと思って書いてみた

導入の仕方

Bloggerの方は、以下のコードをコピペするだけ

<script type="text/javascript">
_ncounter_target = 'entry-content';
</script>
<script type='text/javascript' src='http://sites.google.com/site/mksdcom/Home/ncounter-min.js' charset='UTF-8' ></script>

はてなダイアリーの人だったら、_ncounter_targetを「section」にすれば良いかもね。
Livedoorブログの人だったら、_ncounter_targetを「main」にすれば良いかもね。

デフォルトだと、デザインが適用されていないので、非常にしょぼいです。
texts_counterってクラス名を付けているので、それにCSSを適用すると幸せになれるかもしれません。
ちなみに、このブログは以下のCSSを適用しています。

.texts_counter {
  display: block;
  padding: 3px 0px;
  border-bottom: 1px solid #dddddd;
  margin: 0px 0px 0.5em 0px;
}

対応ブラウザ

Opera、Firefox、Google Chrome、Safariに加え、レガシーブラウザであるInternetExplorerにも対応しています。
IE6でも多分、動く。動作確認してないけど(面倒だから)

ソースコード

圧縮してないソースはこっちです。
短いのでさくっと読めると思います。

(function(d){
  var message = { readit : '分で読めるよ' };
  load(); //entry

  function load(){
    if( d.addEventListener ){
      d.addEventListener('DOMContentLoaded',function(){ init(); }, false );
    }else{
      try{
        d.documentElement.doScroll("left");
      }catch( error ){
        setTimeout( arguments.callee, 0 );
        return;
      }
      init();
    }
  }

  function init(){
    var target = d.getElementById(_ncounter_target);
    if( !target ){
      if( d.getElementsByClassName ){
        target = d.getElementsByClassName(_ncounter_target);
      }else{
        var nodes = d.getElementsByTagName('*');
        target = [];
        for( var i=nodes.length; i-- > 0; ){
          if( nodes[i].className == _ncounter_target ){
            target.push(nodes[i]);
          }
        }
      }
      if( !target ){
        return;
      }
      for( var i=target.length; i-- > 0; ){
        add_readit(target[i]);
      }
    }else{
      add_readit(target);
    }
  }

  function add_readit(node){
    var n = count_text(node);
    if( n == 0 ) n++;
    var counter = d.createElement('span');
    counter.className = 'texts_counter';
    counter.appendChild(d.createTextNode(n+message.readit));
    node.insertBefore( counter, node.firstChild );
  }

  function count_text(node){
    var text = node.textContent || node.innerHTML;
    return parseInt(text.length/400);
  }
})(document);

ライセンスはPublic Domainなので自由に改変、配布してください。