諸如Flickr，F(xiàn)elicious和Twitter之類的服務(wù)都提供可以添加到網(wǎng)站的JavaScript徽章或小部件。但是，如果您已經(jīng)在網(wǎng)站上使用JavaScript框架（例如JQuery），為什么要添加更多JavaScript？此外，自己制作更有趣。所有這些服務(wù)還提供JSON格式Feed API，并且滾動(dòng)您自己的小部件很容易。這是我很快使用jQuery的Twitter鞭打。您會(huì)驚訝于它所需的代碼很少。

您需要使用的Twitter JSON API所需的只是一個(gè)URL：

http://twitter.com/status/user_timeline/sitepointdotcom.json?count=5&callback=yourfunction

用任何Twitter用戶名替換SitePointDotcom，將計(jì)數(shù)= 5數(shù)字更改為您希望檢索的推文數(shù)量和使用回調(diào)功能的名稱的函數(shù)，您就可以使用了。將該URL復(fù)制到瀏覽器的地址字段中，您可以下載JSON數(shù)據(jù)以查看：

yourfunction([ ... ]);

輸出是對(duì)您的JavaScript函數(shù)的調(diào)用。包含JSON對(duì)象集合的數(shù)組（每個(gè)推文一個(gè)）作為單個(gè)參數(shù)傳遞。這個(gè)想法是，您將腳本元素添加到網(wǎng)頁(yè)中，上面的URL作為源。這是繞過(guò)大多數(shù)瀏覽器中存在的AJAX安全限制所必需的，因?yàn)镴avaScript無(wú)法將AJAX調(diào)用到當(dāng)前一個(gè)以外的域以外的域。但是，可以從另一個(gè)域中包含一個(gè)JavaScript源文件。這是這些徽章工作的標(biāo)準(zhǔn)方式。

但是，我們將使用另一種方法，因?yàn)樘砑恿硪粋€(gè)腳本標(biāo)簽并確保對(duì)我來(lái)說(shuō)有一個(gè)回調(diào)功能聽(tīng)起來(lái)很混亂。我們將在jQuery中使用非常方便的Getjson功能。不過(guò)，首先，我們需要一些HTML來(lái)放置小部件數(shù)據(jù)：

<div >
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

這個(gè)想法是，所有Twitter更新都將作為單獨(dú)的段落元素插入該DIV元素。很好，簡(jiǎn)單。我也喜歡它，因?yàn)槿绻鸍avaScript出于某種原因無(wú)法運(yùn)行，那么頁(yè)面上剩下有意義的內(nèi)容，而不是從未完成的加載動(dòng)畫(huà)。

因此，我希望該腳本在該頁(yè)面準(zhǔn)備就緒后被解雇，并且在jQuery中這樣做的最佳方法是使用$（文檔）.dready：

$(document).ready(function(){
  //our code goes here...
});

Getjson方法的所有需求都是URL。此功能的好處是，如果添加查詢字符串參數(shù)回調(diào)=？到URL的末尾，jQuery將為您處理回調(diào)功能：

$(document).ready(function(){
  var tweeturl = "http://twitter.com/status/"
      +"user_timeline/sitepointdotcom.json?count=5"
      +"&callback=?";
  $.getJSON(tweeturl, function(data){
    //read the JSON data here...  
  });
});

jQuery將將JSON數(shù)據(jù)傳遞給第二個(gè)參數(shù)中指定的作為數(shù)據(jù)變量的函數(shù)。然后，我們可以使用每種方法循環(huán)瀏覽所有推文，然后將它們插入我們頁(yè)面的HTML：

yourfunction([ ... ]);

如果您去檢查演示，您現(xiàn)在會(huì)看到我們有一個(gè)窗口小部件可以吸引Twitter數(shù)據(jù)，將每個(gè)推文轉(zhuǎn)換為HTML段落，然后將它們插入我們頁(yè)面的HTML。我們還向推文中添加了奇數(shù)甚至偶數(shù)的類值，以便我們可以在CSS中實(shí)現(xiàn)交替的背景顏色。到目前為止還不錯(cuò)，但是缺少什么？好吧，我認(rèn)為任何Twitter徽章都必須至少鏈接@replies，hashtags和url；并添加一些JavaScript正則表達(dá)式將為我們做好這項(xiàng)工作：

<div >
  <p>
    <a href="http://twitter.com/sitepointdotcom">
        Follow me on Twitter
    </a>
  </p>
</div>

就是這樣！去看看成品。那有多簡(jiǎn)單？

可以使用美味的Flickr，last.fm甚至Yahoo Pipes采用相同的方法。也有足夠的改進(jìn)空間。您可以添加時(shí)間信息，鏈接到Tweet URL，添加化身等等。 SitePoint的另一位技術(shù)編輯Raena建議您甚至可以將所有這些服務(wù)中的數(shù)據(jù)合并在一起，以逆性順序排列以進(jìn)行生活流式顯示。如果您自己做自己做的，請(qǐng)發(fā)表評(píng)論，讓我知道。

以上是與JQuery和JSON一起制作自己的網(wǎng)站徽章的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！