1. Docs
  2. Integrations

Iframely embeds for Instant Articles

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

If you’re new to Instant Articles, follow these instructions to sign up for it with Facebook.

How-to: use op-interactive

Please refer to this Facebook documentation about op-interactive.

Using Iframely embed codes with Instant Articles is simple:

<figure class="op-interactive">
  <iframe class="no-margin">
    <!-- 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.

Transformer rules

If you use Instant Article SDK with automatic Transormer Rules, here’s the rule that you need to transform Iframely rich media embeds into op-interactive given above.

The below transformer rule code assumes that you wrap all Iframely rich media embeds into a <div class='iframely-wrapper'> … </div>:

{
  "class": "InteractiveRule",
  "selector": "div.iframely-wrapper",
  "properties": {
    "interactive.iframe": {
      "type": "children",
      "selector": "div.iframely-wrapper"
    }
  }
}

If you use WordPress with Gutenberg editor, your rich media is wrapped into two divs. Get your transformer rule from this gist.

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

Docs