Flickr、Delicious、Twitterなどのサービスはすべて、サイトに追加できるJavaScriptバッジまたはウィジェットを提供します。しかし、jqueryのようなサイトでjavascriptフレームワークを既に使用している場(chǎng)合、なぜJavaScriptを追加したいのですか？それに、自分で作るのはもっと楽しいです。これらのサービスはすべて、JSON形式のフィードAPIも提供しており、獨(dú)自のウィジェットを巻くのは簡(jiǎn)単です。 Jqueryを使用してTwitterにすぐにホイップしたものです。必要なコードがどれほど少ないかに驚くでしょう。

Twitter JSON APIを使用するために必要なのはURLです。

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

SitePointDotcomをTwitterのユーザー名に置き換え、Count = 5の數(shù)値を取得したいツイートの數(shù)と、コールバック関數(shù)の名前で機(jī)能を変更すると、準(zhǔn)備ができています。そのURLをブラウザのアドレスフィールドにコピーすると、JSONデータをダウンロードして、以下を確認(rèn)できます。

yourfunction([ ... ]);

出力は、JavaScript関數(shù)の呼び出しです。 JSONオブジェクトのコレクションを含む配列（各ツイートに1つ）が単一の引數(shù)として渡されます。アイデアは、上記のURLをソースとして、Webページにスクリプト要素を追加することです。これは、JavaScriptが現(xiàn)在のドメイン以外のドメイン以外のドメインにAJAX呼び出しを行うことができないほとんどのブラウザに存在するAjaxセキュリティ制限をバイパスするために必要です。ただし、別のドメインからJavaScriptソースファイルを含めても大丈夫です。これは、この種のバッジが機(jī)能する標(biāo)準(zhǔn)的な方法です。

ただし、別のスクリプトタグを追加し、コールバック機(jī)能があることを確認(rèn)するため、別のアプローチを使用します。 JQueryで非常に便利なGetJson機(jī)能を使用します。ただし、ウィジェットデータを配置するには、HTMLが必要になります。

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

アイデアは、すべてのTwitterの更新が個(gè)別の段落要素としてそのdiv要素にスロットになるということです。素?cái)长钎伐螗抓搿?JavaScriptが何らかの理由で実行されない場(chǎng)合、たとえば終了しないロードアニメーションではなく、ページに意味のあるコンテンツが殘っているため、私も気に入っています。

ですから、ページの準(zhǔn)備ができたら、このスクリプトを起動(dòng)したいと思います。JQueryでそれを行う最良の方法は、$（document）を使用することです。

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

GetJsonメソッドのニーズはすべてURLです。この関數(shù)の良い點(diǎn)は、クエリ文字列パラメーターコールバック=を追加した場(chǎng)合です。 URLの終わりまで、jQueryはあなたのためにコールバック関數(shù)の世話をします：

$(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ù)として2番目の引數(shù)で指定した関數(shù)に渡します。その後、各メソッドを使用して、すべてのツイートをループして、ページのHTMLに挿入できます。

yourfunction([ ... ]);

デモに行ってチェックアウトすると、Twitterデータを引き込み、各ツイートをHTML段落に変換し、ページのHTMLに挿入するウィジェットが表示されます。また、CSSに交互の背景色を?qū)g裝できるように、Tweetsにクラス値を追加します。これまでのところ良いですが、何が欠けているのですか？まあ、Twitterバッジは、少なくとも@Replies、ハッシュタグ、およびURLをリンクする必要があると思います。そして、いくつかのJavaScriptの正規(guī)表現(xiàn)を追加すると、私たちのためにその仕事をうまく行います：

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

それでおしまい！行って、完成品を見てください。それはどれほど簡(jiǎn)単でしたか？

同じアプローチは、おいしい、Flickr、Last.FM、さらにはYahoo Pipesで使用できます。改善の余地も十分にあります。時(shí)間情報(bào)を追加したり、ツイートURLにリンクしたり、アバターを追加したりすることもできます。 SitePointの他のテクニカルエディターであるRaenaは、ライフストリームスタイルのディスプレイを作成するために、これらすべてのサービスからのデータを逆の順序で一緒にマージできることを提案しました。あなたがあなた自身を作るのを試しているなら、コメントを殘して私に知らせてください。

以上がJQueryとJsonで獨(dú)自のWebサイトバッジを作成しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。