ビジョンミッション成長ブログ

ビジネス書や仕事術、iPhone、iPad、Mac、Apple Watch、Android、Xperiaの情報などを紹介。ビジョンやミッションを持って成長していくために参考になることを書いています。

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

以前書いた記事がわかりにくいので、必要な部分だけまとめます。

 

はてなブログの読者数の数字を、独自の「読者になる」ボタンに表示させたいですよね?そうでもない人は、そうでもないのかもしれませんが、わたしは表示させたかったんですよね。

ということで、その方法です。

 

基本的にコピペでできるはずですが、CSSやHTML、Javascriptがわからないとできないというのもあるかもしれません。ノークレーム、ノーサポートでお願いします。

 

こんなのも作ったので、必要な方はどうぞ

「iPhoneアプリサーチ to HTMLコード」を作成しました。ブログなどでアプリの紹介をするためのHTMLコードを取得

「はてなブログカード」のiframeなしを作りました。リンクになるのと、WordPressのエディタでも使えるのが良いところかと

 

はてなブログの読者数

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

はてなブログの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のようなものを公開してくれると良いのですが。わたしが知らないだけであるのかはわかりませんが。

フォロー・読者登録する