CODEWITHSUNDEEP
javascriptfacebookmobilefacebook-audience-network
MasterJohn
MasterJohn

Reputation: 439

Facebook audience network - Loading ads in infinite scroll

I just came across facebook's audience network for mobile sites. Everything is looking pretty great (their tutorial is fine)

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. 

 <script>
  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&version=v2.5&appId=xxxxxxxx";
      console.log(js);
    fjs.parentNode.insertBefore(js, fjs);
  }

  window.load(document, 'script', 'facebook-jssdk');
</script>

<div class="fb-ad" data-placementid="xxxxx_xxxxx" data-format="native" data-nativeadid="ad_root{{$index}}" data-testmode="false"></div>

Upvotes: 0

Views: 320

Answers (1)

WizKid
WizKid

Reputation: 4908

If you add HTML after the page loaded you need to use XFBML.parse to tell the Facebook SDK that new content is there

Upvotes: 2

Related Questions