Who-Tweet Button: Hiện ảnh những người tweet link của bạn

Đăng bởi Neo trong mục Hướng dẫn vào 09 tháng 12, 2009 | Comments

Who-Tweet Button là plugin của jQuery thể hiện hình ảnh của những ngườiđã tweet bài viết của bạn bên trong nút retweet. Plugin sử dụng Topsy API giúp lưu giữ toàn bộ danh sách user đã tweet (link) bài viết của bạn.

Các chức năng chính

  • Thể hiện ảnh người tweet link của bạn
  • Bạn có thể chọn chỉ hiện ảnh của những người được đánh giá cao
  • Thiể hiện tool-tip khi di chuột qua ảnh
  • Nhiều hiệu ứng chuyển ảnh
  • Không sử dụng iframe (Nghĩa là bạn có thể dễ dàng tùy biến với CSS)
  • Tất nhiên là bạn vẫn có thể chọn hiển thị nút retweet như bình thường

Cách sử dụng đơn giản (demo)

Tất cả những gì bạn cần làm là thêm link tới file CSS và JavaScript vào header của trang web và thêm thẻ div với class="who-tweet".

<!-- Thêm CSS và JS vào trong header (1 lần duy nhất) -->
  <link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
  <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://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- //Thêm CSS và JS vào trong header (1 lần duy nhất) -->
  
<!-- Thẻ div cần thêm -->
  <div class="who-tweet" options="{
  nick:'hoainam12k'
  }">loading..</div>
<!-- //Thẻ div cần thêm -->

options="{nick:'hoainam12k'}" là không bắt buộc, nhưng bạn nên thêm vào (nick của bạn) vì khi người khác retweet link của bạn, tên bạn sẽ được hiển thị.

Sử dụng với tùy biến (demo)

<!-- Thêm CSS và JS vào trong header (1 lần duy nhất) -->
  <link type="text/css" rel="stylesheet" href="http://who-tweet-button.googlecode.com/svn/v1/who-tweet-button-1.0.css"/>
  <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://who-tweet-button.googlecode.com/files/jquery.who-tweet-button-1.0.min.js"></script>
<!-- //Thêm CSS và JS vào trong header (1 lần duy nhất) -->

<!-- Thẻ div cần thêm -->
  <div class="who-tweet-2">loading..</div>
<!-- //Thẻ div cần thêm -->

Và mã javascript để tùy biến sẽ là

$(document).ready(function(){
    $('div.who-tweet-2').whoTweet({
        nick:'hoainam12k',
        url:'http://vannyneo.com/mootools/plugin/smoothgallery-mootools-plugin',
			// url khai báo khác nhau với mỗi button
        n:20, 	//Số lượng ảnh thể hiện
        inf_only:1, // Nếu set = 1 nghĩa là chỉ thể hiện user có tầm ảnh hưởng lớn
        inf_tip:1,	// Thể hiện level ảnh hưởng của user trong tooltips
        tweet_tip:1, // Hiển thị tweet của user trong tooltips
        animate:'height'	// Sử dụng hiệu ứng 'height' thay vì opacity (mặc định)
    });
});

Bạn có thể tải plugin về ở đây

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter