iNaturalist.org · Observations Widget

Observations by you · from a place · for a taxon

Observations Widget

Configure a widget to show iNaturalist.org observations on your website or blog. You may have to include the embedded CSS in the <head> of your HTML. Feel free to re-write the CSS.

Settings

Preview BG Color

Widget code

Copy and paste this into your own HTML.

<style type="text/css" media="screen">
.inat-widget { font-family: Georgia, serif; padding: 10px; line-height: 1;}
.inat-widget-header {margin-bottom: 10px;}
.inat-widget td {vertical-align: top; padding-bottom: 10px;}
.inat-label { color: #888; }
.inat-meta { font-size: smaller; margin-top: 3px; line-height: 1.2;}
.inat-observation-body, .inat-user-body { padding-left: 10px; }
.inat-observation-image {text-align: center;}
.inat-observation-image, .inat-user-image { width: 48px; display: inline-block; }
.inat-observation-image img, .inat-user-image img { max-width: 48px; }
.inat-observation-image img { vertical-align: middle; }
.inat-widget-small .inat-observation-image { display:block; float: left; margin: 0 3px 3px 0; height:48px;}
.inat-label, .inat-value, .inat-user { font-family: "Trebuchet MS", Arial, sans-serif; }
.inat-user-body {vertical-align: middle;}
.inat-widget td.inat-user-body {vertical-align: middle;}
</style>
<div class="inat-widget">
    <div class="inat-widget-header"><a href="http://www.inaturalist.org/"><img alt="Logo-small" src="http://www.inaturalist.org/images/logo-small.gif" /></a></div>
  <script type="text/javascript" charset="utf-8" src="http://www.inaturalist.org/observations.widget?layout=large&limit=5&order=desc&order_by=observed_on&taxon_id=47170"></script>
  <table>
    <tr class="inat-user">
      <td class="inat-user-body">
        <strong>
            <a href="http://www.inaturalist.org/taxa/47170-Fungi">View more observations of Fungi on <nobr>iNaturalist.org »</nobr></a>
        </strong>
      </td>
    </tr>
  </table>
</div>

Note

New observations may take up to 15 minutes to appear in the widget.