Fb.api Only Loads On First Ajax Call To Page

I have an issue with an FB.api only loading the first time a page is retrieved via AJAX. FB.getLoginStatus does work though. Demo page: http://proof.ptly.com/test/fb/test-ajax.htm

Solution 1:

If you are still looking for a solution to this problem, I believe I have something that might work within the constraints that you have set. Quite simply, we just clear all the loaded variables and objects in memory, and from my tests, including the <script> that facebook attaches.

Replace the click handler in test.htm with this and it should work

jQuery(document).ready(function(){
    jQuery("#lnk").click(function(e){
        if(FB && document.getElementById("facebook-jssdk")){ //if set, reset//removes the <script>document.head.removeChild(document.getElementById("facebook-jssdk")); 
          window.FB=null; //unloads the APIs
          loaded=null; 
        }
        e.preventDefault();
        jQuery("#divContent").load("test.htm", function(){
            if(loaded)
            {
                FB.getLoginStatus(FBverifyLogin);
            }
            else
            {   
                loaded = true;
            }
        });
    });
});

Solution 2:

We had a similar kind of issue, this post http://www.martincarlin.info/facebook-js-sdk-not-working-on-second-load-of-ajax-loaded-page/ helped us to resolve the issue.

The reason the script was not working was because the window.fbAsyncInit function runs on the initial page load and so the second time you do your AJAX call, the Facebook JavaScript SDK is already loaded in your page so window.fbAsyncInit doesn’t fire again.

By checking if FB is already defined we can then use our SDK code without the initialisation part.

Hope that will help you to resolve the issue.

Solution 3:

After trying everything from past few days this below piece of code worked for me.

//intialize FB object (this is useful if you are using Turbolinks)
$(document).on('page:load', function(){
 intializeFB();
});

intializeFB();

functionintializeFB(){
 if(typeof(FB) !== "undefined"){
  deleteFB;
 }
 $.getScript("http://connect.facebook.net/en_US/all.js#xfbml=1",      function () {
   FB.init({
     appId      : '19871816653254',
     cookie     : true,  // enable cookies to allow the server to access // the session
     xfbml      : true,  // parse social plugins on this page
     oauth      : true,
     status     : true,
     version    : 'v2.4'// use version 2.4
   });
 });
}

Hope this is useful!