title: Dynamically loading Facebook JS sdk login using ajax/php
body: <p>I can perform loging and get data using Facebook JS SDK without sdk. But I want it to do using ajax.</p>
  
  <pre><code>&lt;script&gt;
    window.fbAsyncInit = function() {
      FB.init({
        appId: '&lt;?php echo $facebook-&gt;getAppID() ?&gt;',
        cookie: true,
        xfbml: true,
        oauth: true
      });
      **FB.Event.subscribe('auth.login', function(response) {
        window.location.reload();
      });
      FB.Event.subscribe('auth.logout', function(response) {
        window.location.reload();**
      });
    };
    (function() {
      var e = document.createElement('script'); e.async = true;
      e.src = document.location.protocol +
        '//connect.facebook.net/en_US/all.js';
      document.getElementById('fb-root').appendChild(e);
    }());
  &lt;/script&gt;
  </code></pre>
  
  <p>Bold part is performing action of loading. I think if that is done using ajax then I am done.</p>
  
  <p>I tried with ajax google jquery api as below but it load entire page again after login is completed:</p>
  
  <pre><code>&lt;?php
  session_start();
  include_once("config.php");
  
  if(isset($_GET["logout"]) &amp;&amp; $_GET["logout"]==1)
  {
  //User clicked logout button, distroy all session variables.
  session_destroy();
  header('Location: '.$return_url);
  }
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en-gb" lang="en-gb" &gt;
  &lt;head&gt;
  &lt;!-- Call jQuery --&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;title&gt;Ajax Facebook Connect With jQuery&lt;/title&gt;
   &lt;script&gt;
   function AjaxResponse()
   {
       var myData = 'connect=1'; //For demo, we will pass a post variable, Check process_facebook.php
       jQuery.ajax({
       type: "POST",
       url: "process_facebook.php",
       dataType:"html",
       data:myData,
       success:function(response){
       $("#results").html('&lt;fieldset style="padding:20px"&gt;'+response+'&lt;/fieldset&gt;'); //Result
   },
       error:function (xhr, ajaxOptions, thrownError){
       $("#results").html('&lt;fieldset style="padding:20px;color:red;"&gt;'+thrownError+'&lt;/fieldset&gt;'); //Error
      }
   });
   }
  
  function LodingAnimate() //Show loading Image
  {
      $("#LoginButton").hide(); //hide login button once user authorize the application
      $("#results").html('&lt;img src="ajax-loader.gif" /&gt; Please Wait Connecting...'); //show loading image while we process user
  }
  
  function ResetAnimate() //Reset User button
  {
      $("#LoginButton").show(); //Show login button
      $("#results").html(''); //reset element html
  }
  
   &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;?php
  if(!isset($_SESSION['logged_in']))
  {
  ?&gt;
      &lt;div id="results"&gt;
      &lt;/div&gt;
      &lt;div id="LoginButton"&gt;
      &lt;div class="fb-login-button" onlogin="javascript:CallAfterLogin();" size="medium" scope="&lt;?php echo $fbPermissions; ?&gt;"&gt;Connect With Facebook&lt;/div&gt;
      &lt;/div&gt;
  &lt;?php
  }
  else
  {
      echo 'Hi '. $_SESSION['user_name'].'! You are Logged in to facebook, &lt;a href="?logout=1"&gt;Log Out&lt;/a&gt;.';
  }
  ?&gt;
  
  &lt;div id="fb-root"&gt;&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  window.fbAsyncInit = function() {
  FB.init({appId: '&lt;?php echo $appId; ?&gt;',cookie: true,xfbml: true,channelUrl: '&lt;?php echo $return_url; ?&gt;channel.php',oauth: true});};
  (function() {var e = document.createElement('script');
  e.async = true;e.src = document.location.protocol +'//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);}());
  
  function CallAfterLogin(){
          FB.login(function(response) {
          if (response.status === "connected")
          {
              LodingAnimate(); //Animate login
              FB.api('/me', function(data) {
                if(data.email == null)
                {
                      //Facbeook user email is empty, you can check something like this.
                      alert("You must allow us to access your email id!");
                      ResetAnimate();
  
                }else{
                      AjaxResponse();
                }
            });
           }
      });
  }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>