Faites vos propres badges de site Web avec jQuery et JSON

Des services comme Flickr, Delicious et Twitter offrent tous des badges ou des widgets JavaScript que vous pouvez ajouter à votre site. Mais si vous utilisez déjà un framework JavaScript sur votre site, comme jQuery, pourquoi voudriez-vous ajouter plus de javascript? De plus, c'est plus amusant de faire le vôtre. Tous ces services offrent également une API de flux JSON Format, et le roulement de votre propre widget est facile. En voici un que j'ai fouetté en un rien de temps pour Twitter en utilisant jQuery. Vous serez surpris du peu de code qu'il faut.

Tout ce dont vous avez besoin pour utiliser l'API Twitter JSON est une URL:

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

Remplacez SitePointDotCom par n'importe quel nom d'utilisateur Twitter, modifiez le numéro COMT = 5 en nombre de tweets que vous souhaitez récupérer et votre fonction avec le nom de votre fonction de rappel, et vous êtes prêt à partir. Copiez cette URL dans le champ d'adresse de votre navigateur et vous pourrez télécharger les données JSON pour jeter un œil:

yourfunction([ ... ]);

La sortie est un appel à votre fonction JavaScript. Un tableau qui contient une collection d'objets JSON - un pour chaque tweet - est passé comme l'argument unique. L'idée est que vous ajoutez un élément de script à votre page Web avec l'URL ci-dessus comme source. Ceci est nécessaire pour contourner la restriction de sécurité AJAX présente dans la plupart des navigateurs où JavaScript n'est pas en mesure de passer des appels Ajax à des domaines autres que celui actuel. Il est tout à fait normal d'inclure un fichier source JavaScript à partir d'un autre domaine; C'est le moyen standard de ces types de badges.

Cependant, nous utiliserons une autre approche, car ajouter une autre balise de script et nous assurer qu'il y a une fonction de rappel me semble désordonnée. Nous allons utiliser la fonction Getjson exceptionnellement pratique dans jQuery. Cependant, nous aurons besoin de HTML pour mettre les données du widget:

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

L'idée est que toutes les mises à jour Twitter vont placer dans cet élément Div en tant qu'éléments de paragraphe distincts. Nice et simple. Je l'aime aussi parce que si le javascript ne fonctionne pas pour une raison quelconque, il reste un contenu significatif sur la page au lieu de, disons, une animation de chargement qui ne se termine jamais.

Je veux donc que ce script soit licencié une fois que la page est prête, et la meilleure façon de le faire dans jQuery est d'utiliser $ (document) .ready:

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

Tous les besoins de la méthode Getjson sont une URL. Qu'est-ce qui est bon dans cette fonction, c'est que si vous ajoutez le paramètre de la chaîne de requête callback =? À la fin de l'URL, jQuery s'occupera de la fonction de rappel pour vous:

$(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 transmettra les données JSON à la fonction spécifiée dans le deuxième argument comme variable de données. Nous pouvons ensuite utiliser chaque méthode pour parcourir tous les tweets et les insérer dans le HTML de notre page:

yourfunction([ ... ]);

Si vous allez consulter la démo, vous verrez que nous avons maintenant un widget qui tire dans les données Twitter, convertissant chaque tweet en paragraphe HTML et les insérant en HTML de notre page. Nous ajoutons également une valeur de classe d'impairs ou même aux tweets afin que nous puissions implémenter des couleurs d'arrière-plan alternatives dans CSS. Jusqu'à présent, tout va bien, mais qu'est-ce qui manque? Eh bien, je pense que tout badge Twitter doit au moins lier @replies, hashtags et URL; Et ajouter des expressions régulières JavaScript nous fera bien ce travail:

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

C'est ça! Allez jeter un œil au produit fini. À quel point c'était simple?

La même approche peut être adoptée avec des tuyaux délicieux, Flickr, Last.fm et même Yahoo. Il y a aussi beaucoup de place à l'amélioration; Vous pouvez ajouter des informations de temps, un lien vers l'URL de tweet, ajouter des avatars, etc. Raena, autre éditeur technique de SitePoint, a suggéré que vous pouviez même fusionner les données de tous ces services ensemble dans l'ordre chronologique inverse pour faire un affichage de style LifeStream. Si vous vous efforcez de faire le vôtre, laissez un commentaire et faites-le moi savoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!