之前有一篇文章详细介绍了如何获取网页在Facebook,Twitter和LinkedIn社交平台上分享的数量,点击这里查看。这里再扩充一下!
GET URL:
http://cdn.api.twitter.com/1/urls/count.json?url=http://stylehatch.co
返回结果:
{ "count":528, "url":"http://stylehatch.co/" }
GET URL:
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
返回结果:
({"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" }
Google Plus
POST URL:
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" }]
StumbledUpon
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(); });