How to Publish Content With Facebook Instant Articles

Performance matters, and the big players on the web are addressing performance in their own ways. Google’s answer comes in the form of its controversial AMP; a publishing format which offers a smooth experience for their mobile search results. Google even rank listings that implement AMP more favorably.

Facebook, similarly, has devised its own initiative with Instant Articles allowing it to serve shared web content on its mobile app instantly with a native-mobile experience. Content that has been validated as being an Instant Article will be marked with the lightning emblem when it’s shared anywhere on the Facebook feed.

In this tutorial we’ll learn what “Instant Articles” is and how you can port your own content to this rapid publishing tool. Let’s go!

1. Sign Up

First, you will need to have admin or editor access to a published Facebook Page.

At the time of its inception, Instant Articles was only available to large or medium-sized publishers whose Facebook Page had at least a hundred thousand followers, or likes, with an active audience; little wonder that my pages weren’t eligible to sign up for Instant Articles back then! Nowadays, Facebook has opened Instant Articles up for all publishers of all sizes, you just need to sign up.

Then, select the page.

2. Verify Your Website

You will need to verify that you own the website in question by adding the fb:pages meta tag within the head. Don’t forget to add the URL and press the Claim URL to finalize the verification. You can verify multiple URLs in case your site comprises a number of channels or subdomains, like Medium and Tuts+ (webdesign.tutsplus.com, code.tutsplus.com, etc.).

3. Format the Markup

Before you can publish Instant Articles regularly, you will need to submit at least five articles for review. These articles should use Instant Article compliant formatting, for example:

<!doctype html>
<html lang="en" prefix="op: https://media.facebook.com/op#">
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://acme.com/instant-article-origin">
    <meta property="op:markup_version" content="v1.0">
    <meta property="fb:article_style" content="acme-style"/>
</head>
<body>
    <article>
    <header>
        <h1>Title</h1>
        <h2>Subtitle</h2>

        <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>
        <time class="op-modified" datetime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>

        <address>
            <a rel="facebook" href="http://www.facebook.com/zuck">Zuck</a>
            Zuck is the CEO of Facebook.
        </address>

        <figure>
            <img src="http://via.placeholder.com/350x150" />
            <figcaption>Cool cover header</figcaption>
        </figure>
        
        <h3 class="op-kicker">Web Design</h3>
    </header>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, dolore quasi quos pariatur minus corporis, consequatur amet facere.</p> 

    <figure data-mode="fullscreen">
        <img src="http://via.placeholder.com/350x150" />
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p>

    <figure data-feedback="fb:likes, fb:comments">
        <img src="http://via.placeholder.com/350x150" />
        <figcaption class="op-vertical-center">
            <h1>Image Caption</h1>
        </figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p>
    </article>
</body>
</html>

As you can see above, the Instant Articles format is a plain semantic HTML structure with special classes and attributes. The image, for example, has the data-mode attribute set to fullscreen which will render the image full screen. In the other image, we have a data-feedback attribute set that will allow our users to give a “Like” and attach comments directly to the image.

A couple of custom meta tags are also added within the head tag such as the fb:article_style tag which defines the content styles. In addition, the canonical meta tag should point to the original article; a factor which leads many publishers to prefer Facebook’s Instant Articles over Google AMP. Google AMP is far more cryptic about the location of original work.

4. Submit Your Content

Once you have it ready, submit the content to Facebook.

There are two ways to submit your content. Firstly, you can post it directly through your Facebook account. Within the Publishing Tools screen, you should find the + Create button that will lead you to the form to post the HTML code.

The second approach involves providing a Feed URL that contains the content. This approach may take a while to set up depending on the platform your website is built upon. Fortunately, a plugin is available for popular platforms such as WordPress and Drupal that makes it a little easier to transform your content into a compliant XML format.

Nonetheless, submitting the content manually is the quickest way to publish your content as an Instant Article, especially during these early stages.

5. Preview the Article

To preview the content that you’ve submitted, you will need to install the Facebook Page Manager mobile app. Instant Articles is accessible in the Settings menu on the page Toolbar.

6. Customize the Content Styles

Styling Instant Articles is downright easy, yet also restrictive. Facebook provides an interface to change some components of the article such as the font family, font color, the logo, etc. If you have created a custom style, make sure that the style name is matched with the value set in fb:article_style meta tag.

7. Await the Review Process Results

The review process may take up to three days–and your submission might not be immediately accepted. There could be code errors or styling issues which prevent publication. I once had to reorganize the image header position on an article so it appeared more similar to the one on the website.

Still, once you have been approved you can proceed to add the Feed URL to automatically push content to Instant Articles.

Wrapping Up

Facebook Instant Articles poses some limitations that could be a stumbling block for some websites. For example, it doesn’t support the pre element which is a common tag used on development blogs to render code snippets. Articles that contain this tag are invalid as per the Instant Articles standard. For this reason alone you might not see sites like Envato Tuts+ or Smashing Magazine on Instant Articles.

This doesn’t even address the “should” in all of this. As John Gruber stated, specifically when discussing Google AMP:

“If you are a publisher and your web pages don’t load fast, the sane solution is to fix your f***king website so that pages load fast, not to throw your hands up in the air and implement AMP.” – John Gruber

Our job as web developers has become increasingly more about maintaining content to be compatible across different platforms like AMP, Instant Articles, and if you're lucky, also Apple News (not to mention how the front-end workflow has changed drastically in just a couple of years with the emerging of new tools like Webpack, React, Vue, etc.)

Recently, developers came up with a new initiative coined Progressive Web App (PWA). For sites which are not able to implement Instant Articles or AMP, PWA might be a great alternative. We’ll be looking into it in the next tutorial, I’ll see you there!