rcmdnk's blog

20141215_socialbuttons_200_200

ソーシャルボタンを自作に変更 で作った自作ボタンだと はてなブックマークの数がhttpsで接続するような場合だと 取得出来なかったのでその部分を改良。

Sponsored Links

改良版はてなブックマークボタン

はてなブックマークのAPIはhttpsでの接続が出来ないので、

//api.b.st-hatena.com/entry.count&url=...

みたいにしておいてページと同じプロトコルを使おうと思っても httpsのページからだと上手く行きません。

そこで、 ソーシャルボタンを自作に変更 の中でもPocket等の数を取得するのに使った YQLというサービスを中継して取ってきます。

httpの場合は直接取ってきて、httpsの場合だけ経由して取るようにすると、 下の様な感じ。 if('https:' == document.location.protocol){ のブロックの部分が追加された箇所です。

はてなブックマークのAPIは数だけを返すので data.query.results.resources.contentを直接見てあげればOK。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var socialCount = function (social, cname, url) {
  var vname = cname.replace(/-/g, "");
  if((new Function('return (typeof ' + vname + '!= "undefined");'))())return;
  (new Function('window.' + vname + ' = "defined";'))();
  url = (url)? encodeURI(url): encodeURI(location.href);
  socialData = {
    type: 'GET',
    dataType: 'jsonp',
    data: {noncache: new Date().getTime()},
    always: function(data) {
      timing.end = (new Date()).getTime();
      var t = timing.end - timing.start;
      ga('send', 'timing', 'social', social,  t);
    }
  };
  if(social == 'hatebu'){
    if('https:' == document.location.protocol){
      socialData.url = "//query.yahooapis.com/v1/public/yql";
      socialData.data.q = "SELECT content FROM data.headers WHERE url='http://api.b.st-hatena.com/entry.count?url=" + url + "'";
      socialData.data.format = "text";
      socialData.data.env = "http://datatables.org/alltables.env";
      socialData.success = function (data) {
        $('.' + cname).text(data.query.results.resources.content||0);
      };
    }else{
      socialData.url = 'http://api.b.st-hatena.com/entry.count';
      socialData.data.url = url;
      socialData.success = function(data){
        $('.' + cname).text(data||0);
      };
    }
  }else {
    return;
  }
  $.ajax(socialData);
  $('.' + cname).on('click', function() {
      ga('send', 'event', 'button', 'click', cname);
  });
}

このJavaScriptを読み込んでおいて

1
2
3
4
5
6
7
8
9
10
<div class="share-button">
  <ul>
    <li><a href="http://b.hatena.ne.jp/entry/http://rcmdnk.github.io/blog/2014/12/15/blog-octopress/"
    title="Save to Hatebu"
    target="_blank"><p class="hatebu_custom" >B! <span class="hatebuCountblog-2014-12-15-blog-octopress"></span></p></a></li>
  </ul>
</div>
<script type="text/javascript">
socialCount('hatebu', 'hatebuCountblog-2014-12-15-blog-octopress', 'http://rcmdnk.github.io/blog/2014/12/15/blog-octopress/');
</script>

等とすれば数が取ってこれます。

ただ、はてなブックマークではhttpなページとhttpsなページを別物として カウントするので、 上の様に書いておくと常にhttpなページのカウント数になります。

その辺はもう好き好きで設定するということで。

Sponsored Links
Sponsored Links

« JavaScriptをasyncで読み込むについて はてなブックマークの人気リストを自作&httpsでも出来るようにする »