JSONP獲取Twitter和Facebook文章數(shù)的具體步驟
更新時間：2014年02月24日 15:20:14 作者：
這篇文章主要介紹了JSONP獲取Twitter和Facebook文章數(shù)的方法,需要的朋友可以參考下
原文是使用的Twitter和Facebook,因為國內(nèi)被強,所以我覺得有用的是里面一個獲取JSONP的那個工具類.
我很頭疼的是,許多流行的 APIs 已經(jīng)要求身份驗證才能獲取信息。
既然我可以訪問到這些頁面并取得信息,那為什么我不使用一些簡單的代碼來獲取并跳過驗證這一步呢?
我認(rèn)為Twitter和Facebook要求身份驗證來獲取文章的數(shù)量,但事實證明你可以通過JSONP來獲取這些信息。請參考下面的步驟。
The JavaScript
我將使用基本的JavaScript來告訴你如何做到這一點:
// 獲取文章數(shù)量的封裝對象
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');
因為有眾多輕量級的 micro-frameworks來處理JSONP,所以本文最重要的部分可能是獲取信息的url了。根據(jù)需要和習(xí)慣選擇你的JSONP工具!
Twitter和Facebook對于這些請求肯定有數(shù)量和頻率上的限制,所以如果你的網(wǎng)站訪問量很大，則JSONP很可能會被攔截或屏蔽. 一種快速的解決方案是將文章數(shù)量信息存儲在sessionStorage中,但這只是針對單個用戶的方式。如果你運行的網(wǎng)站流量較大,你最好選擇在服務(wù)器端抓取數(shù)據(jù)并緩存下來,并在一定的時間內(nèi)自動刷新。
我很頭疼的是,許多流行的 APIs 已經(jīng)要求身份驗證才能獲取信息。
既然我可以訪問到這些頁面并取得信息,那為什么我不使用一些簡單的代碼來獲取并跳過驗證這一步呢?
我認(rèn)為Twitter和Facebook要求身份驗證來獲取文章的數(shù)量,但事實證明你可以通過JSONP來獲取這些信息。請參考下面的步驟。
The JavaScript
我將使用基本的JavaScript來告訴你如何做到這一點:
復(fù)制代碼 代碼如下:
// 獲取文章數(shù)量的封裝對象
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');
因為有眾多輕量級的 micro-frameworks來處理JSONP,所以本文最重要的部分可能是獲取信息的url了。根據(jù)需要和習(xí)慣選擇你的JSONP工具!
Twitter和Facebook對于這些請求肯定有數(shù)量和頻率上的限制,所以如果你的網(wǎng)站訪問量很大，則JSONP很可能會被攔截或屏蔽. 一種快速的解決方案是將文章數(shù)量信息存儲在sessionStorage中,但這只是針對單個用戶的方式。如果你運行的網(wǎng)站流量較大,你最好選擇在服務(wù)器端抓取數(shù)據(jù)并緩存下來,并在一定的時間內(nèi)自動刷新。
相關(guān)文章
javascript一元操作符遞增、遞減想必大家并不陌生吧，下面與大家分享下使用方法，有詳細學(xué)習(xí)的朋友可以了解下，希望對大家有所幫助2013-08-08
Bootbox將后臺JSON數(shù)據(jù)填充Form表單的實例代碼
通過控制器創(chuàng)建一個Index視圖，寫入下列HTML代碼，這里我創(chuàng)建了一個分部視圖，不創(chuàng)建直接寫在同一個頁面也是一樣的效果。這篇文章主要介紹了Bootbox將后臺JSON數(shù)據(jù)填充Form表單 ,需要的朋友可以參考下2018-09-09
Vue考試系統(tǒng)的后臺管理功能開發(fā)示例解讀
這篇文章主要介紹了Vue考試系統(tǒng)后臺管理項目的登錄、記住密碼功能具體實現(xiàn)流程，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
我們在開發(fā)中經(jīng)常需要把時間戳轉(zhuǎn)化成日期格式,下面這篇文章主要給大家介紹了關(guān)于JS時間戳轉(zhuǎn)換為常用時間格式的三種主要方式,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
javascript js 操作數(shù)組 增刪改查的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript js 操作數(shù)組 增刪改查的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要介紹了微信小程序 (地址選擇1)--選取搜索地點并顯示效果,實現(xiàn)思路是通過拖動地圖，搜索地址，選擇地址并將地址值傳給文本框，具體實例代碼跟隨小編一起看看吧2019-12-12
這篇文章主要為大家詳細介紹了javascript模擬實現(xiàn)計算器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要介紹了JavaScript 九種跨域方式實現(xiàn)原理，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
微信小程序使用map組件實現(xiàn)路線規(guī)劃功能示例
這篇文章主要介紹了微信小程序使用map組件實現(xiàn)路線規(guī)劃功能,結(jié)合具體實例形式分析了微信小程序基于map組件的地理位置獲取、路徑規(guī)劃等相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
這篇文章主要介紹了JS正則表達式獲取分組內(nèi)容的方法，有需要的朋友可以參考一下2013-11-11