Learn New Things in Digital Marketing Techniques

distribution of Instant Articles to Facebook and manage how Instant Articles are published and displayed.

Requirements

Instant Articles are managed within the framework of a Facebook Page. To begin publishing Instant Articles, you must have:
  • An existing Facebook Page.
  • An Admin or Editor role on the Page.

Sign Up for Instant Articles
Set up your account and get access to publishing tools:
1.    Log in to your Facebook account and go to facebook.com/instant_articles/signup.
2.    Select the Facebook Page that you’d like to use to manage your Instant Articles.
3.    Agree to the Instant Articles Terms, which contain our content and advertising policies.
4.    To access the tools, click on Publishing Tools on your Facebook Page, and go to Instant Articles in the left navigation bar.
Develop and Submit Your Sample Articles
Import articles from your content management system and render them as Instant Articles:
1.    Upload your logo and create customized styles to reflect your publication’s look and feel.
2.    Import your articles with the Instant Articles API or an RSS feed and create templates for your article markup. Or, if you use a third-party publishing platform like WordPress, check for one of the easy-to-use plugins maintained by our partners.
3.    See how your articles render by using Facebook’s Pages Manager app for iPhones or Android devices.
4.    Submit a batch of articles for review—the Instant Articles team will approve it or ask you to make updates so your articles follow content and advertising policies.
Begin Publishing
Give your mobile readers an experience that is beautiful, fast and immersive:
1.    Use the auto-publish setting for RSS feeds so that all your articles load as Instant Articles in Facebook.
2.    Rely on the Instant Articles Developer blog for new features and updates: developers.facebook.com/ia/blog.
3.    Continue to analyze your traffic and engagement and publish Instant Articles to see how the experience grows your readership on Facebook. To see the maximum benefits of the program, we recommend publishing 100% of your content as Instant Articles.



How to Format an Instant Article

Instant Articles are created with HTML, 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.
CSS is not supported for styling. Refer to our Design Guide for instructions on creating and modifying styles.

1. Required Article Elements

Every Instant Article 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 the Instant Articles Format Reference.

2. Specifying The Article Header

When readers first open an Instant Article, they see an article header which acts as a visual "cover" for the body content. The header 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 or Video
  • Title
  • Subtitle
  • Author(s)
  • Kicker
  • Published Time
  • Modified Time
You can select which elements of the published time (day, date, month, year and time) will appear in your articles in the Style Editor tool. Learn how to do this in the Creating and Modifying Styles section of the Instant Articles Design Guide.
<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 -->
      <h3 class="op-kicker">
        This is a kicker
      </h3>

      <!-- 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 and interactive maps. These elements are implemented with simple HTML, and they are implemented natively within Instant Articles to provide a crisp reader experience. Special elements include:
  • Slideshows
  • 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>
        

    <!-- 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 HTML <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 the Open 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>

Publishing and Editing Articles

You can automate the publication of Instant Articles on Facebook with secure RSS feed. In addition, Facebook provides a web-based article editor that's accessible through your Facebook Page. The editor tool enables you to manually edit and publish individual Instant Articles.

Introduction to Importing Articles

This document provides an overview of the systems that enable publishers to automate the distribution of Instant Articles to Facebook and manage how Instant Articles are published and displayed.

Choose the Best Method for You

Instant Articles offers three ways to convert your mobile web articles to Instant Articles:
  1. by using a supported third-party publishing tool such as the WordPress plugin;
  2. with the Instant Articles API;
  3. or through an RSS feed.

API or RSS

If you use a custom CMS, setting up a dedicated RSS feed feed or using the Instant Articles API are the ways to go. The main difference between the two is that using the API allows you to manage articles and receive errors and alerts instantaneously through your own CMS. If you use an RSS feed, Facebook pulls articles from the feed several times an hour. And you’ll need to use the Publishing Tools section of your Facebook Page to delete articles and see errors and alerts.

Third-Party Options

WordPress and Drupal support Instant Articles plugins. In total, more than 10 partners offer native integrations. If you don’t have a team of developers, a plugin is the easiest solution to set up and maintain. It’s a great way for bloggers or independent publishers using third-party platforms to publish Instant Articles. Learn more about the Instant Articles Partners Program.

Before You Get Started

Bear in mind a few important concepts that apply no matter how you import your content to Facebook.
  • Content distributed via RSS or API must be formatted in Instant Articles markup. After Instant Articles-formatted content is distributed to Facebook, a web-based editor (accessible via your Facebook Page) is provided to revise and manage the content as needed.
  • To provide a reliable Instant Articles experience when readers tap links to your articles on Facebook, create an Instant Article version of each article whenever a new article URL is published to your website. When an Instant Article version of an article is published, readers on Instant Articles-enabled devices will see the story as an Instant Article whenever they discover it on Facebook.
  • Publish new stories as Instant Articles only when they are also publicly available on your website. The Instant Articles system requires access to each article's standard web URL to render content properly.
  • Publishing an Instant Article does not automatically create a new post on your Facebook Page. Instead, new Instant Articles are added to the Instant Articles library associated with your Page. To add a post on your Facebook Page, you must still compose and publish a post to your Page. Automated publishing of Instant Articles vis RSS or API simply means that whenever enabled readers encounter the URL of your article while using Facebook, the article will be rendered as an Instant Article.

Previous
Next Post »