JQueryとJsonで独自のWebサイトバッジを作成します

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

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

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

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

yourfunction([ ... ]);

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

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

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

アイデアは、すべてのTwitterの更新が個別の段落要素としてそのdiv要素にスロットになるということです。素敵でシンプル。 JavaScriptが何らかの理由で実行されない場合、たとえば終了しないロードアニメーションではなく、ページに意味のあるコンテンツが残っているため、私も気に入っています。

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

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

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

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

yourfunction([ ... ]);

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

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

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

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

以上がJQueryとJsonで独自のWebサイトバッジを作成しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。