'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

Publicado el 17 de febrero de 2024 a las 09:06 AM por lwnrngr