原文链接: Retrieve Twitter and Facebook Counts with JSON

翻译人员: 铁锚

原文日期: 2014年02月19日

翻译日期: 2014年02月22日

!!! 原文是使用的Twitter和Facebook,因为国内被强,所以我觉得有用的是里面一个获取JSONP的那个工具类.

我很头疼的是,许多流行的 APIs 已经要求身份验证才能获取信息。

既然我可以访问到这些页面并取得信息,那为什么我不使用一些简单的代码来获取并跳过验证这一步呢?

我认为Twitter和Facebook要求身份验证来获取文章的数量,但事实证明你可以通过JSONP来获取这些信息。请参考下面的步骤。

The JavaScript

我将使用基本的JavaScript来告诉你如何做到这一点:

// 获取文章数量的封装对象
var socialGetter = (function() {
	/* JSONP: 获取脚本的工具函数 */
	function injectScript(url) {
		var script = document.createElement('script');
		script.async = true;
		script.src = url;
		document.body.appendChild(script);
	}

	return {
		getFacebookCount: function(url, callbackName) {
			injectScript('https://graph.facebook.com/?id=' + url + '&callback=' + callbackName);
		},
		getTwitterCount: function(url, callbackName) {
			injectScript('http://urls.api.twitter.com/1/urls/count.json?url=' + url + '&callback=' + callbackName);
		}
	};
})();

// 回调方法
function twitterCallback(result) {
	result.count && console.log('The count is: ', result.count);
}
function facebookCallback(result) {
	result.shares && console.log('The count is: ', result.shares);
}

// 调用
socialGetter.getFacebookCount('http://davidwalsh.name/twitter-facebook-jsonp', 'facebookCallback');
socialGetter.getTwitterCount('http://davidwalsh.name/twitter-facebook-jsonp', 'twitterCallback');

因为有众多轻量级的 micro-frameworks来处理JSONP,所以本文最重要的部分可能是获取信息的url了。根据需要和习惯选择你的JSONP工具!

Twitter和Facebook对于这些请求肯定有数量和频率上的限制,所以如果你的网站访问量很大，则JSONP很可能会被拦截或屏蔽. 一种快速的解决方案是将文章数量信息存储在sessionStorage中,但这只是针对单个用户的方式。如果你运行的网站流量较大,你最好选择在服务器端抓取数据并缓存下来,并在一定的时间内自动刷新。