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 ) into an article, it expands into a full video like this: https://www.youtube.com/watch?v=dQw4w9WgXcQ Or if I paste a page from TED ( ), TED’s own video player comes up: https://www.ted.com/talks/susan_blackmore_on_memes_and_temes 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 . 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. SIMMER.io 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. “Free” integrations w/ oEmbed 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, , developer of has recently started using the OEmbed feature in an awesome Unity tutorial that he’s written on Medium: Dan Kondratyuk Nodulus — Open Source Puzzle Game _A tutorial on drawing physics shapes with your cursor using Unity3D._medium.com Draw 2D Physics Shapes in Unity 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. ( if you know of anybody who wants to try this!) Tweet to me The technical guts So, the full spec for OEmbed is available at , 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. https://oembed.com/ Let’s see how I implemented OEmbed using this solitaire game from SIMMER. https://simmer.io/@pkatsaros/unitysolitaire (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=" " title="Solitaire | SIMMER.io"> https://simmer.io/oembed?url=https%3A%2F%2Fsimmer.io%2F%40pkatsaros%2Funitysolitaire 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": " ","provider_name": "SIMMER.io","thumbnail_width": 960,"thumbnail_height": 600,"thumbnail_url": " ","author_name": "pkatsaros","title": "Solitaire | SIMMER.io","html": "<iframe width='960' height='600' src=\" ">","width": 960,"height": 600,"version": "1.0","author_url": " ","type": "rich"} https://simmer.io https://simmercdn.com/unity/nfeauO52WjVFbC84aP8HJqHS9FG3/content/ed3216da-7a17-cba0-f616-bd84b135f351/screens/3.png 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\ https://simmer.io/@pkatsaros 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 ( ) into Medium, it autoexpands into the iFrame above, and we now get this: https://simmer.io/@pkatsaros/unitysolitaire Hint: this is a Unity game and only runs well on right now. desktop browsers …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 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. fill out an application http://embed.ly/providers provides a similar service, although I think they have a more automatic approach to accepting OEmbed providers. They provide a pretty nice tool for as well. Iframely debugging OEmbed Wordpress 🙁 Wordpress supports OEmbed, but . 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. only via a whitelist 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 over other games sites. And I get backlinks and more visibility, so everyone wins. SIMMER 👏 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.

Glue

Twitter

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Gain valuable traction for your web app with OEmbed

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Rocco Balsamo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Gain valuable traction for your web app with OEmbed

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Rocco Balsamo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES