title: Facebook audience network - Loading ads in infinite scroll
body: <p>I just came across facebook's audience network for mobile sites. Everything is looking pretty great (their tutorial is fine)</p>
  
  <p>But I came across a "limitation" which I would love to counter. Currently, when I first load the web page, My ads show up normally, however, I got an infinite scroll that injects a div after a certain amount of scrolling. The problem is that the new inject div that is supposed to contain the ad doesn't load any ad. </p>
  
  <pre><code> &lt;script&gt;
    window.fbAsyncInit = function() {
      FB.Event.subscribe(
        'ad.loaded',
        function(placementId) {
          console.log('Audience Network ad loaded');
          document.getElementById('ad_root').style.display = 'block';
        }
      );
      FB.Event.subscribe(
        'ad.error',
        function(errorCode, errorMessage, placementId) {
          console.log('Audience Network error (' + errorCode + ') ' + errorMessage);
        }
      );
    };
  
    window.load = function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0]; 
      if (d.getElementById(id)) 
          return;
      js = d.createElement(s);
      js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk/xfbml.ad.js#xfbml=1&amp;version=v2.5&amp;appId=xxxxxxxx";
        console.log(js);
      fjs.parentNode.insertBefore(js, fjs);
    }
  
    window.load(document, 'script', 'facebook-jssdk');
  &lt;/script&gt;
  
  &lt;div class="fb-ad" data-placementid="xxxxx_xxxxx" data-format="native" data-nativeadid="ad_root{{$index}}" data-testmode="false"&gt;&lt;/div&gt;
  </code></pre>