Instant Articles Code Samples

Instant Articles are constructed from a set of elements that define the unique features and display components of the article. If you're just getting started with Instant Articles, begin by reading our Creating Articles guide for a tutorial on how to begin publishing Instant Articles to your Facebook Page.

This document provides detailed guidance on how to use and configure Instant Articles markup. It also includes markup for a sample article to show how the markup is implemented.

To stay up-to-date on Instant Articles improvements and technical updates, subscribe to the Instant Articles News blog.

Elements

The following elements represent the supported set of components used to build Instant Articles.

Element Description

Ad

An advertisement embedded inside an article.

Analytics

Analytics code inside of an article.

Animated GIF

An animated GIF inside of an article.

Article

Top-level configuration for your Instant Article.

Author

Defining an author of your article.

Blockquote

Highlight a quotation with source attribution.

Body Text

Text content within your article.

Caption

Descriptive text providing additional context to a media element.

Embeds

Adding a social embed or interactive graphic inside an article.

Feedback

Controlling likes and comments on articles and media elements.

Footer

Adding credits and copyright information into your footer.

Header

A visual header rendered within your article.

Image

An image within an Instant Article

List

A collection of items in list form.

Map

Interactive map within an Instant Article.

News Feed Preview

Preview of your Instant Article in News Feed.

Pullquote

Highlight key points or phrases in an Instant Article.

Related Articles

A list of articles or sponsored content related to an Instant Article.

Slideshow

A slideshow display for multiple images in an Instant Article.

Video

A video within an Instant Article.

Sample Article

The following example illustrates the high-level structure of an Instant Article. For more detail on each element, refer to the specific details in the Elements section of this document.

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://example.com/article.html">
    <meta property="op:markup_version" content="v1.0">
  </head>
  <body>
    <article>
      <header>
        <!-- The title and subtitle shown in your Instant Article -->
        <h1>Article Title</h1>
        <h2>Article Subtitle</h2>

        <!-- The date and time when your article was originally published -->
        <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>

        <!-- The date and time when your article was last updated -->
        <time class="op-modified" dateTime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>

        <!-- The authors of your article -->
        <address>
          <a rel="facebook" href="http://facebook.com/brandon.diamond">Brandon Diamond</a>
          Brandon is a avid zombie hunter.
        </address>
        <address>
          <a>TR Vishwanath</a>
          Vish is a scholar and a gentleman.
        </address>

        <!-- The cover image shown inside your article --> 
        <figure>
          <img src="http://mydomain.com/path/to/img.jpg" />
          <figcaption>This image is amazing</figcaption>
        </figure>   

        <!-- A kicker for your article --> 
        <h3 class="op-kicker">
          This is a kicker
        </h3>

      </header>

      <!-- Article body goes here -->

      <!-- Body text for your article -->
      <p> 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 ad within your article -->
      <figure class="op-ad">
        <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="60" width="320"></iframe>
      </figure>

      <!-- Analytics code for your article -->
      <figure class="op-tracker">
          <iframe src="" hidden></iframe>
      </figure>

      <footer>
        <!-- Credits for your article -->
        <aside>Acknowledgements</aside>

        <!-- Copyright details for your article -->
        <small>Legal notes</small>
      </footer>
    </article>
  </body>
</html>