JSONP獲取Twitter和Facebook文章數(shù)的具體步驟
更新時(shí)間：2014年02月24日 15:20:14 作者：
這篇文章主要介紹了JSONP獲取Twitter和Facebook文章數(shù)的方法,需要的朋友可以參考下
原文是使用的Twitter和Facebook,因?yàn)閲?guó)內(nèi)被強(qiáng),所以我覺得有用的是里面一個(gè)獲取JSONP的那個(gè)工具類.
我很頭疼的是,許多流行的 APIs 已經(jīng)要求身份驗(yàn)證才能獲取信息。
既然我可以訪問到這些頁(yè)面并取得信息,那為什么我不使用一些簡(jiǎn)單的代碼來獲取并跳過驗(yàn)證這一步呢?
我認(rèn)為Twitter和Facebook要求身份驗(yàn)證來獲取文章的數(shù)量,但事實(shí)證明你可以通過JSONP來獲取這些信息。請(qǐng)參考下面的步驟。
The JavaScript
我將使用基本的JavaScript來告訴你如何做到這一點(diǎn):
// 獲取文章數(shù)量的封裝對(duì)象
var socialGetter = (function() {
/* JSONP: 獲取腳本的工具函數(shù) */
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);
}
};
})();
// 回調(diào)方法
function twitterCallback(result) {
result.count && console.log('The count is: ', result.count);
}
function facebookCallback(result) {
result.shares && console.log('The count is: ', result.shares);
}
// 調(diào)用
socialGetter.getFacebookCount('http://davidwalsh.name/twitter-facebook-jsonp', 'facebookCallback');
socialGetter.getTwitterCount('http://davidwalsh.name/twitter-facebook-jsonp', 'twitterCallback');
因?yàn)橛斜姸噍p量級(jí)的 micro-frameworks來處理JSONP,所以本文最重要的部分可能是獲取信息的url了。根據(jù)需要和習(xí)慣選擇你的JSONP工具!
Twitter和Facebook對(duì)于這些請(qǐng)求肯定有數(shù)量和頻率上的限制,所以如果你的網(wǎng)站訪問量很大，則JSONP很可能會(huì)被攔截或屏蔽. 一種快速的解決方案是將文章數(shù)量信息存儲(chǔ)在sessionStorage中,但這只是針對(duì)單個(gè)用戶的方式。如果你運(yùn)行的網(wǎng)站流量較大,你最好選擇在服務(wù)器端抓取數(shù)據(jù)并緩存下來,并在一定的時(shí)間內(nèi)自動(dòng)刷新。
我很頭疼的是,許多流行的 APIs 已經(jīng)要求身份驗(yàn)證才能獲取信息。
既然我可以訪問到這些頁(yè)面并取得信息,那為什么我不使用一些簡(jiǎn)單的代碼來獲取并跳過驗(yàn)證這一步呢?
我認(rèn)為Twitter和Facebook要求身份驗(yàn)證來獲取文章的數(shù)量,但事實(shí)證明你可以通過JSONP來獲取這些信息。請(qǐng)參考下面的步驟。
The JavaScript
我將使用基本的JavaScript來告訴你如何做到這一點(diǎn):
復(fù)制代碼 代碼如下:
// 獲取文章數(shù)量的封裝對(duì)象
var socialGetter = (function() {
/* JSONP: 獲取腳本的工具函數(shù) */
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);
}
};
})();
// 回調(diào)方法
function twitterCallback(result) {
result.count && console.log('The count is: ', result.count);
}
function facebookCallback(result) {
result.shares && console.log('The count is: ', result.shares);
}
// 調(diào)用
socialGetter.getFacebookCount('http://davidwalsh.name/twitter-facebook-jsonp', 'facebookCallback');
socialGetter.getTwitterCount('http://davidwalsh.name/twitter-facebook-jsonp', 'twitterCallback');
因?yàn)橛斜姸噍p量級(jí)的 micro-frameworks來處理JSONP,所以本文最重要的部分可能是獲取信息的url了。根據(jù)需要和習(xí)慣選擇你的JSONP工具!
Twitter和Facebook對(duì)于這些請(qǐng)求肯定有數(shù)量和頻率上的限制,所以如果你的網(wǎng)站訪問量很大，則JSONP很可能會(huì)被攔截或屏蔽. 一種快速的解決方案是將文章數(shù)量信息存儲(chǔ)在sessionStorage中,但這只是針對(duì)單個(gè)用戶的方式。如果你運(yùn)行的網(wǎng)站流量較大,你最好選擇在服務(wù)器端抓取數(shù)據(jù)并緩存下來,并在一定的時(shí)間內(nèi)自動(dòng)刷新。
相關(guān)文章
這篇文章主要介紹了JavaScript彈出窗口方法,非常實(shí)用的功能,需要的朋友可以參考下2014-08-08
JavaScript事件循環(huán)同步任務(wù)與異步任務(wù)
這篇文章主要介紹了JavaScript事件循環(huán)同步任務(wù)與異步任務(wù)，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-07-07
詳解JavaScript如何實(shí)現(xiàn)一個(gè)簡(jiǎn)易的Promise對(duì)象
Promise對(duì)象的作用將異步操作以同步操作的流程表達(dá)出來，避免層層嵌套的回調(diào)函數(shù)，而且Promise提供了統(tǒng)一的接口，使得控制異步操作更加容易。本文介紹了如何實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Promise對(duì)象，需要的可以參考一下2022-11-11
基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次
這篇文章主要介紹了基于javascript的COOkie的操作實(shí)現(xiàn)只能點(diǎn)一次,需要的朋友可以參考下2014-12-12
本文主要介紹了js實(shí)現(xiàn)橫向拖拽導(dǎo)航條功能的方法。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猧chart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-05-05
javascript滾輪事件基礎(chǔ)實(shí)例講解（37）
這篇文章主要為大家詳細(xì)介紹了javascript滾輪事件基礎(chǔ)實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
淺析script標(biāo)簽中的defer與async屬性
最近在網(wǎng)上看到一個(gè)前輩在寫script標(biāo)簽的時(shí)候，居然同時(shí)寫了async和defer屬性，想著這是什么意思呢？所以決定深入的了解下這其中的學(xué)問，以下這篇文章就是個(gè)人在學(xué)習(xí)了之后的一些總結(jié)分析，有需要的朋友們可以參考借鑒，下面來一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11
這篇文章主要為大家詳細(xì)介紹了用js編寫簡(jiǎn)單的貪吃蛇小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
詳解Python中l(wèi)ogging日志模塊在多進(jìn)程環(huán)境下的使用
許多應(yīng)用程序中都會(huì)有日志模塊，用于記錄系統(tǒng)在運(yùn)行過程中的一些關(guān)鍵信息，以便于對(duì)系統(tǒng)的運(yùn)行狀況進(jìn)行跟蹤。這篇文章給大家主要介紹了在Python中l(wèi)ogging日志模塊在多進(jìn)程環(huán)境下的使用,需要的朋友可以參考借鑒，下面來一起看看吧。2016-12-12