2014年10月7日(火)

【jQuery】SNSでのシェア数を取得するプラグイン

まあ世の中似たようななものいくらでもありますが。

ソースはこんな感じ
[js]
(function($){$.snsCounter = function(elem,opt){var o = $.extend(true, {}, opt);var url = ”;var q = {};o.flag = false;if(null==o.url){o.url = (null!=$(elem).data(‘url’))?$(elem).data(‘url’):location.href;}if(null==o.sns){o.sns = (null!=$(elem).data(‘sns’))?$(elem).data(‘sns’):’twitter’;}switch(o.sns){case ‘twitter’:case ‘tw’:url = ‘http://urls.api.twitter.com/1/urls/count.json?callback=?’;q[‘url’] = o.url;break;case ‘facebook’:case ‘fb’:url = ‘http://graph.facebook.com/’+o.url+’?callback=?’;break;case ‘googleplus’:case ‘google’:case ‘gplus’:case ‘gp’:q[‘q’] = "SELECT content FROM data.headers WHERE url=’https://plusone.google.com/_/+1/fastbutton?hl=ja&url="+o.url+"’";q[‘env’] = "http://datatables.org/alltables.env";q[‘format’] = "json";url = ‘http://query.yahooapis.com/v1/public/yql?callback=?’;o.flag = true;break;case ‘hatebabookmark’:case ‘hatena’:case ‘hateb’:case ‘hb’:url = ‘http://api.b.st-hatena.com/entry.count?callback=?’;q[‘url’] = o.url;break;}$.getJSON(url,q,function(data){try{var p = (!o.flag)?(data.count || data.shares || (isFinite(data)?data:false) || 0):data.query.results.resources.content.match(/\[2,([0-9.]+),\[/)[1];$(elem).is(‘input’)?$(elem).val(p):$(elem).html(p);}catch(e){$(elem).html(error);}});}
$.fn.snsCounter = function(option){var d = {sns:null,url:null,error:’取得できません’};option = $.extend(d,option);return this.each(function(){new $.snsCounter(this,option);});};})(jQuery);
[/js]

jQUeryのバージョンは1.11系で試してますが、2.x系でも問題ないと思います。
というか前のほう捨てたいんですけどね。

基本的な使い方は
[js]
$(‘#test’).snsCounter();
[/js]

こんな感じで、表示したい要素を指定してやればいいんですが、
デフォルトの設定では表示ページのURLがtwitterでどれだけシェア(リンク・RTの合計数だと思う)されているかが表示されると思います。

どんだけ必要なのかわかりませんが、オプションでこういう感じの指定も出来ます。
[js]
$(‘#test1′).snsCounter({sns:’twitter’,url:’http://www.google.co.jp/’});
[/js]

指定できる一覧ですが、

snsに指定できる値
サイト	値
twitter	twitter tw
facebook	facebook fb
はてなブックマーク	hatebabookmark hatena hateb hb

または、data-sns属性としても指定可能です。デフォルトはtwitterです。
data-urlまたはoptionのurlに表示URLを指定すると、そのURLの各種値も取れます。
data属性にはない値でoptionにerrorという項目を足すと、エラー時にその文字列が表示されます。
ほぼないと思いますが。

んで、指定要素がINPUTタグのときだけvalueに値が入ります。
あとは基本的にinnnerHTMLに入るようになってます。

そういう感じで。