Menampilkan Recent Twitter Tweets dengan JQuery

Apakah Anda ingin menunjukkan tweets terakhir Anda di dalam website atau blog. Ini akan berguna bagi anda untuk menambahkan tweets baru-baru ini ke dalam situs web Anda menggunakan tweets Jquery.

Twitter adalah layanan jaringan dan microblogging sosial, dimiliki dan dioperasikan oleh Twitter Inc, yang memungkinkan penggunanya untuk mengirim dan membaca pesan pengguna lain yang disebut tweets. Tweets adalah posting berbasis teks hingga 140 karakter ditampilkan pada halaman profil penulis.

Ikuti petunjuk dibawah ini:

1. Login ke dashboard Design -> Edit HTML
2. Cari tag </head>. Gunakan CTRL+F dibrowser anda untuk pencarian lebih cepat.
3. Copy kode dibawah ini dan anda taruh sebelum tag </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

function showTweets(elem, username, number)
{
var html = '<ul>';

var tweetFeed = 'http://twitter.com/status/user_timeline/' + username + '.json?count=' + number + '&callback=?'
$.getJSON(tweetFeed, function(d)
{

$.each(d, function(i,item)
{
html+='<li>'+item.text+'</li>';
})
html+="</ul>";

elem.children().fadeOut('fast',function() {
elem.append(html);
})
})
}

$(function() {
$('#error').remove();
$('#preload').show();
showTweets($('#tweets'), 'FillahGrunge', 5)
});

</script>

<style type="text/css">
#preload {display: none;}

#tweets ul li{
list-style-type:square;
list-style-position:inside;
list-style-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijRr5ETvVKJJ_JjV0EB7E0iQ-LL7QmVHhNl-HC9rM-OozWAXQwKTY1wE_7oJMP7G6xRauzi9kClhHyTk1s2Tmy8AB1YUyxCD6Iti9EgPHWyczrrpcDVvaCuvQZ6sWLRzrSBGxiF55WQpU/s1600/twitter.png');
margin:0 0 0;
padding:0 0 0;
}
</style>

CATATAN:

Tulisan FillahGrunge yang bercetak tebal silahkan anda ganti dengan ID twitter anda.

5 : Tentukan jumlah tweets yang akan ditampilkan nantinya.

4. Lalu silahkan anda simpan dulu (Save Template)
5. Buka Layout -> Page Elements
6. Pilih Add a Gadget.
7. Pilih HTML/Javascript untuk meng-copy kode dibawah ini.

<div style="font-size:12px;font-family:Arial;">
<div id="tweets">
<h3 id="error">There was a problem fetching tweets</h3>
<h3 id="preload">Currently loading your tweets...</h3>
</div>
<ul><li style="list-style-type:none;"><a href="http://www.twitter.com/FillahGrunge">Follow me on twitter</a></li></ul>
</div>

CATATAN: