Thông tin về thời tiết là một trong những widget hay được hiển thị nhất trên các website tin tức. Tuy vậy, có nhiều web master không biết cách làm widget này. Tôi thường thấy người ta “mượn tạm” các file javascript hoặc lọc nội dung trên các website nổi tiếng như VnExpress, Dân trí, … rồi hiện chúng trên website của mình. Cách làm như vậy khiến website của mình phụ thuộc vào các trang đó, đồng thời cũng khó tùy biến.

Bài viết này sẽ chia sẻ cho các bạn cách lấy thông tin dự báo thời tiết và hiển thị chúng trên website 1 cách đơn giản. Thông tin thời tiết này được lấy từ Yahoo! nên có thể đảm bảo độ chính xác và tin cậy.

Cách hiển thị thông tin thời tiết trên website

Để hiển thị thông tin thời tiết trên website, bạn chỉ cần chèn đoạn code sau vào trong thẻ head

Code:

<script type="text/javascript" src="http://rilwis.googlecode.com/svn/trunk/weather.min.js"></script>

Sau đó, ở vị trí bạn muốn hiển thị thông tin thời tiết, bạn chỉ cần chèn đoạn code:

Code:

<script type="text/javascript">
showWeather('hanoi, vietnam');
</script>

Nhớ thay ‘hanoi, vietnam’ bằng vị trí mà bạn muốn theo dõi thời tiết. Nó có dạng ‘city, country’ như mẫu trên.

Nếu bạn muốn hiển thị thông tin thời tiết cho nhiều thành phố thì chỉ cần gọi hàm showWeather() nhiều lần, như VD dưới đây, tôi sẽ hiển thị thông tin thời tiết của Hà Nội, Đà Nẵng và TP Hồ Chí Minh:



Code tương ứng:

Code:

<div id="weather">
 <h3>Thông tin thời tiết</h3>
 <h4>Hà Nội</h4>
 <script type="text/javascript">
  showWeather('hanoi, vietnam');
 </script>
 <h4>Đà Nẵng</h4>
 <script type="text/javascript">
  showWeather('danang, vietnam');
 </script>
 <h4>TP Hồ Chí Minh</h4>
 <script type="text/javascript">
  showWeather('hochiminh, vietnam');
 </script>
</div>

Bạn có thể copy trực tiếp code trên và chèn vào website để sử dụng luôn! Đối với Blogger, hãy tạo 1 widget HTML mới và paste đoạn code trên vào. Đối với WordPress, vào phần quản lý widgets, drag 1 text widget vào sidebar nào đó và paste đoạn code trên vào phần nội dung widget.
Để tùy biến cách hiển thị đẹp hơn, bạn nên bao bọc nó bằng 1 thẻ div (như trong VD trên) và dùng CSS để tùy chỉnh.
Dành cho developer

Đoạn javascript ở trên đã được minify, nếu các bạn muốn tham khảo code nguyên vẹn của nó, hãy xem mã nguồn tại Google Code. Ở đây, tôi sử dụng Yahoo! Query Language (YQL) và API của Yahoo! Weather để lấy thông tin về thời tiết.