I would like to add an embed on https://sites.google.com/view/flyguide in HTML for the weekly journal posts from the Flies of the US and Canada journal.
I don’t mind having to update the embed with a new link or something every week, but I can’t figure out a way to do this without copying the text literally and pasting it in a textbox on the site.
Trying to embed the link automatically with the Google Sites feature only provides a “preview,” not a dynamically-updating option.
I’d like to mention that I tried embedding the journal page, as well as the individual post.
when i do a quick web search, it seems like Google Sites allow embedding of websites only if the page-to-be-embedded allows it. i’m not exactly sure what that means, but that might be what’s going on here.
i’m not familiar with whether Google Sites has an option to implement an RSS feed using a JSON, but if that or something something like that exists, it might be a quick way to implement what i think you’re asking for (using the API response).
otherwise, you could do some quick coding to fetch and parse out the JSON response from the API to create a table or list of project posts. custom coding is a little bit more cumbersome because then you’ll have to implement your own XSS protection, link formatting, etc.
here’s a quick example (screenshot) of what you could render using the results the API (not a great format, but i didn’t want to spend more than a couple minutes on it, and you get the idea):
That actually looks okay for my purposes. I know you don’t want to put in much more effort, but would it be possible for you to remove the Rec #, Published At, etc., except for the Body, and then remove the green bar at the top? Then that would be pretty much perfect, and a link would be all that is necessary.
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>
That code works just fine, thank you! Originally, it didn’t recognize the line breaks, so I went back into the journal post and fiddled with that, and now it’s working.
The YouTube embed seems to be working as well, which is somewhat surprising but satisfying.
i added a <link> tag in the code above which will get the Lato font that you’re using in your Google Site from the Google fonts library so that it can be used when displaying the journal posts. i hoped that Google Sites would somehow just already make the font available to the embedded object, but you actually have to explicitly get the font in that case, i guess. anyway, that should make the fonts look a little more unified.
