Embedding iNat Journal Posts

General
, ,
6

not having worked with Google Sites before, i don’t know off the top of my head exactly the right way to make something that it will definitely play nicely with it, and i expect it would take some fiddling to get things to work right for your purposes (which would be best done by you as the fly guide site developer). that said, the code below can produce a very basic web page that loads the 3 most recent posts from your project. you’re welcome to use / adapt it as you like to suit your purposes. it should work in modern browsers but may not work in older browsers. also note that it doesn’t do some of the things i mentioned in my earlier post, and you’ll have to decide whether that’s problematic or not (and handle, if needed).

it also occurred to me that it’s possible that Google Sites won’t embed your project post page because it may not like nesting an iframe containing the YouTube video in your post inside the iframe of the post page embedded in your fly guide page. you may want to try embedding a post that does not have iframes and see if that behaves more as expected.

<!DOCTYPE html>
<html lang="en">

<head>
<link href='https://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<style>
  * { font-family: Lato, Sans-Serif; }
  a { text-decoration: none; }
</style>
</head>

<body>
<script>
let project_id = 88748;
let posts_to_fetch = 3;
fetch(`https://api.inaturalist.org/v1/projects/${project_id}/posts?per_page=${posts_to_fetch}`)
.then((response) => { 
  if (!response.ok) { throw new Error(`${response.status} (${response.statusText}) returned from ${response.url}`); };
  return response.json();
})
.then((posts) => {
  for (let post of posts.results) {
    document.body.innerHTML += `
      <div>
        <h3><a href='https://www.inaturalist.org/posts/${post.id}'>${post.title}</a></h3>
        <h4>by <a href='https://www.inaturalist.org/people/${post.user?.login}'>${post.user?.login}</a></h4>
      </div>
      </div>${post.body}</div>
    `;
  };
})
.catch((err) => { console.error(err.message); });
</script>
</body>

</html>
1 Like