rcmdnk's blog
Last update

20150608_facebook_200_200

ソーシャルボタンを自作に変更 の所でソーシャルボタンをJavaScriptを使って取ってくる様なのを 自分で書くようにしてるのですが、Facebookのカウント数取得が このままだと上手くいかないこともあるようなので改善。

Sponsored Links

これまでのFacebookのカウント数取得数

追記: 2016/08/22

API仕様が変更されたので現在は取り方がちょっと下の物と違っています。 上のポスト参照。 (sharesshare.share_count)

追記ここまで

ソーシャルボタンを自作に変更 の所でやったように、数は

http://graph.facebook.com/?id=<URL>

というURLを叩くと

{
  "id": "<URL>",
  "shares": 37
}

みたいな物が帰ってくるのでこのsharesの数を取ってくれば良い、とうことでした。

e.g.)

http://graph.facebook.com/?id=http://rcmdnk.github.io/blog/2014/02/19/computer-markdown/

具体的には

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
url = '<URL>';
socialData = {
  type: 'GET',
  dataType: 'jsonp',
  url: '//graph.facebook.com/';
  data: {
    noncache: new Date().getTime()
    id = url;
    },
  success = function(data){
    $('.facebookCount[data-share-url="'+url+'"]').text(data.shares||0);
    $('.facebookCount[data-share-url="'+url+'"]').data("count",data.shares||0);
  },
  error: function(data){
    console.log('Error to get facebook count');
  },
}
$.ajax(socialData);

jQueryのAjaxを使ってこんな感じです。

ページにfacebookCountというクラスを持った要素を作っておいて その中の値を書き換えています。

改善したもの

JavaScript - Google+1のシェア数をクライアントサイドだけで取得 & Facebookのシェア数の取得に関する特殊な事情 & ちょっと宣伝 - Qiita

というのを見つけて、どうやらsharesという物が必ず帰ってくるわけではなく、 likesという値を持ったJSONを返してくることもあるとのこと。

ただし、このlikessharesと同じ数ではなく、 さらに別の方法で取ってきたtotal_countと合わせた数が 上のsharesと同じ最終的なトータルの数になる、ということでした。

このtotal_countはFacebook Query Language (FQL)を使って取ってこれて、

https://graph.facebook.com/fql?q=SELECT total_count FROM link_stat WHERE url='<URL>'

みたいな形のURLを叩くと取ってこれます。

このままだとアドレスバーに入れてもダメですが、エンコードして

http://graph.facebook.com/fql?q=SELECT%20total_count%20FROM%20link_stat%20WHERE%20url='<URL>'

こんな感じにすれば好きなURLのtotal_countがブラウザでも見れます。

e.g.)

http://graph.facebook.com/fql?q=SELECT%20total_count%20FROM%20link_stat%20WHERE%20url=%27http://rcmdnk.github.io/blog/2014/02/19/computer-markdown/%27

これが返すJSONは

{
  "data": [
    {
      "total_count": 37
    }
  ]
}

な感じです。(dataの値が一度配列になってその中にハッシュがあるのでちょっと注意。)

ということで、上のコードをこんな感じで直してみます。

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
40
url = '<URL>';
socialData = {
  type: 'GET',
  dataType: 'jsonp',
  url: '//graph.facebook.com/';
  data: {
    noncache: new Date().getTime()
    id = url;
    },
  success = function(data){
    if('likes' in data){
      var n = data.likes;
      var fdata = {
        type: 'GET',
        dataType: 'jsonp',
        url: '//graph.facebook.com/fql',
        data: {
          noncache: new Date().getTime(),
          q: "SELECT total_count FROM link_stat WHERE url='" + url + "'"
        },
        success: function(data) {
          n += data.data[0].total_count;
          $('.facebookCount[data-share-url="'+url+'"]').text(n);
          $('.facebookCount[data-share-url="'+url+'"]').data("count",n);
        },
        error: function(data){
          console.log('Error to get facebook count by fql');
        }
      };
      $.ajax(fdata);
    }else{
      $('.facebookCount[data-share-url="'+url+'"]').text(data.shares||0);
      $('.facebookCount[data-share-url="'+url+'"]').data("count",data.shares||0);
    }
  },
  error: function(data){
    console.log('Error to get facebook count');
  },
}
$.ajax(socialData);

こんな感じで最初に//graph.facebook.com/を使って取ってきた後、 likesがあれば更にtotal_countも取りに行って 合計を足す、みたいなことをやっています。

そうでない時はsharesの値を探してそれも無い場合は0を入れます。

まあ、そもそもFacebookでシェアされる事がかなり少ないし ちょっと数がある所で見てもlikesになってるところは 無かったのでこのブログでは多分意味無いですが やってみた、ということで。

Sponsored Links
Sponsored Links

« JavaScriptの関数のデフォルト引数について Octopress (Jekyll)のプラグインの中でファイルを作成してサイトに入れる方法 »