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