Selamat Datang

Menampilkan Timeline Twitter di Halaman Website

TwitterTwitter saat ini merupakan website sosial media nomor 2 terbanyak yang digunakan oleh manusia diseluruh dunia, Banyak website yang memiliki akun twitter sendiri, website kita dan twitter tentunya terpisah.

Nah bagaimana menampilkan posting twitter di website kita?

Berikut ini tutorial singkat nya, cara ini bisa disisipkan disemua jenis website (Blog/Website).

 

 

HTML

Pertama buat struktur HTML seperti berikut ini, beri nama index.html

<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Tutorial Web Design : Twitter : Demo</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 Tutorial Web Design (<a href="http://www.twitter.com/tut_web">@tut_web</a>)</h1>
        <p><a href="http://www.tutorial-webdesign.com/menampilkan-timeline-twitter-di-halaman-website/">Back to tutorial</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

Setelah itu buat file javascript dengan nama twitter.js

$(document).ready(function () {		
	
	    // twitter id
    var user = 'tut_web';
          
    // 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 = "tut_web";

Untuk merubah jumlah tweets yang mau ditampilkan edit pada bagian //count

count=3

CSS

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.

Semoga berguna untuk anda

Salam web design Indonesia





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

3 thoughts on “Menampilkan Timeline Twitter di Halaman Website

  1. Agus Salim says:

    Demo nya gak bekerja om, hehe.

  2. […] tutorial-webdesign.com juga pernah membahas bagaimana Menampilkan Timeline Twitter di Halaman Website, trik ini bisa digabungkan jika […]

  3. danny says:

    demo is not working..
    please pencerahannya… :)

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development