Home / Pemprograman / Menampilkan users twitter dengan jQuery

Menampilkan users twitter dengan jQuery

Twitter merupakan media social yang besar berkat kesederhanaan penggunaan, merupakan social media terbesar No. 2 setelah Facebook kalau tidak salah (saat artikel ini ditulis). Twitter juga menyediakan plugin – plugin untuk ditempelkan pada website – website sebagai media Shared atau promosi sebuah product. Saat ini plugin/Widget yang paling banyak digunakan adalah button tweet dimana bila Tombol/Button ini ditempatkan secara otomatis twiter akan mengambil link dari halaman website tersebut untuk di tampilkan pada twitter, Biasanya digunakan untuk mempromosikan Website maupun Product.

Pada artikel kali ini kita akan membuat sebuah plugin dimana akan menampilkan sedikit profile users agar dapat ditampilkan pada website. seperti gambar dibawah ini,

twitter

dengan menampilkan profile seperti gambar diatas paling tidak dapat mempromosikan twitter kalian pada website yang kalian punya. Bagaimana cara membuatnya cukup mudah

1. Buat 1 buat file html kemudian beri nama (misal : index.html)

isi seperti berikut :

<html>
    <head>
        <title>Twitter profile dengan jquery</title>
        <link href=”assets/style.css” rel=”stylesheet” type=”text/css” />
     <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js”></script> // saya menggunakan jquery online (ganti bila kalian mengaksesnya tidak terkoneksi internet)
        <script src=”assets/twitter.profile.js” type=”text/javascript”></script> // plugin yang saya buat untuk menampilkan profile twitter
        <script type=”text/javascript”>
            $(function(){              
                $(“#profile”).tweetProfile(“isoweb”); // panggil plugin twitter
            });
        </script>
    </head>
    <body id=”body”>       
        <div class=”profile” id=”profile”></div> // tempat menampilkan profile twitter
    </body>
</html>

2. Setelah membuat file diatas, buat juga sebuah folder dengan nama assets didalanmnya kalian buat 2 file dengan nama style.css dan twitter.profile.js

3. Pada file style.css isikan dengan text sebagai berikut :

#profile a{text-decoration:none;color:#000;}
#profile a:hover{color:#2FC2EF;}
#profile small.metadata{color:#999999;font-weigth:normal;width:100%;display:block;
    font-size:10px;}
.clear{clear:both;}

.profile{background-color:#F9F9F9;border:1px solid #DDDDD6;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}           
#profile .profile_name{height:50px;line-heigth: 50px;border-bottom:1px solid #DDDDD6;}
#profile .profile_name .fullname{font:bold 14px Arial, Helvetica, Sans-serif;padding-top:15px;}
#profile img.size32{width:32px;height:32px;padding:8px 15px;float:left;}
#profile .profile_stats{text-transform:uppercase; font-size:9px; display:block;color:#999;}
#profile .profile_stats .stats{margin:0;padding:0;}
#profile .profile_stats .stats li{float:left;border-right:1px solid #DDDDD6;
    list-style:none;padding:0 5px;
}
#profile .profile_stats .stats li a{padding:10px;display:block;}
#profile .profile_stats .stats li a strong{font-size: 14px;}

4. untuk plugin kalian dapat melihat pada file archive yang bisa kalian download pada halaman bawah artikel ini.

Twitter Profile ini hanya menampilkan sesuai dengan gambar diatas silahkan memodifikasi sesuai dengan keinginan kalian.

Semoga bermanfaat

 

DEMO DOWNLOAD

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Multi php.ini pada webserver

PHP ya,  mungkin saat ini pemrograman web yang paling banyak digunakan, mungkin karena mudah cara …

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *