Up Next
Up Next

Best Weather Widgets

Charlie R. Claywell
Weather Channel widget
Weather Channel Widget

Everyone talks about the weather, and many people plan their week around it. Supply this useful content on your website, and give your users one more reason to check in with your site every day. The free widgets chosen below were selected based on ease of implementation, layout options, and source.

AccuWeather

Another well-known and respected organization, AccuWeather goes a step further with their widgets (depending on size you choose) by adding radar to the widget. Although, this is only an option on the larger sizes, this choice does allow you to display a real-time radar weather map on your site.

AccuWeather.com widget
AccuWeather Widget

Creating the Widget

Creating the widget is a 3-step process.

Step one, choose:

  • Fahrenheit or Celsius
  • Language
  • Location

Step two, select:

  • Size - Currently nine sizes available
  • Category - Choices include Basic Colors, Love, Season and Weather
  • Theme - Ranges from clouds to tornados

Step three:

  • Agree to terms and conditions; will redirect you a page with the widget coding
  • Decide whether to receive widget coding by email or access it from the page

Displaying the Widget

The coding for this widget is somewhat larger because of the inline styles placed in the <div> tag, but the coding is still handled the same way; just copy and paste it inside the HTML where you want it to display. One advantage to this system is that since the look of the widget is controlled with inline styles, you can make changes from inside your site once the coding is on it instead of using the widget tool. For example, changing the zip code is easy; you would look for zipcode=12345 and replace the digits with a new 5-digit zip code.

Pros and Cons

Strengths

  • There is a wide range of sizes to choose from.
  • You have the ability to include real-time radar and temperature maps.
  • There are quick links to hourly and extended forecasts.
  • There's an option for a small, bare bones 120 x 60 widget.

Weaknesses

  • You're limited to pre-selected weather conditions of real feel and wind; visibility and UV index options are not unavailable.
  • The vertical widgets with radar are less design-friendly. It feels as if the radar option is an afterthought
  • Users can't change the location from the widget.

WeatherBug

WeatherBug is a serious contender in the weather business. It provides weather information and alerts to more than 33 million monthly users worldwide.

Screenshot of WeatherBug widget
WeatherBug Widget

Creating the Widget

Creating the widget is accomplished on a single page. You will:

  1. Select a size from the six options.
  2. Input your email address.
  3. Enter your Zip code or city and click search.
  4. Select the city and weather station from their drop-down menu.
  5. Choose Fahrenheit or Celsius.
  6. Select the language you want to use, either English or Spanish.

Accessing the Code

You'll need to agree to the terms and conditions, and then click Get Code. You will be redirected to a page with coding on it. This page also includes a link to an explanation of what the IDs inside the widget accomplish, which may be helpful for troubleshooting any potential issues.

Displaying the Widget

This is another widget with a fairly large block of coding to copy and paste in your HTML. It has a

tag, an <iframe> tag, and several and

tags. Since there are so many on/off tags, double check the pasted coding to make sure you have not dropped a closing

or other tag if the widget breaks or displays incorrectly on your page.

Pros and Cons

Strengths

  • You can create the widget easily and quickly.
  • There's an adequate number of size choices available.
  • Overall, the widget has a simple, effective look.
  • There's quick access to extended forecasts.

Weaknesses

  • The photo and video links are not really relevant to users unless they live in major metropolitan areas. More rural areas will get video or camera shots from outlying regions. The photos are not location specific; they're just general weather shots.
  • Users can't change the location from widget.
  • The satellite link is only available on a couple sizes.

Don't Forget Local Sources

You may not realize it, but your local newspaper or TV website may also offer weather widgets. Obviously, these widgets will be specific to a smaller region, but if your website is for a specific locality, this is a simple, yet effective way to provide your website visitors with useful information that will make your site even more valuable to them.

Was this page useful?
Best Weather Widgets