Native Embeds

Two weeks ago Embedly announced it was acquired by Medium. In that post we promised to continue to improve the product. This is the first feature that we are adding as progress towards that goal.

Native embeds are for sites like Instagram, Facebook and Reddit that use JavaScript instead of iframes to create embeds. Currently, Embedly fits these embeds into existing buckets like video or photo embeds instead of returning a JavaScript embed.

Take a look at these two examples. On the left is the Instagram’s native embed. On the right is Embedly’s standard embed.

The standard photo embed is easier to deal with for a developer to layout an image within a design than a JavaScript embed. However, we have found that publishers would much rather use the native embed as it shows the full context of the author, service, and comment.

We had to figure out a way of making it easy for developers to use these JavaScript embeds without worrying about sizing issues. The native flag is what we came up with.

If you pass native=true to the API, Embedly will pass back an iframe like so for Instagram:

Within that iframe Embedly will use Instagram’s native JavaScript to build the embed and display it correctly to the end user. The key benefits here are that all the responsive sizing for iframes will still work and the 3rd party JavaScript is isolated to that frame. Here’s an example of this embed:

There is one catch though, Embedly will need to be able to resize the height of the iframe on load and when the page resizes. Native embeds have variable heights. For example an Instagram image could be portrait or landscape and the comment could be 3 or 1,000 words.

When Embedly creates the iframe we make a guess as to the height of the embed (a highly educated one) and return that in the response. Once the native embed is rendered we send the final height measurement to the parent via postMessage. That message is a JSON encoded string that looks like this:

The parent can use this information to resize the iframe accordingly to make sure the embed isn’t being cut off or has too much whitespace.

We have written some documentation about the JavaScript that you need to add to your site to make Native embeds work. You can find it here.

We hope that this new feature allows us to add more types of embeds that needs special sizing to appear correctly on every page. If you have any questions, as always we are happy to help, you can reach us at support@embed.ly.