'Embedding' observations using an iFrame
HOW TO
Paste the following iframe code into your iNat journal (or other website page), change the '0000' to the id number for the observation you wish to display.
<iframe height="172px" width="100%" frameBorder="0" src="https://inat-obs-embed.glitch.me/?obs_id=0000"></iframe>
OPTIONS
height - vertical dimension of the iframe, '172px' should be perfect for most cases. Adjust as required, if it's too small a scroll bar will appear on the right side
width - horizontal dimension of the iframe, adjust as required, either as an exact dimension in pixels(px) or as a percentage(%) of the available space.
frameBorder - 1 or 0, view or hide the iframe border. See examples below
scr - must have https://inat-obs-embed.glitch.me/?obs_id=0000
where 0000 is changed to the required observation ID.
- optional: add &date_format=us
to change the date format to 'DD Month, YYYY, the default is YYYY-MM-DD. See examples below
STATUS
The observation iframe will work as currently displayed in this journal post, but improvement work is ongoing. If something looks broken, give it a moment and try reloading the page. For bugs and suggestions please leave a comment below.
TODO
Specify language for common names
Examples
<iframe height="172px" width="600px" frameBorder="0" src="https://inat-obs-embed.glitch.me/?obs_id=199511059&date_format=us"></iframe>
<iframe height="160px" width="100%" frameBorder="1" src="https://inat-obs-embed.glitch.me/?obs_id=192643475"></iframe>
Name Tests
Error Tests
No obs_id parameter in the iframe src url
No observation ID
Invalid observation ID