How to Format a Facebook Instant Article

Published in

Mobile Publishing

5 min readOct 26, 2015

Instant Articles are created with HTML5, so specifying page elements is done in a way that’s similar to standard web publishing. In many cases, publishers can reuse code created for their web-based articles to generate versions that work as Instant Articles.

1. Required Article Elements

Every Instant Articles requires some basic information to specify how the article should be presented to readers. This metadata is defined in the <head> of the HTML document, and it includes information such as the canonical URL (which ties the Instant Article back to its web-based counterpart) and the specific style that should be applied to the content.

A canonical link is required in the <head> of every Instant Article, and this must be an absolute URL. If this URL is not present, Facebook will display the canonical link defined for the <item> in your RSS feed. If a canonical link is not provided in either the article’s<head> or in the RSS feed, Facebook will ignore the article.

<head>
  <meta charset="utf-8">
  <meta property="op:markup_version" content="v1.0">  <!-- The URL of the web version of your article --> 
  <link rel="canonical" href="http://example.com/article.html">  <!-- The style to be used for this article --> 
  <meta property="fb:article_style" content="myarticlestyle">
</head>

For additional detail on how to set up article-level configurations of your Instant Article, refer to theInstant Articles Format Reference.

2. Specifying The Article Cover

When readers first open an Instant Article, they see an article “cover” which acts as a visual header for the body content. The cover of each Instant Article is specified by the elements in the <header> section of the <article> block, which lives in the <body> of the HTML document. These elements include:

Media type: Image, Video or Slideshow
Title
Subtitle
Author(s)
Kicker
Published Time
Modified Time

<body>
  <article>
    <header>
      <!-- The cover image shown inside your article --> 
      <figure>
        <img src="http://mydomain.com/path/to/img.jpg" />
        <figcaption>This image is amazing</figcaption>
      </figure>      <!-- The title and subtitle shown in your article -->
      <h1> Title </h1>
      <h2> Subtitle </h2>      <!-- A kicker for your article -->
      <details>
        <summary>Kicker</summary>
        This is a kicker
      </details>      <!-- The author of your article -->
      <address>
        <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
        Brandon is a avid zombie hunter.
      </address>      <!-- The published and last modified time stamps -->
      <time class="op-published" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
      <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>
    </header>
  </article>
</body>

For additional detail on how to configure the cover of an Instant Article, refer to the Instant Articles Format Reference.

3. Body Content Formatting

The standard HTML elements that define the body elements of your web-based articles also define the corresponding elements for the Instant Article version. Body text in your article is defined using <p>tags, while image and video content is defined using <figure> elements.

<body>
  <article>
    <!-- Body text for your article -->
    <p> This is some Instant Article content. </p>     <!-- A video within your article -->
    <figure>
      <video>
        <source src="http://mydomain.com/path/to/video.mp4" type="video/mp4" />
      </video>
    </figure>    <!-- An image within your article -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg" />
      <figcaption>This image is amazing</figcaption>
    </figure>  </article>
</body>

4. Creating Rich-Media Elements

In addition to standard article body text, Instant Articles also provide support for rich media elements, such as likes and comments on media, audio captions, and interactive maps. These elements are implemented with simple HTML5, and they are implemented natively within Instant Articles to provide a crisp reader experience. Special elements include:

Slideshows
Audio Captions
Interactive Maps
Geotagged Media
Likes and Comments on Media

<body>
  <article>
    <!-- A slideshow within your article -->
    <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>
    </figure>    <!-- An audio caption on an image -->
    <figure>
      <img src="http://mydomain.com/path/to/img.jpg">
      <audio title="audio title">
        <source src="http://foo.com/mp3">
      </audio>
    </figure>    <!-- A map within your article -->
    <figure class="op-map">
      <script type="application/json" class="op-geotag">  
        {
          "type": "Feature",
          "geometry": 
            {
              "type": "Point",
              "coordinates": [ [23.166667, 89.216667], [23.166667, 89.216667] ]    
            },    
          "properties": 
            {      
              "title": "Jessore, Bangladesh",      
              "radius": 750000,      
              "pivot": true,      
              "style": "satellite",
            }
        }  
      </script>
    </figure>    <!-- A geotagged image -->
    <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], [23.166667, 89.216667] ] 
            },    
          "properties":
            {
              "title": "Jessore, Bangladesh",
              "radius": 750000,
              "pivot": true,
              "style": "satellite",
            }  
        } 
      </script>
    </figure>    <!-- An image with likes and comments enabled-->
    <figure data-feedback="fb:likes,fb:comments">
      <img src="http://foo.com/1.jpg"/>
      <figcaption>Image caption</figcaption>
    </figure>  </article>
</body>

5. Adding Embedded Media

You can embed external media directly within your Instant Article. External media may include interactive graphics from your website, content from social networks or advertisements. Embedded content is defined using the standard HTML5 <figure> element, with specific classes provided for different types of content, as shown here:

<body>
  <article>
    <!-- An interactive graphic -->
    <figure class="op-interactive">
      <iframe class="no-margin" src="http://example.com/custom-interactive" height="60"></iframe>
    </figure>    <!-- A post from Instagram -->
    <figure class="op-social">
      <iframe>
        <!-- Include Instagram embed code here -->
      </iframe>
    </figure>    <!-- An advertisement -->
    <figure class="op-ad">
      <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
    </figure>  </article>
</body>

6. Configuring A News Feed Preview

When a reader encounters your Instant Article in Facebook’s News Feed, they are shown a preview of the article (in much the same way article previews are shown in News Feed for the web version of articles). By default, the News Feed preview for an Instant Article displays with the same title, description, and image as the web-based version of your article. This information is defined using theOpen Graph meta tags located in the <head> of the web version of your article.

This information is not defined directly in the markup for the Instant Articles version of the article. It must exist in the web version of your article.

<head>
  <meta property="og:title" content="Article title">
  <meta property="og:description" content="Article description">
  <meta property="og:image" content="http://myserver.com/image.jpg">
</head>

You can choose to replace the default News Feed preview image with a video that’s included as part of your Instant Article. To do this, add the fb-feed-cover class to any Video <figure> within the article’s <body>. The title and description for the preview will still match the preview for your web-based article, and they will be taken from the Open Graph meta tags defined on the web version of your article.

<body>
  <figure class="fb-feed-cover">
    <video autoplay>
      <!-- Media element to be shown in the News Feed preview -->
      <source src="http://example.com/NFVideo.mp4" type="video/mpeg" />
    </video>
  </figure>
</body>

PageFrog is an free WordPress plugin designed to help publishers easily publish and manage content for mobile formats such as Facebook Instant Articles and Google AMP HTML. Download PageFrog Now