Who-Tweet Button: Hiện ảnh những người tweet link của bạn
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