之前有一篇文章详细介绍了如何获取网页在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的例子:
$.getJSON("http://graph.facebook.com/?id=http://stylehatch.co", function (d) {
$("#fackbook_count").text("The Facebook Share count is: " + d.shares);
$.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);
$.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();
});