How to show Weather widget on the Website

There are many sites which offer free weather widget for the website. That are easy to embed.

You only need to specify some of the mandatory fields for generating the code.

In this tutorial, I show you some of the website from their you can get weather widget for your site.

How to show weather widget on the website


Contents

  1. Accuweather Widget
  2. Booked Widget
  3. theweather Widget
  4. Yahoo Weather API
  5. Conclusion

 


 

1. Accuweather Widget

This gives the widget code in HTML and script format.

  • Navigate to the site.

  • Where you see 3 types of navigation options –
    • Current Weather Widget
    • 36 hour Weather Widget
    • Option 1 + 2 = 3: Linked Weather Widget Package
  • Select any one of them.
  • Customize the weather widget using available options. e.g. location, unit, widget size, language.
  • You will see the live preview of the customization on the screen.

  • Tick the Terms & conditions checkbox and click the Grad the Code button.
  • Copy the generated code and place it on your site.

Demo

 


 

2. Booked Widget

This also gives the widget code in HTML and script.

  • Navigate to the site.

  • On the page, you will see various type of widgets.
  • Set your location and customize any one of the widget by clicking the Customize button or click Get HTML code button if you don’t want.
  • If you have clicked the Customize button then you will be redirected to the new page from where you can adjust the widget color, width, unit, and language.

  • Click the Get HTML code button and copy the generated code.
  • Put it on your website where you want to show.

Demo


 

3. theweather Widget

This allows to either add the widget in image or script format.

  • Navigate to the site.

How to show weather widget on the website

  • Customize the location, format, contents, and style.
  • Choose the widget format (Image or script).
  • Tick the I accept the conditions checkbox and click on the Generate Code button.

How to show weather widget on the website

  • Copy the generated code and use it on your site.

Demo

 


 

4. Yahoo Weather API

It is different from above-specified ways. This returns the response in JSON or XML format instead of giving pre-made weather widget.

You can specify your location using in YQL query and send your request.

Steps

  • Navigate to the site.

  • Set your location and region in YQL Query and click on the Test button.

  • Copy the generated value in Endpoint and send the request.
  • Use the response to create your widget.

Example

In the example, I am using PHP to get the response in XML format and creating a basic layout.

<?php

$url = "https://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20weather.forecast%20where%20woeid%20in%20(select%20woeid%20from%20geo.places(1)%20where%20text%3D%22bhopal%2C%20in%22)&format=xml&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys";
$invalidurl = false;
if(@simplexml_load_file($url)){
 $weather = simplexml_load_file($url);
}else{
 $invalidurl = true;
 echo "<h3>Invalid URL.</h3>";
}

if(!empty($weather)){
 
 foreach ($weather->results->channel->item as $item) {

  $title = $item->title;
  $link = $item->link;
  $description = $item->description;

?>
 <div >
 <div >
 <h3><a href="<?php echo $link; ?>"><?php echo $title; ?></a></h3>
 
 </div>
 <div >
 <?php echo implode(' ', explode(' ', trim($description, "]]>"))); ?> 
 </div>
 </div>

<?php
 
 }
}else{
 if(!$invalidurl){
 echo "<h2>No item found</h2>";
 }
}
?>

Demo


 

5. Conclusion

To provide the weather information to the website visitors you can use any of the above-specified ways.

If would like to make your own widget instead of using generated widget then you can use Yahoo weather API that gives you the response in JSON or XML format.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *