JSONP取得Twitter和Facebook文章數的具體步驟_javascript技巧

原文是使用的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.body.append (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中,但這只是針對單一使用者的方式。如果你運行的網站流量較大,你最好選擇在伺服器端抓取資料並快取下來,並在一定的時間內自動刷新。