Tạo plugin Twitter cập nhật tweet mới nhất bằng jQuery
Bạn muốn theo dõi những bình luận mới nhất từ trang Twitter? Plugin Twitter sẽ giúp tải những bình luận mới nhất của người dùng Twitter trên toàn cầu với chức năng lọc ngôn ngữ thô tục để tránh những nội dung xấu trên trang web của bạn.Plugin này còn có chức năng hỗ trợ tìm kiếm nhiều người dùng, hiển thị hình Avatar và đặc biệt là không làm chậm trang web khi các tweet đang hạ tải.
Xem Demo.
Sau đây là các bước cài đặt:
1. Đặt các file jQuery và javasctipt bên dưới vào trước thẻ </head>.
<style type="text/css">
/*JUITTER PLUGIN CSS*/
#juitter{width:550px;float:left;}
#juitterSearch{clear:both;padding:7px 0 5px 0;}
#juitterSearch P{font-size:1.2em;color:#2CAF1D}
#juitterSearch INPUT{padding:4px;border:solid 1px #666;width:250px;color:#666}
#juitterContainer{} /*Juitter container*/
#juitterContainer .twittList{margin:0;padding:0;} /* UL that will contain the list of tweets */
/* Bellow the list of tweets "<li>" */
#juitterContainer .twittLI{list-style:none;background:#EEFDEA;margin:0;padding:5px 0 0 0;border-bottom:dashed 1px #CAF8C9;padding:3px;clear:both;height:55px;}
#juitterContainer .twittList SPAN.time{color:#777;font-size:0.9em}
#juitterContainer .twittList A{color:#006600;} /*Links inside the tweets list */
/* Bellow the CSS for the avatar image */
#juitterContainer .juitterAvatar{float:left;border:solid 1px #D3EECA;background:#FFF;margin-right:5px;padding:2px;width:48px;;height:48px;}
#juitterContainer .jRM{float:right;clear:both} /*read it on twitter link*/
#juitterContainer .extLink{} /*CSS for the external links*/
#juitterContainer .hashLink{} /*CSS for the hash links*/
/*end of Juitter CSS*/
</style>
<script language="javascript" src="http://juitter.com/app/js/jquery-1.3.1.min.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/jquery.juitter.js" type="text/javascript"></script>
<script language="javascript" src="http://juitter.com/app/js/system.js" type="text/javascript"></script>
Tiếp đến cần tạo phần chứa nội dung plugin, đặt thành phần div với định dạng id như sau:
<div id="juitter">
<form method="post" id="juitterSearch" action="">
<p>Search Twitter: <input type="text" class="juitterSearch" value="Type a word and press enter" />
</p>
</form>
<div id="juitterContainer"></div>
</div>
Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..
Được viết bởi Khánh Nguyễn
Blog của tôi, Nguyễn Đạt Khánh là tên của tôi :Nghề nghiệp: IT Computer Networking - Kỹ thuật viên Mạng máy tính Viễn thông
Bạn đang xem Blog của tôi. Đừng quên nhấn Like và Share để ủng hộ. Một điều tốt nhất mà tôi mong đợi, là những dòng Comments thiện chí với nhau. Xin chân thành cảm ơn tất cả các bạn.
Nơi truy cập vào Nick của Tôi trên mạng:
0 Comments:
Đăng nhận xét