How to add multiple ads in Facebook Instant Articles using wordpress plugin?

Question

I want to display multiple ads on Facebook instant articles. I found this code, which I tried manually and its working.

  <section class="op-ad-template">

        <!-- Ads to be automatically placed throughout the article -->

        <figure class="op-ad">
          <iframe src="https://www.mywebsite.com/ss;adtype=banner300x250&adslot=1" height="300" width="250"></iframe>
        </figure>

        <figure class="op-ad op-ad-default">
          <iframe src="https://www.mywebsite.com/ss;adtype=banner300x250&adslot=2" height="300" width="250"></iframe>
        </figure>

        <figure class="op-ad">
           <iframe src="https://www.mywebsite.com/ss;adtype=banner300x250&adslot=3" height="300" width="250"></iframe>
        </figure>

   </section>

Now I am trying to make it possible via Facebook Instant Article Plugin. I didn't find any setting option for these type ads.

I tried to search on google and can't find anything except this: https://developers.facebook.com/docs/instant-articles/sdk/transformer-rules

Please help me!

A. How to add multiple ads using FB INSTANT ARTICLE PLUGIN in wordpress?

B. How to add different codes using FB INSTANT ARTICLE PLUGIN in wordpress?

Answer 1

You can do this by adding the instant_articles_transformed_element filter, in order to modify the header accordingly.

This is generally used when placing Facebook Audience Network units, but if your manual code worked, the following code should work, although you might need to play around with the query vars. Add to functions.php the following:

At the top of functions.php, add this:

use Facebook\InstantArticles\Elements\Ad;

And then:

/**
 * Adds multiple units to the Instant Article
 * 
 * @param Instant_Articles_Post $article
 * 
 * @return Instant_Articles_Post
 */
add_filter('instant_articles_transformed_element', function ($article) {
        // Create the base ad
        $ad = Ad::create()
                ->withWidth(300)
                ->withHeight(250)
                ->enableDefaultForReuse();

        // Retrieve the header
        $article->getHeader()
                // Add the first ad
                ->addAd(
                       $ad->withSource(
                                // This creates the URL https://www.mywebsite.com/ss;adtype=banner300x250;adslot=1
                                add_query_arg(
                                        array(
                                           'adtype' => 'banner300x250',
                                           'adSlot' => '1',
                                        ),

                                        'https://www.mywebsite.com/ss'
                                )
                        )
                )
                // Add the second ad
                ->addAd(
                        $ad->withSource(
                                // This creates the URL https://www.mywebsite.com/ss;adtype=banner300x250;adslot=2
                                add_query_arg(
                                        array(
                                           'adtype' => 'banner300x250',
                                           'adSlot' => '2',
                                        ),

                                        'https://www.mywebsite.com/ss'
                                )
                        )
                )
                // Add the third ad
                ->addAd(
                        $ad->withSource(
                                // This creates the URL https://www.mywebsite.com/ss;adtype=banner300x250;adslot=3
                                add_query_arg(
                                        array(
                                           'adtype' => 'banner300x250',
                                           'adSlot' => '3',
                                        ),

                                        'https://www.mywebsite.com/ss'
                                )
                        )
                );

        return $article;
});

With that code, the plugin will take care of the rest, and it will automatically add the following code to the head section:

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

It will also add the following right before closing the header:

<section class="op-ad-template">
              <figure class="op-ad op-ad-default">
                <iframe src="https://www.mywebsite.com/ss?adtype=banner300x250&amp;adSlot=1" width="300" height="250"></iframe>
              </figure>
              <figure class="op-ad">
                <iframe src="https://www.mywebsite.com/ss?adtype=banner300x250&amp;adSlot=2" width="300" height="250"></iframe>
              </figure>
              <figure class="op-ad">
                <iframe src="https://www.mywebsite.com/ss?adtype=banner300x250&amp;adSlot=3" width="300" height="250"></iframe>
              </figure>
</section>