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

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

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

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

yourfunction([ ... ]);

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

但是，我們將使用另一種方法，因為添加另一個腳本標(biāo)簽并確保對我來說有一個回調(diào)功能聽起來很混亂。我們將在jQuery中使用非常方便的Getjson功能。不過，首先，我們需要一些HTML來放置小部件數(shù)據(jù)：

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

這個想法是，所有Twitter更新都將作為單獨的段落元素插入該DIV元素。很好，簡單。我也喜歡它，因為如果JavaScript出于某種原因無法運行，那么頁面上剩下有意義的內(nèi)容，而不是從未完成的加載動畫。

因此，我希望該腳本在該頁面準(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ù)傳遞給第二個參數(shù)中指定的作為數(shù)據(jù)變量的函數(shù)。然后，我們可以使用每種方法循環(huán)瀏覽所有推文，然后將它們插入我們頁面的HTML：

yourfunction([ ... ]);

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

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

就是這樣！去看看成品。那有多簡單？

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

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