Adding an Air Quality Widget to WordPress

Air, you really cannot live without it. Literally. Dirty air gets into everything, especially PM2.5 sized. No household air cleaners or air conditioners can get rid of this pollution. I’m sure a house sized hepa filter could do it, but open a door and your air quality would quickly drop. What would life be if you could not go outside?

Anyway, I thought I’d add city air quality readings to my WordPress blog, but I’m only partially satisfied. I actually want 2 cities but can only get one at a time. There are instructions on aqicn.org Air Quality Widget – New Improved Feed

This is an example of aqi in Changzhi, China. Here is how it looks. This is live. If you move your mouse over the square the larger air quality stats will magically appear. It is a very cool widget.

For WordPress, add a text widget and paste in this code. Here is the javascript code for my city. Of course you will need to change the city, or id tag as they call it, from “Changzhi” to your city.

<script type="text/javascript" charset="utf-8"> (function(w,d,t,f){ w[f]=w[f]||function(c,k,n){s=w[f],k=s['k']=(s['k']||(k?('&k='+k):''));s['c']= c=(c instanceof Array)?c:[c];s['n']=n=n||0;L=d.createElement(t),e=d.getElementsByTagName(t)[0]; L.async=1;L.src='//feed.aqicn.org/feed/'+(c[n].city)+'/'+(c[n].lang||'')+'/feed.v1.js?n='+n+k; e.parentNode.insertBefore(L,e); }; })( window,document,'script','_aqiFeed' ); </script>

<span id="changzhi"></span> <script type="text/javascript" charset="utf-8"> _aqiFeed({ display:"%cityname AQI is %aqi<br><small>(%impact)</small>", container:"changzhi", city:"Changzhi" }); </script>

Here is the city I chose, Changzhi, China. The 'id of the tag' comes from the hyperlink in the top left corner, in blue. This city's hyperlink is 'http://aqicn.org/city/changzhi/'. The id will be 'changzhi'.

Here is the city I chose, Changzhi, China. The ‘id of the tag’ comes from the hyperlink in the top left corner, in blue. This city’s hyperlink is ‘http://aqicn.org/city/changzhi/’. The id will be ‘changzhi’.

My city was “Changzhi“. The instructions mention “id of the tag”, which I could not find. On aqicn.org, find the city you want, and display the aqi report. Look, on the top left corner in blue, a hyperlink such as “http://aqicn.org/city/changzhi/”. To the right of the “/city/” is the id tag for your city. Change “changzhi” to this city name into your code.

Save the text widget, and you’re finished. It is really that easy.

There are more complex ways of displaying the data, and they are roughly documented on their web site. You can play around with them. I just wanted a simple one.

What I have not been able to do is display multiple cities, such as Toronto, Beijing, and Changzhi, all together. I read the instructions but could not get the code snippet to work, and there are no code examples. I’ve sent them an email sking for tech help. Maybe I’ll play around with it some more later.

I also tried to add a second text widget and a different city, such as Toronto, but I could get only one to work at a time, either Toronto or Changzhi, but not both together. This is a bummer.

Thanks goes out to aqicn.org for providing this info and a way to display it on our web sites.

Example of multi-city: Download East, Singapore Air Quality Index WordPress & Blogger Widget

Leave a Reply

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