By default, the WeatherEmbed stack connects to the Forecast.io website and embeds a quality 7 day weather forecast for just about any location in the world. Unlike many other weather embed widgets available for websites, this one does not use Flash and does not use ugly little GIF graphics or suchlike. You can customise the graph colour and units of measurement in the stack settings. The forecast comes into your page via an iFrame, so it's simple and safe to get setup. The stack uses the standard Forecast.io embed code, which is already freely obtainable from the website. These forecasts are fantastic to use on any sports, recreational, vacation or educational websites, plus many other websites with an interest or dependancy on the weather.

Alternatively if you're running your own weather station and collecting data using WeatherCat or WeatherSnoop, the WeatherEmbed stack is able to gather the necessary custom data, graphs and images. If using WeatherSnoop, read this quick guide on configuring the app to generate content that WeatherEmbed can access via a REST API.

Example

Here is an example of an embedded Forecast.io weather forecast:
 
Another example of the WeatherEmbed stack, this time using a different location and 'US' units of measurement for temperature and windspeed.
A live temperature map from Dark Sky Maps.
The border and rounded corners applied around the above examples are totally optional, and can be easily customised or removed in the normal stack settings.

Setup

Follow these instructions to use WeatherEmbed in your projects...

  1. Once installed into Stacks and RapidWeaver, open the Stacks library
  2. Drag and drop a WeatherEmbed stack into your page
  3. Set the Embed Type setting to choose what weather information you want to embed
  4. Preview your page to see the embedded weather forecast or content displayed

Additional setup information can be read within the stack itself, while in edit mode and with Display Instructions enabled. Mousing over any WeatherEmbed settings will display an information tooltip about was a specific setting does.

Regardless of the embed type chosen, you can use the normal stack settings to customise your WeatherEmbed stack with optional borders, backgrounds, rounded corners, padding, margins or widths. Note that content within the Forecast.io widget is presented within an iFrame, and therefore you cannot edit the style of the widget itself.
 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.
Bookmark or share this page
Baidu 百度
Blogger
Delicious
Digg
Facebook
Google+
LinkedIn
LiveJournal
MySpace
Одноклассники
Reddit
Renren 人人网
StumbleUpon
Tumblr
Twitter
ВКонтакте
Weibo 微博
XING
Contact Us
Email This Page
Print This Page
PS: This bookmarking and sharing popup is powered using our brilliant SocialPopup stack!

Cookies

Like a lot of websites, Stacks4Stacks uses cookies to help enhance your browsing experience and handle things like purchases. We take your privacy seriously, and welcome you to freely opt-out of nonessential cookies at any time by reviewing your preferences on this page.