Sử dụng JSON để tạo tiện ích Twitter

JSON (viết tắt của cụm từ JavaScript Object Notation) là một định dạng trao đổi dữ liệu, là phuơng thức thông dụng cho việc truyền dữ liệu giữa các máy với nhau. JSON là một chuẩn cực kỳ quan trọng trong lập trình web. Không phải hầu hết các trang web đều có tính năng JSON. Blogger cũng như Twitter hiện nay có được tính năng này.

Khi từng bước tìm hiểu về JSON trên trang Twitter, tôi đã tìm thấy định dạng script sau khi tải về file json cho tài khoản Twitter của tôi theo địa chỉ (trong đó huynhatha là username trên Twitter của tôi):

http://api.twitter.com/1/users/show.json?screen_name=huynhatha

Sau khi tải về file này, sử dụng Notepad để đọc code, tôi nhận thấy đoạn script như sau.

{"profile_background_color":"C0DEED","contributors_enabled":false,"lang":"en","profile_background_image_url":"http:\/\/a3.twimg.com\/a\/1294279085\/images\/themes\/theme1\/bg.png","created_at":"Tue Dec 01 15:29:33 +0000 2009","description":"My full name is Huynh Nhat Ha. I'm Vietnamese. I was born in 1979. I'm a technical analysist. I like blogging on Blogger and webdesign.","screen_name":"huynhatha","status":{"in_reply_to_user_id_str":null,"text":"New Post: Panel sliding for blogger author: (Huynh Nhat Ha's Blog) -- Panel tr\u01b0\u1ee3t chi\u1ec1u ngang\u2026 http:\/\/goo.gl\/fb\/oPVou","coordinates":null,"retweeted":false,"retweet_count":0,"created_at":"Tue Jan 18 03:17:26 +0000 2011","in_reply_to_user_id":null,"place":null,"source":"\u003Ca href=\"http:\/\/www.google.com\/support\/youtube\/bin\/answer.py?hl=en&answer=164577\" rel=\"nofollow\"\u003EGoogle\u003C\/a\u003E","in_reply_to_status_id":null,"truncated":false,"favorited":false,"in_reply_to_status_id_str":null,"id_str":"27202880503025664","geo":null,"id":27202880503025664,"contributors":null,"in_reply_to_screen_name":null},"url":"http:\/\/huynh-nhat-ha.blogspot.com","is_translator":false,"friends_count":7,"profile_text_color":"333333","followers_count":14,"statuses_count":223,"following":null,"favourites_count":0,"profile_sidebar_fill_color":"DDEEF6","location":"Tam Ky City, Vietnam","profile_background_tile":false,"time_zone":"Hanoi","follow_request_sent":null,"profile_link_color":"0084B4","protected":false,"verified":false,"profile_sidebar_border_color":"C0DEED","name":"Hu\u1ef3nh Nh\u1eadt H\u00e0","id_str":"93880571","id":93880571,"show_all_inline_media":true,"listed_count":1,"geo_enabled":true,"notifications":null,"profile_use_background_image":true,"utc_offset":25200,"profile_image_url":"http:\/\/a2.twimg.com\/profile_images\/1151951759\/hnhico_normal.JPG"}

Sau một hồi đọc mã, tôi nhận thấy có một số điểm có thể tận dụng để tạo tiện ích Twitter cho blogspot. Trong phần json script ở trên có đề cập đến phần script profile avatar trên Twitter, phần screen_name (tên người dùng), description (mô tả), followers_count (bộ đếm người theo dõi), status_text (đoạn text trạng thái). Từ đó có thể dùng Javascript và thêm chút CSS để tạo tiện ích Recent Tweets và tiện ích Twitter Followers Counter cho blogspot.

Tôi đã thử nghiệm thành công và sau đây là hướng dẫn cài đặt.

Trước tiên là tiện ích Recent Tweets. Bạn có thể xem Demo dưới đây.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<style type="text/css'>
#recenttweet {-moz-border-radius:5px;-moz-box-shadow:0 0 50px #AAA inset;border:2px solid #AAA;margin:0 auto;padding:5px;width:350px;}
#recenttweet img {float:left;margin-right:10px;}
#recenttweet p {border-bottom:1px dotted #555;border-top:1px dotted #555;font-family:Arial;font-size:12px;margin:0;padding:5px 0;}
#recenttweet small {clear:both;display:block;font-family:Tahoma;font-size:11px;padding:10px 30px;text-align:justify;}
#recenttweet h5 {color: #347C2C;font-family:Garamond;font-size:36px;font-weight:normal;margin-top:5px;text-shadow:2px 2px 1px #DEF;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Tweets Widget by Huynh Nhat Ha
function readTwitter(json) {
var output ="";
output += "<h5><img src='" + json.profile_image_url + "' />" + json.screen_name + "</h5>";
output += "<small>" + json.description + "</small><p>" + json.status.text + "</p>";
document.getElementById("recenttweet").innerHTML = output;
//]]>
</script>

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt đoạn code sau đây vào phần nội dung tiện ích.

<div id="recenttweet"></div>
<script src="http://api.twitter.com/1/users/show.json?screen_name=Huynhatha&amp;alt=json-in-script&amp;callback=readTwitter">
</script>

Thay Huynhatha bằng username trên Twitter của bạn.

Kế đến là tiện ích Twitter Followers Counter. Bạn có thể xem Demo dưới đây.

Sau đây là cách cài đặt tiện ích.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<style type="text/css'>
#twitterfollowers {background:#345 url(http://bit.ly/ez5d4K) no-repeat 15px 50%;-moz-border-radius:20px;-moz-box-shadow:0 0 20px #000 inset;color:#70D0F0;font-family:Arial;font-size:30px;height:48px;line-height:48px;margin:0 auto;padding:10px 10px 10px 70px;text-shadow:1px 1px 4px #000;width:150px;}
# twitterfollowers small {font-size:14px;padding-left:5px;}
</style>

<script type='text/javascript'>
//<![CDATA[
// Twitter Followers Counter Widget by Huynh Nhat Ha
function readTwitter(json) {
var output ="";
output += json.followers_count + "<small>followers</small>";
document.getElementById("twitterfollowers").innerHTML = output;
//]]>
</script>

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/JavaScript và đặt đoạn code sau đây vào phần nội dung tiện ích.

<div id="twitterfollowers"></div>
<script src="http://api.twitter.com/1/users/show.json?screen_name=Huynhatha&amp;alt=json-in-script&amp;callback=readTwitter">
</script>

Thay Huynhatha bằng username trên Twitter của bạn. Chúc bạn thành công! :38)