Social embeds and interactive graphics that are in the web versions of your articles can also be included in your Instant Articles. These embeds can include custom interactive media, third-party video players, social media (such as Facebook posts, Instagrams, Tweets, YouTube videos or Vines) and other <iframe>
media elements.
Instant Article supported embeds are not limited to those listed on this page. We recommend testing any embed using the op-interactive
tag and checking to see if it renders on both iOS and Android by using the Pages Manager app.
Embeds are specified using the standard HTML <figure>
element, which wraps an <iframe>
element containing the markup for your embedded media. To include any social embed or interactive element in your Instant Article, apply the op-interactive
class to a <figure>
element.
The <figure>
element representing the embed must be included standalone within the body of the article and not enclosed within a <p>
element.
If you implement your embed using a src attribute on the <iframe>
element, we recommend that you specify both the width and height of your <iframe>
. Otherwise, your embedded media may be scaled incorrectly and get cropped. If the size you specify is too wide for the phone’s screen, we will automatically scale the embed down while maintaining its aspect ratio.
For best results on embeds with a src
attribute, input the exact width and height of the <iframe>
used in your webpage. We use those dimensions to determine the aspect ratio and will automatically scale it to the correct size.
Name | Description | Definition |
---|---|---|
Caption | Descriptive text for your embed. | Add the Caption element to your |
Height | The height of your embed in CSS pixels. | Add the |
Width | The width of your embed in CSS pixels. | Add the |
HTML Source [required] | The source of the markup for your embed. | Embed the full unescaped HTML and scripts within the
|
Margin | Left/right margins of your embed. | Add one of the following classes to the
|
You can embed Instagram content within your Instant Article by inserting the Instagram embed code inside of an <iframe>
and wrapping it with a <figure>
element with the op-interactive
class attached.
<figure class="op-interactive"> <iframe> <!-- Include Instagram embed code here. Your embed code should look like: <blockquote class="instagram-media" ... --> </iframe> </figure>
You can embed Facebook content within your Instant Article by inserting the Facebook embed code inside of an <iframe>
and wrapping it with a <figure>
element with the op-interactive
class attached.
<figure class="op-interactive"> <iframe> <!-- Include Facebook embed code here. Your Facebook embed code should contain both the "JavaScript SDK" and the "Embedded Post Tag" parts described at https://developers.facebook.com/docs/plugins/embedded-posts#add-code-manually --> </iframe> </figure>
You can embed Twitter content within your Instant Article by inserting the Twitter embed code inside of an <iframe>
and wrapping it with a <figure>
element with the op-interactive
class attached.
<figure class="op-interactive"> <iframe> <!-- Include Twitter embed code here. Your embed code should look like <blockquote class="twitter-tweet" ... --> </iframe> </figure>
You can embed Vine content within your Instant Article by inserting the Vine <iframe>
embed code inside a <figure>
element with the op-interactive
class attached.
<figure class="op-interactive"> <iframe src="https://vine.co/v/Ot2mpV1YO6F/embed/simple" width="600" height="600"></iframe> </figure>
You can embed YouTube content within your Instant Article by inserting the YouTube <iframe>
embed code inside a <figure>
element with the op-interactive
class attached.
<figure class="op-interactive"> <iframe width="560" height="315" src="https://www.youtube.com/embed/M7lc1UVf-VE"></iframe> </figure>
To render your embed at the full width of the screen, add the no-margin
class to the <iframe>
that wraps the code defining your graphic.
<figure class="op-interactive"> <iframe class="no-margin" src="http://example.com/custom-interactive" height="180" width="320"></iframe> </figure>
To render your embed with its width fixed to the column in which it resides in your article, add the column-width
class to the <iframe>
that wraps the code defining your graphic.
<figure class="op-interactive"> <iframe class="column-width" src="http://example.com/custom-interactive" height="180" width="320"></iframe> </figure>
You can add a caption to your embed by adding a <figcaption>
element within the same <figure>
element representing the embed within your article.
<figure class="op-interactive"> <iframe class="no-margin" src="http://example.com/custom-interactive" height="180" width="320"></iframe> <figcaption>This graphic is awesome.</figcaption> </figure>