Ad Placement

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.

Placing Ads in Recirculation Units (beta)

You can also place ads within the recirculation units at the bottom of your Instant Article. You will need to be signed up with Audience Network to enable this ad placement. This is an example of how ads could look within the recirculation section below the content of your article.

Follow the steps below to create ads within the recirculation unit. You'll need to generate a new placement ID and then insert that into the markup below.

First, you'll need to get a new placement ID to enable your ads.

  1. In your Developer Account for your App navigate to Audience Network. Use your current IA ready Facebook App if you already have one, otherwise sign up for Audience Network here.
  2. Navigate into Placements
  3. Click Create Ad Placement
  4. Name your Placement (i.e. “Pub Name - Recirculation Ad”)
  5. Select “Banner” as your Format and click Save
  6. You can now use this placement ID for your recirculation ad unit.
  7. Use the markup below to enable the new recirculation ad unit, replacing YOUR-PLACEMENT-ID with your new placement id:

Note: 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="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>Zhen's sample article.</title>
  </head>
  <body>
  ...
  </body>
</html>