Interactive Features

Instant Articles offers several native interactive features to engage audiences in new ways. You can add these elements to your Instant Articles automatically by including the relevant markup in your CMS translation, or you can add them manually. Experience our example articles for yourself to see these features in action.

Autoplay Video

Videos can be set to autoplay and to loop, creating atmospheric, ambient effects. The “page” comes to life.

Note that you must use the Video element to include autoplaying video. Third-party players do not support autoplay.

The simplest representation of a video within an Instant Article is to wrap a <video> tag with a <figure> element and have the enclosed <source> element point to the URL source of the video. Discover more options for formatting videos.

<figure>
  <video>
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />  
  </video>
</figure>

Tap to Expand, Tilt to Explore

In-line photos and videos expand to fill the screen when tapped. To explore beyond the screen frame, simply tilt the phone.

The expanded mode adds new dimensions to and works best with richly detailed, high-fidelity imagery.

The simplest representation of an image within an Instant Article is to wrap an <img> tag with a <figure> element and have the src attribute point to the URL source of the image. Discover more options for formatting images.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" />
</figure>

Fullscreen Snap-to-Frame

Images and videos can also be set to appear full frame and will gently snap into place, creating a stepped, card-by-card scrolling experience for readers.

Images will crop full-bleed to the device frame. (Consider using portrait video shot on an iPhone as one option.)

To render an image in full screen as a reader scrolls through your article, attach the data-mode attribute to the <figure> element representing your image and set the content to fullscreen. Discover more options for formatting images.

<figure data-mode="fullscreen">
  <img src="http://mydomain.com/path/to/img.jpg" />
</figure>

3D Rotating Maps

Hovering satellite-view maps can be created by simply specifying a GPS point and picking the desired zoom.

Photographic or cartographic imagery, your choice.

To include a map within your Instant Article, use a <figure> element with the op-map class attached. This <figure> must include a JSON <script> in GeoJSON format with the op-geotag class attached. Discover more options for formatting maps.

<figure class="op-map">
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",
      "geometry": 
        {
          "type": "Point",
          "coordinates": [23.166667, 89.216667]    
        },    
      "properties": 
        {      
          "title": "Jessore, Bangladesh",      
          "radius": 750000,      
          "pivot": true,      
          "style": "satellite",
        }
     }  
  </script>
</figure>

Geotagging

A reference map can be added to any photograph.

Tapping on the globe icon flips to map mode. Tap again to return to the image.

You can add location context to an image in your article by adding a JSON <script> with the op-geotag class attached within the <figure> representing the image. The content of the script must use the GeoJSON format to specify the location. Discover more options for formatting images.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" />
  <script type="application/json" class="op-geotag">  
    {
      "type": "Feature",    
      "geometry": {      
        "type": "Point",
        "coordinates": [23.166667, 89.216667] 
      },    
      "properties": {
        "title": "Jessore, Bangladesh",
        "radius": 750000,
        "pivot": true,
        "style": "satellite",
      }  
    } 
  </script>
</figure>

Slideshows

Group several photos together using our native slideshow feature.

The simplest representation of a slideshow within an Instant Article is to wrap a series of Image elements within a <figure> element with the op-slideshow class attached. Discover more options for formatting slideshows.

<figure class="op-slideshow">
  <figure>
    <img src="http://mydomain.com/path/to/img1.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img2.jpg" />
  </figure>
  <figure>
    <img src="http://mydomain.com/path/to/img3.jpg" />
  </figure>
  <figcaption>This slideshow is amazing.</figcaption>
</figure>

Embeds

Instant Articles also host web-based content in mini-browser windows. You can easily embed ads, social, interactive graphics and analytics. Learn more about formatting embeds.

Don’t feel constrained by today’s feature set! We want to hear from you about ways to help make mobile storytelling even better. The team here will be continuously innovating and iterating on the Instant Article experience—both on the tools that you use to draft stories and on the final versions that your readers see. We value your creative input.

360 Degree Photos and Videos

Implementing 360 Degree Videos

There are two ways to ingest 360 videos in an Instant Article. The first is by uploading them, where you point directly to the media file and use the native Instant Articles video player. The other is to embed them, where you simply embed the 360 video you've already uploaded to Facebook.

Note: 360 videos and images will only appear on version 68 or higher on the Facebook for iOS app and version 99 or higher on Facebook for Android.

Upload Your Video

To upload your 360 video you'll use the normal code for our native video player but with the attribute data-fb-parse-360 in the basic <video> element to enable your video to render in 360. Instead of pointing the <source src=> to a normal video, you provide the link to the 360 video file.

<figure>
  <video data-fb-parse-360 >
    <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4"/>  
  </video>
</figure>

Embed Your Video

If you've already uploaded a 360 video to Facebook, you can simply embed that video from your Page into your Instant Article.

Embed a 360 video uploaded to Facebook 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. --    <iframe><figure>

Find the embed code for your video by clicking on the arrow at the top right of the post, selecting embed and then copying the code.

Visit our documentation page on social media embeds for more information.

Implementing 360 Degree Photos

Similarly with 360 videos, you can either upload a 360 photo or embed one from a Facebook post.

Upload Your Photo

To upload a 360 photo, you'll use the normal code for inserting an image. Any panoramic image will automatically be rendered as a 360 photo.

The simplest representation of an image within an Instant Article is to wrap an <img> tag with a <figure> element and have the src attribute point to the URL source of the image.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" />
</figure>

If you'd like to disable your Instant Article from automatically rendering panoramic photos as 360, add the attribute data-fb-disable-360.

<figure>
  <img src="http://mydomain.com/path/to/img.jpg" data-fb-disable-360 />
</figure>

Embed Your Photo

You may also embed a 360 photo from a Facebook post into your article. To do so, follow these steps:

Step 1. Click on the photo from the post, you'll need to get the URL from the specific photo you wish to include. The photo should appear like it does below.

Step 2. Copy the URL from the address bar, then paste it under 'URL of Post' in our Code Generator. If you select 'include full post' you will be including the caption from the Post. Click on Get Code.

Step 3. Select iFrame at the top of the window and then copy the code under Step 2.

Step 4. Insert that code into the Embed element below.

<figure class="op-interactive">
<iframe>!-- Include Facebook embed code here. --    <iframe><figure>