Jumat, 04 Maret 2016

Cara Menampilkan Tweet Dengan jQuery

Ola, artikel kali ini akan membahas tentang cara menampilkan tweet dari twitter.com dengan menggunakan jQuery. jQuery adalah sebuah bahasa pemrograman yang cepat singkat, yang terdiri dari kumpulan fungsi-fungsi javascript yang telah disederhanakan dalam penggunaan javascript yang mampu menangani peristiwa atau even, animasi bahkan AJAX sekalipun. Anda bisa mengunduhnya di sini atau menggunakan Content Delivery Network (CDN) dari Google Ajax Libraries API CDN atau Microsoft CDN ataupun dari situs jQuery CDN Minified.

Untuk menggunakan jQuery anda bisa menggunakan jQuery yang telah anda unduh ataupun melalui CDN seperti contoh di bawah ini masing-masing:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
atau
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
atau
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
atau menggunakan unduhan
<script src="url-anda-disini/jquery-1.8.3.min.js"></script>

Kita akan menggunakan Twitter API 1.0 sehingga tindak membutuhkan otentifikasi apapun dengan url seperti berikut:
https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=detikcom&count=3
Anda cukup mengganti screen_name yang merupakan nama pengguna twitter dan count adalah jumlah tweet yang kita dapatkan untuk sekali permintaan. Berikut contoh skripnya:
<html>
<head>
<meta charset="UTF-8" />
<title>Tweet Tutorial - Jendela Web Indonesia</title>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      var url = "https://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&   amp;include_rts=true&screen_name=detikcom&count=3&callback=?";
      $.getJSON(url, function (json) {
         $.each(json, function(i, tweet) {
            $("#tweet").append('<p>'+tweet.text+'</p>');
         });
      });
   });
</script>
</head>
<body>
<div id="tweet"></div>
</body>
</html>

Tidak ada komentar:

Posting Komentar