Pages

May 14, 2020

Embedding HTML Clippings




Okay, I've reviewed some information about folder export and tag export, and now I want to talk not just about the HTML page that Inoreader generates for the export, but also the iframe code snippet you can use to embed that page inside a blog post, webpage, or LMS Page.

You might have noticed that Inoreader provides you with an iframe snippet in the HTML export dialogue box:



In the same way that the URL for the HTML page updates as you change the parameters, so does the iframe snippet. When embedding content, usually the width and height parameters are the most important, and of course you can also select all kinds of other iframe parameters. I'm not an expert, but that's all that's going on here: Inoreader is taking the address of the HTML page and then giving you the iframe code snippet you need to embed that HTML page with the various iframe parameters. If you are an iframe expert, you can edit that code snippet however you want with the iframe parameters you want to use.

EXAMPLES

So, probably the best thing I can do here is just show examples of how/where I've used the iframe option to embed Inoreader content in other spaces.


WEBPAGE. I already shared earlier how I use Inoreader to embed a stream of my latest blog posts (combined across multiple blogs) here at my own personal homepage, MythFolklore.net.

Here's that snippet:

<iframe width="700" height="900" src="https://www.inoreader.com/stream/user/1005987531/tag/Laura%20Blogs/view/html?cs=m&n=3&w=620" frameborder="0" tabindex="-1"></iframe>



As a class-related example, here's a webpage in the class wiki where I share the content stream for a specific assignment in class: Wikipedia Trails. Especially at the beginning of the semester, it can be helpful for students to see examples of other student work for an assignment, so I include these pages together with the instructions so that students who learn best by example can take a look.

Here's that snippet:

<iframe width="620" height="800" src="http://www.inoreader.com/stream/user/1005987531/tag/OU%20WikipediaTrail/view/html?cs=m&t=Snippets:&n=50&w=500" frameborder="0" tabindex="-1"></iframe>



BLOG POST. You can see how I embedded the Summer2020 blog stream in this blog post: Latest Posts via Inoreader.

Here's that snippet:

<iframe frameborder="0" height="3300" src="https://www.inoreader.com/stream/user/1005987531/tag/Summer2020post/view/html?cs=m&t=Summer2020%20Blog%20Fest%3A&n=12" tabindex="-1" width="100%"></iframe>



LMS. This is one of my very favorite things: embedding the class blog stream inside Canvas. It's the Canvas blog invasion! This is also where students "see" the blog network as a whole, and I use this page as a jumping off point for some assignments in class.

Here's that snippet:

<iframe src="https://www.inoreader.com/stream/user/1005987531/tag/OU%20MFPosts/view/html?cs=m&t=Snippets:&n=50&w=600" width="720" height="5000"></iframe>



Okay, those are some examples, and I'm glad to brainstorm about ideas and possibilities anytime. I export lots of content from my class blog streams (and also from Diigo; more about that in a separate post), and it's fun to think about new ways to re-use content, putting it in new contexts that add new meaning and purpose.

What's up next? I'll talk about Exporting as RSS, which is also a great way to share the Inoreader content that you are collecting.