Embeds for Facebook Instant Articles

All Iframely embeds should work fine in Facebook Instant Articles out-of-the-box. There are couple traps that you should avoid though.

How-to: use op-interactive

Please refer to Facebook documentation about `op-interactive`:
developers.facebook.com/docs/instant-articles/reference/embeds

Using Iframely embed codes with Instant Articles is simple:

<figure class=“op-interactive”>
    <iframe>

        ... place HTML code you get from Iframely here...

    </iframe>
</figure>

Any HTML code you get from us should work well: our iFrame helpers, cards, or native publisher's "as-is" code.

Avoid pitfalls

iFrame tag should not have attributes

Leave iFrame tag in op-interactive wrapper empty: just <iframe>.

If Facebook sees any attributes in iFrame, it will also request that width and height are supplied, and then FB will use those for resizing iFrames dynamically using fixed aspect-ratio, which isn't right for a number of embeds publishers.

Make sure figure is standalone

We saw people having issues with Instant Articles because <figure> was also wrapped into <p> element. The <figure> should stand by itself. Here's what Facebook's documentation says:

The <figure> element representing the embed must be included standalone within the body of the article and not enclosed within a <p> element.

Please let us know if you run into other issues. We'll be debugging with you and updating this manual as required.

Previous article: AMP format
Next article: React