Ad Placement in Instant Articles

Ads can be automatically placed within your Instant Articles in order to simplify the process of inserting blocks of ad code throughout the content. Automatic ad placement eliminates the need to manually place ad tags within articles and lets you focus on the content.

Automatic ad placement is specified within the Article element and provides the flexibility to change your ad density as well as manually determine the placement of ads within your specific articles when necessary.

Automatic Placement

To enable automatic placement of ads within your article, add a <meta> element with the property attribute set to fb:use_automatic_ad_placement and content set to enable=true to the <head> of your article’s markup. When enabled, Facebook will automatically place one or more designated blocks of ad code throughout the content of your article in an optimized manner.

In the <header> section of the article’s markup, use Ad elements to designate the blocks of ad code that will be automatically placed throughout the content of your article.

Changing Ad Density

You can select how frequently you'd like ads to appear in your article by changing the ad density. If nothing is specified, the ad density will default to one ad per 250 words. To change the density, change the value within the content="enable=true ad_density=default" tag located in the <meta> element.

The ad density options are:

  • default (250 word gap which offers high ad density)
  • medium (350 word gap which offers medium ad density)
  • low (500 word gap which offers low ad density)

The format for this markup is:

<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=medium">
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=low">

Example:

<html>
<head>
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">
</head>
<body>
<article>
<header>
<!-- Ad to be automatically placed throughout the article -->'.
       <figure class="op-ad">
        <iframe src="https://www.adserver.com/ss;adtype=banner300x250" height="300" width="250"></iframe>
       </figure>
    </header>
  </article>
</body>
</html>

Automatic Placement of Single Ad Code

If you specify only one block of ad code for automatic placement, this block will be reused in each placement slot that is inserted in your article’s content.

<head>
<meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">
</head>
<body>
<article>
<header>

<!-- Ad to be automatically placed throughout the article -->
      <figure class="op-ad">
        <iframe src="https://www.adserver.com/ss;adtype=banner300x250" height="300" width="250"></iframe>
      </figure>

    </header>

    <!-- Article body goes here -->

  </article>
</body>

Automatic Placement of Multiple Ad Codes

To specify multiple blocks of ad code, wrap them in a <section> with the class op-ad-template and they will be placed throughout the article in the order you included them in.

If you add the class op-ad-default, that ad code will be reused in case there are more placement slots to fill than you have specified ad codes for.

If you have not specified the op-ad-default class for any ads and there are extra placement slots, the final ad template in your sequence will be repeated to fill the open slots.

<head>
  <meta property="fb:use_automatic_ad_placement" content="enable=true ad_density=default">
</head>
<body>
  <article>
    <header>

      <section class="op-ad-template">
        <!-- Ads to be automatically placed throughout the article -->
        <figure class="op-ad">
          <iframe src="https://www.adserver.com/ss;adtype=banner300x250&adslot=1" height="300" width="250"></iframe>
        </figure>
        <figure class="op-ad op-ad-default">
          <iframe src="https://www.adserver.com/ss;adtype=banner300x250&adslot=2" height="300" width="250"></iframe>
        </figure>
        <figure class="op-ad">
           <iframe src="https://www.adserver.com/ss;adtype=banner300x250&adslot=3" height="300" width="250"></iframe>
        </figure>
      </section>

    </header>

    <!-- Article body goes here -->

  </article>
</body>

Combining Automatic and Manual Placement

Automatic placement of ads does not preclude you from manually placing ads within your article’s content, and both approaches can be used together. For example, you may manually include a block of ad code in a specific location for the first ad in your article and have the remaining ads populated automatically by enabling this feature.

Manual Placement

To disable any automatic placement of ads within your article, use a <meta> element with the property attribute set to fb:use_automatic_ad_placement and content set to false. Define the Ad elements within the body of your article at the specific positions at which they should be rendered.

Note: You may only have one ad for every 350 words. If your article consists primarily of images or media, ads must not exceed 15% of the content.

<head>
  <meta property="fb:use_automatic_ad_placement" content="false">
</head>
<body>
  <article>
    <header></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="50" width="320"></iframe>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

    <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>

    <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    <!-- Another ad within your article -->
    <figure class="op-ad">
      <iframe src="https://www.adserver.com/ss;adtype=banner320x50" height="50" width="320"></iframe>
    </figure>

  </article>
</body>

Auto-Correcting for Ads Placement Policy Violations

If an Instant Article has too many ads or any incorrectly positioned ads, the Automatic Ad Placement feature will adjust ad placement and volume to be compliant. This feature will remain enabled. Publishers should update and resubmit articles after fixing policy violations if they wish to manually control ad placement going forward.

Automatic Ad Placement will be enabled if an article has more than one ad for every 250 words or if ads exceed 20% percent of the total content.

Recirculation Ads

Recirculation ads are Audience Network ads located in the 'related articles' section at the bottom of an Instant Article. These ads are likely relevant to readers who want to continue their consumption experience after reading one article.

Recirculation ads are turned on by default but can be toggled off from the monetization tab. A publisher should use recirculation ads if they are prioritizing the amount of revenue they earn per article read.

Recirculation ads undergo the same quality review process as all other ads in News Feed and Audience Network. Articles need to be at least 100 words to be eligible for recirculation ads.

Recirculation ads come from Facebook advertisers and are the same as other ads that appear in Instant Articles. Advertisers will be eligible to deliver into these units if they have opted into the existing Instant Articles placement.

Publishers will be able to use the same ad controls that exist for other Audience Network placements in Instant Articles, such as category or advertiser block lists.

Managing Recirculation Ads with 1 Click

Publishers can use the monetization tab to turn recirculation ads on and off in all articles with 1 click. The tab is located in the publishing tools section of the Facebook Page used to manage Instant Articles.

  1. Navigate to the Instant Articles section under Publishing Tools in your Page settings.

  2. Use the box next to "Turn on recirculation ads in article footers" to manage your settings.

  3. Click Save after you've made changes.

Markup for individual articles takes priority over the 1-click setting.

Managing Recirculation Ads with Markup

Adding Recirculation Ads to Individual Articles

When recirculation ads are turned off in the monetization tab, publishers can still enable these ads in individual articles by editing the article markup. Checking the 1-click box ensures that future articles also show recirculation ads.

If a publisher previously inserted HTML to turn on recirculation ads, prior HTML insertions will take precedence over recirculation ad settings in the monetization tab and will continue to show recirculation ads as you specified.

Follow the steps below to create ads within the recirculation unit. You will need to be signed up with Audience Network and generate a new placement ID, then insert that into the markup as shown below.

First, you should get a new placement ID to enable your ads.

  1. In your Developer Account for your App navigate to Audience Network. Use your current Instant Articles-ready Facebook App if you already have one. Otherwise sign up for Audience Network.
  2. Navigate into Placements
  3. Click Create Ad Placement
  4. Name your Placement (e.g., “Pub Name - Recirculation Ad”)
  5. You can now use this placement ID for your recirculation ad unit.
  6. Use the markup below to enable the new recirculation ad unit, replacing YOUR-PLACEMENT-ID with your new placement id.

Your ad will not appear within the Pages app, so you will not be able to preview it. The article must be pushed live to see what it looks like.

<meta property="fb:op-recirculation-ads" content="enable=true placement_id=YOUR-PLACEMENT-ID">

The following example shows the how this unit should appear within the Instant Articles document:

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
  <head>
   <meta charset="utf-8">
   <meta property="fb:op-recirculation-ads" content="placement_id=YOUR-PLACEMENT-ID">
   <link rel="canonical" href="http://home.fburl.com/test.html">
   <title>This is a sample article.</title>
  </head>
  <body>
  ...
  </body>
</html>

<!doctype html>
  <meta property="fb:op-recirculation-ads" content="enable=true placement_id=331774367243027_333073150446482">

Removing Recirculation Ads from Individual Articles

Publishers can edit the markup of a specific article to remove recirculation ads even when the check box in the monetization tab has been clicked on. Article-level markup always overrides the Page-level settings.

The complete markup for recirculation ads where “enable” can be true or false:

<meta property="fb:op-recirculation-ads" content="enable=true placement_id=331774367243027_333073150446482">

To disable recirculation ads for the specific articles:

  <!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="http://home.fburl.com/test1">
   <title>Sample article.</title>
   <meta property="fb:op-recirculation-ads" content="enable=false">
 </head>
 <body>
   <article>
     <header>
       <h1>Test</h1>
       <time class="op-published" datetime="2017-10-26 11:03:35">2017-10-26 11:03:35</time>
     </header>
    
   <p>
     This article is a sample article!
   </p>
  
   </article>
 </body>
</html>

or

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
<meta charset="utf-8">
<link rel="canonical" href="http://home.fburl.com/test1">
<title>Sample article.</title>
<meta property="fb:op-recirculation-ads" content="enable=false placement_id=331774367243027_333073150446482">
</head>
<body>
<article>
<header>
<h1>Test</h1>
<time class="op-published" datetime="2017-10-26 11:03:35">2017-10-26 11:03:35</time>
</header>

<p>
This article is a sample article!
</p>

</article>
</body>
</html>