Cara membuat Widget Twitter JQuery

Widget kali ini adalah twitter widget dengan efek JQuery. Widget ini di buat oleh Mike More. Widget twitter ini cukup unik saat menampilkan foto wajah-wajah followers dan friends (teman Anda) di twitter.

Kalau d lihat sekilas mirip-mirip dengan widget facebook like box, hanya menampilkan wajah-wajah, namun widget twitter ini di tambah dengan efek JQuery yang lumayan ciamik silahkan di pilih salah satu.


1. widget Twitter Jquery Simple

Hanya menampilkan photo wajah-wajah friends dan followers Anda saja.

Codenya :

• Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-1.0.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
      $('#friends').twitterFriends({
         debug:1
         ,username:'#'
      });
   });
</script>

• Ganti username:'#' dengan username twitter Anda
• Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript dan simpan.

<div id="friends"></div>

 2. widget twitter jQuery dengan header dan footer.

Hampir sama dengan di atas namun yang ini memiliki header dengan tombol follow ke twitter Anda di sertai dengan footer juga.

Code :

• Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

• Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript

 <div class="twitter-friends" data-options="{ username:'#' }">
 <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>

•  Ganti username:'#' dengan user name twitter Anda dan simpan.

3. Twitter widget jquery dg header dan footer, di tambah update status followers atau friens (teman) Anda secara bergantian.

Hampir sama dengan yang ke 2 di sertai header, footer dan tombol follow.
Namun bedanya widget yang satu ini berwarna gelap (hitam), dan di 
tambah efek jquery pada up date status teman Anda. 

Code :

• Copy paste kode di bawah di atas kode </body> pada template Anda dan Simpan

<link href="http://twitter-friends-widget.googlecode.com/svn/v2/dark.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://twitter-friends-widget.googlecode.com/files/jquery.twitter-friends-2.0.min.js" type="text/javascript"></script>

• Copy kode di bawah dan pastekan di Tata Letak --- Tambah Gadget --- HTML/Javascript.

 <div class="twitter-friends">
   <!-- { 
      username: '#'
      ,friends: 1
      ,width:358
      ,users_max:16
      ,users_height:120
      ,user_image:40
      ,user_animate:'width'
      ,tweet:1
      ,tweet_height:60
      ,loop:1
   } --> <a class="tfw-info" href="http://www.moretechtips.net" target="_blank">Twitter Friends/Followers Widget</a></div>

• Ganti username:'#' dengan user name twitter Anda dan simpan.