はてなブログの読者数の数字を、独自の「読者になる」ボタンに表示させる方法、いくつか。JQueryなど

はてなブログで、ソーシャルボタンのような感じで、はてなブログの読者数を表示させたいなと思っていました。独自の「読者になる」ボタンなどに、読者数の数字を表示させたいわけです。

一応、以前から、このブログなどでは表示させているのですが、この方法だとPHPを使っているので、レンタルサーバーがないとできないので、別の方法・JQueryも探していました。最近できたので、公開してみようかなと思います。

といっても、需要があるのかわかりませんし、表示はできますが、いろいろとどうなのだろうと思うところもあるので、使用される場合は、ノークレーム・ノーサポートでお願いします。

要は、自己責任でということですね。

CSSやHTMLがわからない人は、やめたほうが良いかもしれません。

あと、一応書いておきますが、私は、プログラマーでもデザイナーでもないので、これがプログラムとしてなど良いのかどうかは、まあよくはわかりませんので、ご了承ください。

（あと、ページを一度読み込んでかき出すので負荷がかかるので公開して良いのかなと思っていました。はてなのサポートに聞いてみたところ、悪意のないコードなら良いらしいです。負荷が増えたら、非公開にされることもあるようですが。）

なぜ、公開するかというと、APIのようなものをはてなブログで公開してほしいからですね。多分、今のところないと思うので。

あと、今後も、使えるかはわかりません。

それと、はてなブログの読者を増やしたいなら、以下の記事をどうぞ。

はてなブログの読者を増やす10の方法まとめ【初心者向け】

はてなブログの読者数の数字を、独自の「読者になる」ボタンに表示させる方法、いくつか。JQueryなど

 「読者になるボタン」

 普通にというか、はてなブログで公開されているものとしたら、「設定」の「詳細」から「読者になるボタン」のコードをコピペすると、「読者になる」と「数字」が、以下のように表示されますね。

<iframe src="https://blog.hatena.ne.jp/kobabiz/visionmission.hatenablog.com/subscribe/iframe" width="150" height="28" frameborder="0" scrolling="no"></iframe>

これで良いなら、まあこれでも良いのですが、この読者の数字を、CSSなどで作った「読者になる」などのボタンに表示させたいわけです。

このままではできないので、工夫が必要になってきます。で、いくつか考えられる方法があるわけですが、一つは、JQueryですね。

JQueryで、はてなブログの読者数を表示させる

JQueryのコード

JQueryのコードは以下です。jquery.comの部分は、すでに他で使ってる人は不要かなと思います。

このコードを、はてなブログの「フッタ」か「ヘッダ」に貼り付けるわけですが、「はてなブログの読者登録ページのURL」には、自分のブログの読者登録ページのURLを入れます。

このブログの場合だと、「https://blog.hatena.ne.jp/kobabiz/visionmission.hatenablog.com/subscribe」ですね。

どこになるのかわからないという人は、上の「読者になるボタン」のsrcに入っているアドレスの、「/iframe」を外したものです。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">

  function getHatenaDokushaCount(url, selcter) {
    jQuery.ajax({
      type: "get", dataType: "xml",
      url: "http://query.yahooapis.com/v1/public/yql",
      data: {
        q: "SELECT content FROM data.headers WHERE url='" + url +"' and ua='#Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36'",
        format: "xml",
        env: "http://datatables.org/alltables.env"
      },
      success: function (data) {
        var content = jQuery(data).find("content").text();
        var match = content.match(/<span class="number">(\d+)<\/span>/i);
        var count = (match != null) ? match[1] : 0;

        jQuery( selcter ).text(count);
      }
    });
  }

  $(function(){
    getHatenaDokushaCount('はてなブログの読者登録ページのURL', '.hatena-dokusha-count');
  });

</script>

HTMLのコード

そして、以下のコードを、ブログの「デザイン」で表示させたいところに貼り付ければ、そこに読者数が表示されますね。（以下のコードは、はてなブログでよく使用されている、ソーシャルボタンのものと同じような感じにしています。）

<span class="hatena-dokusha-count"><i class="fa fa-spinner fa-spin"></i></span>

こんな感じです。（機能していないとしたら、「表示されない？」が出ているはず）

表示されない？

うまくできて表示されているとしたら、数字が出てきてるはずです。表示されていないとしたら、Javascrpitがオンになっていないか、今後表示されなくなったということかもしれません。

早速、表示されなくなったので、別の方法を以下に書いています。

ちなみに、記事の中で貼りたいときは、上のコードを記事中にそのまま貼っても表示されないと思うので、こんなコードで貼ると、読者数のところが数字に変わるはずです。

<p class="hatena-dokusha-count">読者数</p>

上のコードで何をしているのか

上のJQueryで何をしているのか。JQueryがわかる人にはわかると思いますが、一応何をしているかを説明しておきます。

「はてなブログの読者登録ページ」に表示されている読者数をとってきたいわけですが、Javascriptだと、別のドメインだと基本的に読み込めない（クロスドメインの制約）ので、yqlを使って、テーブルにして、xmlで、読者数の数字を取ってくるということをしているわけですね。

あとは、該当の箇所に、JQueryで読者数の数字を表示させているということです。

って、わかる人にはわかるだろうと思いますが、わからない人にはわからないですよね。

要は、「はてなブログの読者登録ページ」を一度読み込んで、そこの該当箇所（読者数）を抜き出してくるということです。

他のソーシャルボタンも、APIが公開されているとしても、基本的には、考え方は同じだろうと思います。方法が、微妙に違うというのはあるでしょうけれど。

例えば、このサイトだと、Feedlyは、借りているレンタルサーバのPHPを使って、APIから読者数を持ってきています。

どうもFeedlyは、アクセスが多くなると、読者数を返さなくなるので、キャッシュしたいのでPHPを使っています。って、もっと良い方法もあるのかもしれませんが、PHPはなんとなくわかるので、そうしています。

早速使えないので、どうするか

で、上のコードなのですが、早速使えないですね。

YQLが何か変わったようです。

なので、別の方法というか、違うところから読者数をとってくるようにしようかなあと。

はてなブログのaboutのページから

このブログについて - ビジョンミッション成長ブログ

http://www.visionseichou.com/about

はてなブログには、aboutというページがあります。

自分のブログのURLに「/about」をつければ表示されます。

そして、そこに、ブログの購読者数を表示させることができます。表示されていない場合は、管理画面の設定から、「aboutページ」で「読者」を表示させることができます。

ちなみに、aboutページは編集できるので、編集してみると良いですね。

このページは、自分のサイト・URLなので、ここの人数を持ってくることにします。 

JQuery 

JQueryのコードは以下ですね。「ブログのURL」は自分のブログのURLに変えてください。これを、はてなブログの「デザイン」から「フッタ」などに貼り付けます。パソコン、スマホ両方に貼ってください。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  <script>
  $(function() {

    $.ajax({
        url: 'http://ブログのURL/about',
        success: function(data) {
          var sam =  $(data).find('.about-subscription-count').text();
            $('.dokushasuu').html(sam);
        }
    });
	
	});
</script>

HTML

HTMLは以下ですね。表示させたい部分に、class="doukushasuu"を入れれば表示されるはずです。

<span class="dokushasuu"></span>

以下のような感じに表示されるはず。

表示されない？

この方法だと、「○○ 人」と「人」がついてしまいますが。表示はされるはず。

「表示されない？」と出ていたら、使えなくなっていますね。

あとは、これを、自分が使っているボタンなどに入れてあげれば読者数の数字が表示されますね。

読者になる　表示されない？

独自のボタンで、はてなブログの読者数を表示させたい人がどれだけいるのかわかりませんが、使いたい人は使ってみてください。

繰り返しになりますが、ノークレーム・ノーサポートなので、自己責任でお願いします。

あと、もっといい方法があるなら、誰か作ってください。はてなブログというかはてな界隈は、プログラマーの方はたくさんいると思うので、もっといい感じにできるのではないかなと思います。ということで、誰か作ってくれないかなと思って、今回公開して、記事にしてみました。

それと、はてなさんが公式に、読者数を表示するAPIのようなものを公開してくれると良いのですが。わたしが知らないだけであるのかはわかりませんが。

フォロー・読者登録する

• Feedly
• はてな
• Facebook
• Twitter