Facebook Instant Article

Requirements:To publish a page and its instant articles, the publisher has to go through a review process of Facebook. This requires a well branded page and a minimum of 5 instant articles.

Setup:

  1. Create a new Facebook Page where Instant Articles should be published to facebook.com/instant_articles
  2. Go to the Facebook page
  3. Go to “Publishing Tools” in the menu
  4. In the Navigation select “Configuration” under “Instant articles”
  5. Scroll to “Connect your Site”
  6. Add the given Meta-Tag to your websites HTML
  7. Add the URL of your website in the URL field and click “Claim URL” (this queries the website for certain instant article meta tags)
  8. Go to the Facebook page
  9. Go to “Publishing Tools” in the menu
  10. In the Navigation select “Production articles” under “Instant articles”
  11. Create a new “Instant articles” Post

To embed the player into Facebook Instant Articles, please use this code and replace the playerId and playlistId.

The outer <iframe> is required so that a separate environment gets started, which acts as a mirror of the original canonical URL. Otherwise we are not able to receive the appropriate referrer in our player.

HTML Code for a Video Integration in Instant Article’s

<figure class="op-interactive">
    <iframe width="1600" height="900">
        <style>
            body {
                margin: 0;
            }

            .responsive-container {
                position: relative;
                padding-bottom: 56.25%;
                height: 0;
            }

            .responsive-container iframe {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                border: 0;
            }
        </style>
        <div class="responsive-container">
            <iframe
                src="https://player.glomex.com/integration/1/iframe-player.html?integrationId=[YOUR-PLAYER-ID]&playlistId=[YOUR-VIDEO-ID]"
                allow="autoplay *; fullscreen *; picture-in-picture *; accelerometer *; encrypted-media *; gyroscope *"
                referrerpolicy="unsafe-url">
            </iframe>
        </div>
    </iframe>
</figure>

Full Instant Article Example

<!doctype html>
<html lang="de" prefix="op: http://media.facebook.com/op#">

<head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://support-docs.glomex.com/instant-article">
</head>

<body>
    <article>
        <header>
            <h1>Far from Snooty: Shark named Snooty flashes toothy grin at Diver</h1>
            <!-- The date and time when your article was originally published -->
            <time class="op-published" datetime="2019-08-21T12:00:16Z">August 21st, 12:00 PM</time>
            <!-- The date and time when your article was last updated -->
            <time class="op-modified" dateTime="2019-08-21T12:00:16Z">August 21st, 12:00 PM</time>
            <figure>
                <img
                    src="https://i4thumbs.glomex.com/dC1iaXAzZml2cHBmcmQvMjAxOS8wOC8xNi8xMC8wMF81OF81ZDU2N2VkYThlOTk2LmpwZWc=/profile:original" />
                <figcaption>This is Snooty</figcaption>
            </figure>
        </header>
        <p>A shark named Snooty showed he was anything but by flashing a toothy grin towards a diver. Experienced diver
            Todd
            Thomas was swimming off the coast of Jupiter Island, Florida, on July 21 when he came across a lemon shark
            he
            recognised. As Todd – who was diving with Salty Divers </p>
        <hr>
        <figure class="op-interactive">
            <iframe width="1600" height="900">
                <style>
                    body {
                        margin: 0;
                    }

                    .responsive-container {
                        position: relative;
                        padding-bottom: 56.25%;
                        height: 0;
                    }

                    .responsive-container iframe {
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        border: 0;
                    }
                </style>
                <div class="responsive-container">
                    <iframe
                        src="https://player.glomex.com/integration/1/iframe-player.html?integrationId=eexbs17jzl2qo2c&playlistId=v-bwayt0bu4up5"
                        allow="autoplay *; fullscreen *; picture-in-picture *; accelerometer *; encrypted-media *; gyroscope *"
                        referrerpolicy="unsafe-url">
                    </iframe>
                </div>
            </iframe>
        </figure>
        <hr>
    </article>
</body>

</html>