Browse » » » Membuat Gadget Status Twitter (Plugin Twitter JS)

Thursday, November 24, 2011

Membuat Gadget Status Twitter (Plugin Twitter JS)

Posted by at 5:34 AM
Membuat gadget untuk menampilkan status Twitter sebenarnya pernah dibahas pada artikel sebelumnya, namun pada tips trik blog kali ini kita akan mencoba memanfaatkan plugin JavaScript yang dibuat oleh remysharp.com. Dengan menggunakan plugin Twitter JS proses pembuatan widget untuk menampilkan status Twitter menjadi sangat mudah, sederhana dan menarik. Plugin Twitter JS memberikan kesempatan penggunanya untuk membuat style yang sesuai dengan keinginan, lebih menarik serta bukan hanya untuk menampilkan status Twitter kita namun bisa juga digunakan untuk menampilkan status orang lain, atau status kumpulan orang lain yang sudah kita kelompokan.
Plugin Twitter JS
Untuk menambahkan gadget status Twitter pada blog dengan menggunakan plugin Twitter JS, maka ada 3 kelompok kode yang akan digunakan, yaitu sebagai berikut:
Kode JavaScript
Kode JavaScript ini digunakan untuk memanggil status dari server Twitter sesuai dengan id penggunanya. Jika anda ingin menggunakan hosting sendiri, silahkan download file JavaScript Twitter JS disini.

Script Dasar
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>

Settings Option JavaScript
Dibawah ini adalah option untuk mengeset bagian yang akan di tampilkan dari status Twitter. Tidak semua option dibawah ini harus diikut sertakan.
  • id : nama tampilan anda pada twitter, misal nama tampilan saya "dedehendriono". id juga dapat juga diganti dengan daftar (list) dari status orang-orang yang sudah kita kumpulkan (dalam format user/nama-daftar, misal dedehendriono/motivator) atau dapat juga disini hash tag.
  • count : jumlah status twitter yang ingin ditampilkan, secara default di isi 1.
  • clearContents : true/false - jika anda memiliki isi didalam sebuah wadah maka kita bisa memindah bariskannya. Secara default adalah true
  • enableLinks : true/false - untuk memeriksa tweet yang mengandung link dan membuatnya bisa di klik, termasuk @balasan dan#hashtag. Secara default adalah true.
  • ignoreReplies : true/false - tetap menampilkan tweet yang dimulai dengan @. Jika permintaan 1 tweet, dan flag ini di set, dibelakang layar ia akan meminta 2 dengan kasus yang pertama dimulai dengan @. Tetapi jika permintaan lebih dari 2 balasan, maka tidak akan ditampilkan.
  • withFriends : true/false - apakah akan menyertakan tweet dari teman. Secara defaults di set false.
  • template : HTML template digunakan dalam setiap elemen li. Lihat variabel template dibawah.
  • prefix : jika tidak menggunakan template, anda dapat menggunakan set ini. Misal kita ingin menambahkan 'Hendriono berkata:'. Disini juga anda bisa saja menambahkan variabel template.
  • timeout : nilai dalam milidetik sebelum memicu onTimeout. Jika onTimeout diatur, batas waktu default adalah 10 detik.
  • onTimeout : fungsi untuk panggilan ketika batas waktu tercapai. Konteks diatur ke tweet elemen HTML yang akan dimasukkan ke dalamnya.
  • onTimeoutCancel : true/false - jika tidak di atur maka tidak ada batasan picu, namun script Twitter akan dapat dipanggil secara lengkap dan tidak ada pembatalan. Untuk menghindari hal ini, ditetapkan onTimeoutCancel = true. Set default adalah true.
  • newwindow: true/false - jika di set true, semua link didalam tweet (tidak terkecuali) akan dibuka pada sebuah jendela baru. Set defaults adalah false.
  • callback - fungsi untuk memanggil ketika twitter telah sempurna di render. Tidak ada batasan waktu.

Variabel Template
Semua variabel harus diapit oleh simbol% (lihat contoh di atas atau dibawah).
  • text - pesan status yang akan ditampilkan
  • id_str - id dari pesan status (catatan bahwa id telah digunakan sebelumnya, tapi untuk mendapatkan id yang benar, Anda perlu menggunakan id_str)
  • time - waktu relatif
  • created_at - waktu baku
  • user_name - nama asli
  • user_screen_name - nama tampilan
  • user_id_str - id pengguna
  • user_profile_image_url - gambar avatar pengguna sesuai id
  • user_url - alamat (link url) pengguna sesuai id
  • user_location - lokasi pengguna sesuai id
  • user_description - deskripsi pengguna sesuai id

Kode HTML
Kode HTML dibawah ini digunakan sebagai wadah (container) untuk menampilkan status twitter.
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Kode CSS
Kode CSS dibawah ini hanyalah contoh. Anda bisa saja berkreasi menurut imajinasi anda.
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrtIfXiUEgnrZk8zn-mcP7CNaRpQrSAYMbtS6PDnYdzIaVPTS3tZnky3CXJ94KKmpd4Sv3IDK9vwt6Y-Ioum79-I6n7QyofJ1N9Uu8Eas7jMuV-l-o_jlJ6ZUEuexqqtlHZTOOeLFeokx/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}

Gadget Status Twitter dengan Twitter JS

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Elemen Laman"
Langkah 3
Klik "Tambah Gadget" dan pilih gadget "HTML/JavaScript"
Langkah 4
Masukan kode dibawah ini pada kotak "Konten":
<style>
#twitters {margin:10px auto;}
.even{background-color:#222;}
.prev_pic{border:1px solid #282828;background-color:#131313;display:block;float:left;height:48px;left:5px;margin-right:15px;position:relative;top:1px;width:48px;}
a:hover .prev_pic{border:1px solid #fff;}
.prev_pic img, a:hover .prev_pic img{border:none;}
.post_name{color:#fff;display:block;font-size:13px;/*font-weight:bold;*/height:20px;overflow:hidden;padding:0;padding-top:6px;max-width:80%;}
.meta, .meta a{color:#777;font-size:11px;text-decoration:none;}
.meta a:hover{text-decoration:underline;}
.meta_sub{border-right:1px solid #777;padding-right:5px;margin-right:5px;}
.speciallist{padding-top:3px;padding-bottom:15px;}
.speciallist ul{list-style-type:none;padding:none;margin:none;}
.speciallist a{background-color:#222;border-bottom:1px solid #282828;border-top:1px solid #131313;clear:both;display:block;height:52px;padding:3px 0;text-decoration:none;position:relative;overflow:hidden;}
.speciallist a:hover{background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHrtIfXiUEgnrZk8zn-mcP7CNaRpQrSAYMbtS6PDnYdzIaVPTS3tZnky3CXJ94KKmpd4Sv3IDK9vwt6Y-Ioum79-I6n7QyofJ1N9Uu8Eas7jMuV-l-o_jlJ6ZUEuexqqtlHZTOOeLFeokx/s800/bg_speciallist.jpg) no-repeat scroll right 8px;}
</style>
<script src="http://twitterjs.googlecode.com/svn/trunk/src/twitter.min.js" type="text/javascript"></script>
<script charset="utf-8" type="text/javascript">
getTwitters('twitters', {
id: 'dedehendriono/motivator',
clearContents: true,
count: 8,
enableLinks: false,
withFriends: true,
ignoreReplies: false,
template: '<a class="even" href="http://twitter.com/%user_screen_name%/statuses/%id_str%" target="_blank"><span class="prev_pic"><img height="48" width="48" src="%user_profile_image_url%" /></span><span class="post_name">"%text%"</span><span class="meta">%user_name% | %time%</span></a>'
});
</script>
<div id="twitters" class="speciallist">
<p><a href="http://twitter.com/dedehendriono">Jika malas menunggu - silahkan kunjungi halaman twitter kami</a></p>
</div>
Perhatian! Kode diatas hanyalah contoh, silahkan anda berkreasi dengan Twitter JS
Langkah 5
Klik tombol "SIMPAN" dan preview blog anda...

Selamat mencoba dan semoga berhasil... Happy Blogging :)

Special thanks to remysharp.com for Twitter JS Plugin
Labels: ,
 

Copyright © Belajar Ngeblog Design by BTDesigner | Blogger Theme by BTDesigner | Powered by Blogger