Cara Membuat Twitter Timeline Untuk Website
Berikut cara mudah membuat twitter timeline di website kamu. Hanya butuh tiga file dasar untuk membuatnya yaitu index.html, twitter.js dan style.css.
Langsung saja berikut langkah demi langkahnya :
HTML
1 | Buat struktur HTML seperti berikut ini, beri nama index.html
<html
lang="en">
<head>
<meta charset="utf-8"/>
<title>AryaKRIDA</title>
<meta name="viewport"
content="width=device-width" />
<!--[if lt IE 9]>
<script
src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet"
type="text/css" href="style.css">
</head>
<body>
<h1>Twits of <a
href="http://www.twitter.com/AryaKRIDA">@AryaKRIDA</a>)</h1>
<p><a href="http://aryakrida.blogspot.com/">Back
to home</a></p>
<div
id="tweet"></div>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script
src="twitter.js"></script>
</body>
</html>
Javascript
2 | Setelah itu buat file javascript dengan nama twitter.js
$(document).ready(function () { // twitter id var user = 'AryaKRIDA'; // count $.getJSON('http://api.twitter.com/1/statuses/user_timeline.json?screen_name=' + user + '&count=3&include_rts=1&callback=?', function(data) { // result var tweet = ""; for (i = 0; i < data.length; i++) { tweet += data[i].text + "</br></br>"; } // links tweet = tweet.replace(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig, function(url) { return '<a target="_blank" href="'+url+'">'+url+'</a>'; }).replace(/B@([_a-z0-9]+)/ig, function(reply) { return reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>'; }); // output $("#tweet").html(tweet); }); });
Pada file javascript ini anda bisa menggantinya dengan alamat twitter kamu, lihat bagian
var user = "AryaKRIDA";
Untuk merubah jumlah tweets yang mau ditampilkan edit pada bagian //count
count=3
CSS
3 | Untuk mempercantik tampilan gunakan CSS, buat file css dengan nama style.cssbody {
width:350px;
margin: 0 auto;
}
h1, p{
text-align: center;
}
#tweet {
background-color: #fff000;
padding:20px;
}
Oke berikut ini adalah hasil nya, untuk membuatnya lebih cantik, silahkan edit 3 file diatas sesuai kebutuhan anda.