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.

You must upload a 360 video for the attribute to work. Adding a 360 attribute to a non-360 video will not have any effect.

<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>

Feedback Settings

The ability to like, comment and share in Instant Articles is automatically turned on for all articles. By default, readers can like, comment or share at the bottom of each Instant Article. Additionally, they can provide feedback on individual images, videos, slideshows, GIFs and maps.

Both of these features can be turned off across all articles in the Publishing Tools section of your Page. Go to Configuration under Instant Articles, then scroll down to Feedback Settings. Unchecking the first box turns off the ability to like and comment on the article itself (the ability to share will remain) while unchecking the second lets you turn off feedback for all individual assets (images, videos, slideshows, GIFs and maps).

The Likes and Comments counts displayed in an Instant Article include only feedback made directly in the Instant Article, not Likes or Comments made on News Feed posts where the article was shared. However, all interactions in the article and on the post are taken into account when deciding who sees your content in News Feed.

Note: Any comment a reader makes will only appear within the Instant Article itself. If you'd like comments on your website and comments in Instant Articles to be a single unified thread, you'll need to use the Facebook plugin. Read more below.



When “show on articles” is checked, users can like, comment and share at the bottom of articles:

When “show on individual assets” is checked, users can like, comment and share individual assets (images, videos, slideshows, gifs and maps):

Manual Feedback Control

Article-Level Comments

If you'd like to override your settings and disable (or enable) comments on specific articles, insert the element below in the <head> tag. Your feedback settings in Publishing Tools will stay the same for future Instant Articles, but this code can modify any individual article.

Note: This only applies to likes and comments at the bottom of the article.

To opt-out of article-level likes and comments for individual articles:

<head>
    <meta property="fb:likes_and_comments" content="disable">
</head>

To opt-in to article-level likes and comments for individual articles:

<head>
    <meta property="fb:likes_and_comments" content="enable">
</head>

Asset-level Comments

You can also override your settings for all individual assets (images, videos, slideshows, GIFs and maps) and customize feedback for specific items using the code below.

To enable likes, comments and shares on an asset:

<figure data-feedback="fb:likes fb:comments">
    <img src="http://some/image/url.jpg">
</figure>

To disable all feedback settings on an asset:

<figure data-feedback="fb:none">
    <img src="http://some/image/url.jpg">
</figure>

To enable likes and shares on an asset but disable comments:

<figure data-feedback="fb:likes">
    <img src="http://some/image/url.jpg">
</figure>

Mirroring and Moderating Comments

Moderating Comments

Comment moderation is available on article-level comments but not on individual assets. In order to moderate comments on the article level you'll need to install the Facebook Comments plugin. You can blacklist words and phrases and keep consistency between your mobile web article and your Instant Article.

Follow the instructions for using the plugin's code configurator to generate the code you'll need to install the plugin.

Read more about comment moderation and learn how to set up the comment moderation tool.

Mirroring Comments

To sync the conversation across your mobile web article and Instant Article and create a unified comment thread, install the Facebook Comments plugin. If you already use the plugin, comments will be synced and mirrored automatically. Enabling comments for Instant Articles under Feedback Settings will only affect the Instant Article version of your article.

If want to include comments made on your original Page post in News Feed to be part of the unified comment thread, you'll need to turn on comment mirroring in Settings of the moderation tool.