以前有一篇文章詳細介紹瞭如何獲取網頁在Facebook,Twitter和LinkedIn社交平臺上分享的數量,點擊這裏查看。這裏再擴充一下!html
GET URL:git
http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co
返回結果:json
{ "count":528, "url":"http://stylehatch.co/" }
GET URL:api
http://graph.facebook.com/?id=http://stylehatch.co
返回結果:跨域
{ "id": "http://stylehatch.co", "shares": 61 }
GET URL:瀏覽器
http://api.pinterest.com/v1/urls/count.json?callback=&url=http://stylehatch.co
返回結果:cors
({"count": 0, "url": "http://stylehatch.co"})
GET URL:工具
http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&format=json
返回結果:網站
{ "count":17, "fCnt":"17", "fCntPlusOne":"18", "url":"http:\/\/stylehatch.co" }
POST URL:this
https://clients6.google.com/rpc?key=YOUR_API_KEY
POST body:
[{ "method":"pos.plusones.get", "id":"p", "params":{ "nolog":true, "id":"http://stylehatch.co/", "source":"widget", "userId":"@viewer", "groupId":"@self" }, "jsonrpc":"2.0", "key":"p", "apiVersion":"v1" }]
返回結果:
[{ "result": { "kind": "pos#plusones", "id": "http://stylehatch.co/", "isSetByViewer": false, "metadata": { "type": "URL", "globalCounts": { "count": 3097.0 } } } , "id": "p" }]
GET URL:
http://www.stumbleupon.com/services/1.01/badge.getinfo?url=http://stylehatch.co
返回結果:
{ "result":{ "url":"http:\/\/stylehatch.co\/", "in_index":true, "publicid":"1iOLcK", "views":39, "title":"Style Hatch - Hand Crafted Digital Goods", "thumbnail":"http:\/\/cdn.stumble-upon.com\/mthumb\/941\/72725941.jpg", "thumbnail_b":"http:\/\/cdn.stumble-upon.com\/bthumb\/941\/72725941.jpg", "submit_link":"http:\/\/www.stumbleupon.com\/submit\/?url=http:\/\/stylehatch.co\/", "badge_link":"http:\/\/www.stumbleupon.com\/badge\/?url=http:\/\/stylehatch.co\/", "info_link":"http:\/\/www.stumbleupon.com\/url\/stylehatch.co\/" }, "timestamp":1336520555, "success":true }
這裏有一個網站封裝了一個小插件,專門用來在頁面上顯示社交網站分享工具條,能夠直接拿過來用,比較方便!http://sharrre.com/
Facebook,Twitter,LinkedIn比較經常使用,給出調用API的例子:
// Facebook $.getJSON("http://graph.facebook.com/?id=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + d.shares); }); // Twitter $.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co&callback=?", function (d) { $("#twitter_count").text("The Twitter Share count is: " + d.count); }); // LinkedIn $.getJSON("http://www.linkedin.com/countserv/count/share?url=http://stylehatch.co&callback=?", function (d) { $("#linkedin_count").text("The LinkdeIn Share count is: " + d.count); });
IE瀏覽器可能會沒法正確獲取到Facebook返回的數據,能夠嘗試在URL後面加上&callback=?,這樣JQuery會將它當成JSONP來調用。
Facebook還有另外一個API返回XML數據,調用方法是這樣的:
$.get("http://api.facebook.com/method/links.getStats?urls=http://stylehatch.co", function (d) { $("#fackbook_count").text("The Facebook Share count is: " + $(d).find("total_count").text()); });
若是在IE瀏覽器下出現No Transport錯誤而沒法獲取到Facebook返回的數據,嘗試在JavaScript代碼的最前面加上$.support.cors = true;容許跨域訪問數據。
咱們將上面Facebook,Twitter,LinkedIn三個社交網站的API進行封裝,以方便頁面調用。
$.fn.getShareCount = function (url) { var self = this; var displayShareCount = function (val, obj) { if (!isNaN(val) && val > 0) { obj.show(); if (val > 999) { obj.attr("title", val); obj.text("500+"); } else obj.text(val); } }; return { facebook: function () { $.get("http://api.facebook.com/method/links.getStats?urls=" + url, function (d) { var c = $(d).find("total_count").text(); self.each(function () { displayShareCount(c, $(this)); }); }); }, twitter: function () { $.getJSON("http://cdn.api.twitter.com/1/urls/count.json?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); }, linkedin: function () { $.getJSON("http://www.linkedin.com/countserv/count/share?url=" + url + "&callback=?", function (d) { self.each(function () { displayShareCount(d.count, $(this)); }); }); } }; };
而後在頁面上這樣調用:
$(function () { var shareUrl = window.location.href.toLowerCase(); $('#fackbook_count').getShareCount(shareUrl).facebook(); $('#twitter_count').getShareCount(shareUrl).twitter(); $('#linkedin_count').getShareCount(shareUrl).linkedin(); });