-->

Membuat Twitter Timeline Untuk Website



 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.css
 
body {
        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.
Disqus Comments