title: How to embed Facebook Page or timeline on a website on page scroll event using jQuery?
body: <p>I am trying to embed Facebook Page on a website, I am following <code>https://developers.facebook.com/docs/plugins/page-plugin</code> I am able to embed the and normal case it works fine, but my requirement is a bit different The container which holds the facebook page is at the bottom of the webpage and <strong>I want to load facebook page and its resources only if the user reaches to that facebook page container</strong>, for That using page scroll event, I tried many ways so far my code is as below:-
  Facebook Page Container div</p>
  <pre><code>&lt;div class=&quot;col-12 col-xl-4 col-lg-4 col-md-4 col-sm-12&quot; id=&quot;facebook-container&quot;&gt;
              
      &lt;div id=&quot;fb-root&quot;&gt;&lt;/div&gt;
  
  &lt;/div&gt; 
  </code></pre>
  <p>JQuery Code is as below</p>
  <pre><code>fbResource=true;
  $(window).scroll(function() {     
      if($(window).scrollTop() == $(document).height() - $(window).height()) {
  if(fbResource){
     $.ajax({
                      url: &quot;https://connect.facebook.net/en_GB/sdk.js#xfbml=1&amp;version=v7.0&quot;,
                      dataType: &quot;script&quot;,
                      crossorigin: &quot;anonymous&quot;,
                      //cache: true,
                      nonce: &quot;JDoVHwlt&quot;,
                      success: function() {
                          $( &quot;#facebook-container&quot; ).append('&lt;div class=&quot;fb-page&quot; data-href=&quot;https://www.facebook.com/facebook&quot; data-tabs=&quot;timeline&quot; data-width=&quot;&quot; data-height=&quot;&quot; data-small-header=&quot;false&quot; data-adapt-container-width=&quot;true&quot; data-hide-cover=&quot;false&quot; data-show-facepile=&quot;true&quot;&gt;&lt;blockquote cite=&quot;https://www.facebook.com/facebook&quot; class=&quot;fb-xfbml-parse-ignore&quot;&gt;&lt;a href=&quot;https://www.facebook.com/facebook&quot;&gt;Facebook&lt;/a&gt;&lt;/blockquote&gt;&lt;/div&gt;');
                      }
                  });
              
             }
  
             fbResource=false;
  }
             FB.XFBML.parse();
  
  }
  });
  </code></pre>
  <p>I have also tried with $getScript() jQuery function but no luck.
  Please guide what am I doing wrong ?
  Thanks in advance.</p>