• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

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

7
18/01/2011

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)

{7 bình luậnAdd yours ?}

Nặc danh
18:50:00, 18 thg 1, 2011

anh Hà ơi hộp tìm kiếm của em bị sao ấy ,kết quả tìm kiếm có chữ màu vàng nền lại màu trắng nên rất khó xem

Reply
18:55:00, 18 thg 1, 2011

Bạn là ai? Blog bạn đâu? Bạn nên để lại địa chỉ blog mới giúp bạn xử lý được

Reply
19:19:00, 18 thg 1, 2011

bác có thể viết cái tut làm recent comments giống trang visaonnho.info với cái bài đăng

Reply
19:30:00, 18 thg 1, 2011

@Minh Quân Cái đó dễ thôi mà, để viết xong đăng nhé, mà blog gaunau.info của cậu sao giống trang visaonho.info thế. Anh em sinh cùng cha khác mẹ sao, hi hi

Reply
19:46:00, 18 thg 1, 2011

Nội dung thì giống mà hình thức thì ko

Reply
09:36:00, 19 thg 1, 2011

đây là blog của em http://daicaquan65a.blogspot.com/#uds-search-results anh xem thu nha

Reply
09:45:00, 19 thg 1, 2011

@daicaquan65a À, do blog em font chữ màu trắng, mà cái background cho khung kết quả tìm kiếm cũng màu trắng cho nên chả thấy gì là đúng rồi. Phải điều chỉnh backgound cho khung kết quả tìm kiếm thôi em x(

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn