Tích hợp dịch vụ Twitter vào website với jTweetsAnywhere

Đăng bởi supernovice trong mục Hướng dẫn vào 13 tháng 6, 2010 | Comments

Sử dụng jQuery, jTweetsAnywhere giúp chúng ta dễ dàng hiển thị tweet từ các feed, danh sách của người dùng nào đó, hiển thị kết quả tìm kiếm từ Twitter, tích hợp với tùy chỉnh TweetBox, giúp khách viếng thăm có thể theo đuôi trực tiếp từ website của bạn, quản lý bảo mật chứng thực với Twitter...

jTweetsAnywhere cũng cung cấp các hỗ trợ của Twitter @Anywhere như Hovercards, Tweet Box, Follow Button .... Bạn cần đăng ký với Twitter để lấy mã API sử dụng cho ứng dụng của bạn.

Dưới đây là danh sách các tính năng jTweetsAnywhere cung cấp mà bạn không cần phải có API.

  • Hiển thị tweet từ feed của một hay nhiều user
  • Hiển thị tweet từ danh sách người dùng
  • Hiển thị kết quả tìm kiếm từ Twitter
  • Hỗ trợ mọi tham số dùng để tìm kiếm
  • Hỗ trợ các tính năng của Twitter’s @Anywhere
  • Hiển thị hình ảnh trong profile của người dùng
  • Tự động phát hiện và đánh dấu các liên kết trong tweet
  • Tự động đưa các link dạng #hashtags tới yêu cầu tìm kiếm
  • Tự động đưa các link dạng @username tới profiles của người dùng
  • Tự động hiện ra Hovercards khi rê chuột vào @username hoặc hình ảnh profiles
  • Tích hợp tùy chỉnh TweetBox, khách viếng thăm có thể cập nhật trạng thái của họ ngay trên website.
  • Thêm nút “Follow Button” vào site
  • Thêm nút “Connect with Twitter”vào site
  • Cung cấp bảo mật chứng thực người sử dụng
  • Quản lý cấp thấp nguời sử dụng đăng nhập hay đăng ký
  • Tùy chỉnh giao diện với CSS của riêng bạn
  • Có thể ghi đè lên các mã html tự sinh ra với thể hiện của riêng bạn.
  • Các đọan mã nhỏ nhẹ dễ dàng tải về
  • Không làm gián đoạn khi tải trang.

Cách sử dụng :

Bạn cần có bộ thư viện jQuery,tốt nhất sử dựng jQuery phiên bản 1.4.2 (minified). Thêm vào trong thẻ <head> của trang web như sau:

<script type="text/javascript" src="jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="jquery.jtweetsanywhere-1.0.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jtweetsanywhere-1.0.0.css" />

Nếu bạn sử dụng tính năng của Twitter's @Anywhere bạn cần phải thêm vào anywhere.js

<script type="text/javascript" src="http://platform.twitter.com/anywhere.js?id=APIKey&v=1"></script>

Mã HTML :

<body>
...      
<div id="tweetsFeed">      

</div>  
...  
</body>

Cách sử dụng đơn giản:

$(document).ready(function(){
  $('#tweetsFeed').jTweetsAnywhere({      
    username: 'vannyneo',      
    count: 5  
  });
});

Ngòai ra bạn có thể vào trang Demo để tím hiểu thêm các tính năng của jTweetsAnywhere

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

supernovice's picture

supernovice

Phạm Văn Du - Web developer , SEO Guru tại Bình Dương

Trang chủ - Twitter