Using Glitch to embed apps in Medium

Opening up the potential of Medium for learning

This is cool — you can add Glitch apps to Medium posts with some control over embed options. It seems the height is fixed (square), it can float left (but may only work for narrow apps) or be middle column width.

At the University of Manchester Library, we have been ‘using Medium for learning’ for a few years now (e.g. Open Knowledge in HE and Digital Society)— but embed options such as Glitch and (forthcoming) H5P are really opening up the potential in this area.

In particular, I like the fact that you can publish a post on Medium with a CC license, people can reuse your content and even get it in a flexible format using `?format=json` on the URL. Now, you can embed widgets/apps in your post, which can be published under open source licenses, hosted on an open platform, can run their own open APIs, with code viewable/remixable from the app itself. It’s perfect for creative learning about technology, but also for general eLearning. It’s the future of the open web!

Below is an app I made, to demo a learning scenario. See if you can do it :¬)

How did I embed the above?

Glitch has changed its embed code generator in favour of embedding source code rather than just the app, and also added a button to generate a Medium embed link. However to embed the app alone, we have found the best method is to use the below URL, replacing APPNAME with the name of the app:

https://glitch.com/edit/#!/APPNAME?previewSize=100

For example, for the shufflator app, use this URL to embed in Medium:

https://glitch.com/edit/#!/shufflator?previewSize=100

If the app does not preview, try its draft link, and check any addons such as ad-blockers/privacy tools (Medium is loaded cross-domain).

Explanation of Medium/Embedly Glitch URLs

Below is a breakdown of the components of the template URL for reference, and in case of any future changes (https://glitch.com/edit/#!/APPNAME?previewSize=100)

• glitch.com: Embedly only recognises glitch.com as opposed to app-specific urls like appname.glitch.me
• /edit: Embedly only works with /edit — this may change in future (the embed standard is /embed/ and this is not obvious)
• /#!APPNAME: Make sure there is no path other than APPNAME after the #! — Glitch’s embed code generator makes URLs like /edit/#!/edit … but we have not found these to always work as expected with Embedly
• ?previewSize=100: This parameter takes a number from 0–100 which determines the ‘slider’ position between ‘just show the code’ (0) and ‘just show the app’ (100). For our purposes this is the key parameter.

Original method for reference: got embed code from the Glitch editor, changed the base URL to the edit link (i.e. change /#!/embed/ to /#!/edit/), keeping the query string with the embed options after this. See here for info (it’s not obvious).

What are some technical features/limitations?

Frame size seems to be fixed at 700x700 pixels.

Anything you might normally handle through an URL, you may need to handle in the interface (because it will always load a default page). The example has more flexibility as a standalone which isn’t currently available in the embed — however there’s no reason it couldn’t be built in.

See, for example this Glitch app which performs a redirect to another Glitch app with certain parameters applied. This allows a single app to be loaded in a number of different contexts, by creating a redirect app for each one.