Gain valuable traction for your web app with OEmbed
You can create dozens of integrations into other web-apps with one implementation of OEmbed.
OEmbed Primer
So what is it? If you’re a Medium writer and you’ve ever pasted a youtube link (like https://www.youtube.com/watch?v=dQw4w9WgXcQ) into an article, it expands into a full video like this:
Or if I paste a page from TED (https://www.ted.com/talks/susan_blackmore_on_memes_and_temes), TED’s own video player comes up:
But did you know that OEmbed supports rich content (even as rich as 3D and full video games)? Basically with OEmbed you can fill a responsive iFrame with virtually anything.
Why bother?
I run a website for sharing Unity WebGL games called SIMMER.io. The technology for the site is pretty solid — early adopters who have shared their games are telling me the ease of uploading gives SIMMER a competitive advantage over similar games sites.
But as much as I hate to admit it, good technology is only half the problem. If prospective game developers don’t know about the site, how can they upload their awesome games there?
So, lacking much of a marketing budget, and being a programmer by trade, I turned to OEmbed. OEmbed indirectly allows developers to share games, not only on SIMMER, but also in places like Medium, Kickstarter and Patreon.
A Win-Win
Game developers get added value — the ability to share their games directly on other sites, and I get this sweet loading screen that backlinks to SIMMER:
OEmbed is one of those things that add value to my site, and also will aid in traction, by delivering games to unique places all around the web.
Use Cases
One of SIMMER’s early adopters, Dan Kondratyuk, developer of Nodulus — Open Source Puzzle Game has recently started using the OEmbed feature in an awesome Unity tutorial that he’s written on Medium:
I also could see bloggers writing about games, wanting to include live demos direct on their sites.
I’m working on recruiting developers to try out this feature on Kickstarter so that they can put a playable demo on their pledge page (similar to how many folks are just sharing game videos today). That way, potential backers will never have to leave the pledge page to get a taste of the actual game being built. (Tweet to me if you know of anybody who wants to try this!)
The technical guts
So, the full spec for OEmbed is available at https://oembed.com/, but that article is a little dry and difficult to parse. It also mentions a lot of obsolete OEmbed methods like using XML in addition to JSON which is totally not necessary in 2017.
Let’s see how I implemented OEmbed using this solitaire game from SIMMER.
(Just to be completely clear, game developers don’t have to worry about any of this — this is all implemented by SIMMER out-of-the-box).
The first step is to let OEmbed consumers (ie. Medium, Kickstarter) “know” that the tech is implemented for this page, and that’s as simple as adding this one line to the HTML of my solitaire page:
<link rel="alternate" type="application/json+oembed" href="https://simmer.io/oembed?url=https%3A%2F%2Fsimmer.io%2F%40pkatsaros%2Funitysolitaire" title="Solitaire | SIMMER.io">This points to an endpoint on my site at https://simmer.io/oembed?url=https%3A%2F%2Fsimmer.io%2F%40pkatsaros%2Funitysolitaire.
That endpoint returns a json structure
{
"provider_url": "https://simmer.io",
"provider_name": "SIMMER.io",
"thumbnail_width": 960,
"thumbnail_height": 600,
"thumbnail_url": "https://simmercdn.com/unity/nfeauO52WjVFbC84aP8HJqHS9FG3/content/ed3216da-7a17-cba0-f616-bd84b135f351/screens/3.png",
"author_name": "pkatsaros",
"title": "Solitaire | SIMMER.io",
"html": "<iframe width='960' height='600' src=\"https://c.simmer.io/static/unityFrame/index.html?url=https%3A%2F%2Fsimmercdn.com%2Funity%2FnfeauO52WjVFbC84aP8HJqHS9FG3%2Fcontent%2Fed3216da-7a17-cba0-f616-bd84b135f351&imagePath=screens/3.png\">",
"width": 960,
"height": 600,
"version": "1.0",
"author_url": "https://simmer.io/@pkatsaros",
"type": "rich"
}This adds some metadata about the embed, but most importantly, creates an <iframe> html snippet:
<iframe width='960' height='600' src=\"https://c.simmer.io/static/unityFrame/index.html?url=https%3A%2F%2Fsimmercdn.com%2Funity%2FnfeauO52WjVFbC84aP8HJqHS9FG3%2Fcontent%2Fed3216da-7a17-cba0-f616-bd84b135f351&imagePath=screens/3.png\">This is the magic! When we paste the URL (https://simmer.io/@pkatsaros/unitysolitaire) into Medium, it autoexpands into the iFrame above, and we now get this:
…well almost. There’s one more step.
Embed.ly and IFramely
Embed.ly is a site (owned by Medium, actually), that provides the “glue” to help sites like Medium, Kickstarter, and Patreon include these types of embeds. They also act as a simple gatekeeper to make sure that content is not overly obtrusive or buggy.
I had to go in and fill out an application to get SIMMER included. I was a little worried because I didn’t implement the “XML” version of OEmbed, but thankfully they didn’t hassle me about this, and I was actually accepted on my first try within a day or two.
Iframely provides a similar service, although I think they have a more automatic approach to accepting OEmbed providers. They provide a pretty nice tool for debugging OEmbed as well.
Wordpress 🙁
Wordpress supports OEmbed, but only via a whitelist. That means you’ll get auto-expanded embeds for major sites like Youtube and Vimeo, but I’ll have to grease a few palms (haha, not really) to get SIMMER included as an OEmbed provider.
Conclusion
This only took me a day or so to implement, and I could see it helping a lot of startups looking for traction.
Hopefully you can see the power of OEmbed, and the added bonuses that you can get for your customers by implementing it. I think it gives developers a great reason to use SIMMER over other games sites. And I get backlinks and more visibility, so everyone wins.
If you liked this article, I’d really appreciate a 👏 or a follow on Medium. It gives me tons of motivation to keep writing about the cool stuff I’m working on.
