title: Facebook javascript authorization modal dialog with OAuth 2.0
body: <p>I can do it oldschool:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;div id="fb-root"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
  
          function init(){
              FB.init({
                  appId  : 'MY_APP_ID',
                  status : true, // check login status
                  cookie : true, // enable cookies to allow the server to access the session
                  xfbml  : true, // parse XFBML
                  channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html' // custom channel
              });
              setupApp();
          }
  
          function setupApp() {
  
              FB.getLoginStatus(
                  function(response) {
                      if (!response.session) {
                          FB.ui({method: "permissions.request", "perms": ''} , getUserId);
                      } else {
                          // the user previously authorized the app
                          getUserId(response);
                          window.location = "fanAuthorized.php";
                      }
                  });
              return false;
          }
  
          function getUserId(data){
              if(data.status !== 'notConnected' || data.session !== null){
                  // the user has just authorized the app
                  userId = data.session.uid;
                  accessToken = data.session.access_token;
                  window.location = "fanAuthorized.php";
              } else {
                  // the user has just denied to authorize the app
                  window.location = "fanUnauthorized.php";
              }
          }
  
          init();
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Switching to OAuth 2 gets me stuck. I tried the following:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html xmlns:fb="https://www.facebook.com/2008/fbml"&gt;
      &lt;head&gt; 
      &lt;/head&gt; 
  &lt;body&gt;
  
      &lt;div id="fb-root"&gt;&lt;/div&gt;
  
      &lt;script&gt;
      window.fbAsyncInit = function() {
          FB.init({ appId: 'MY_APP_ID', 
              status: true, 
              cookie: true,
              xfbml: true,
              oauth: true
          });
  
          function updatePage(response) {
  
              if (response.authResponse) {
                  // user is already logged in and connected
                  window.location = "fanAuthorized.php";
              } else {
                  // user is not connected or logged out
                  FB.login(function(response) {
                      if (response.authResponse) {
                          window.location = "fanAuthorized.php";
                      } else {
                          // user has just cancelled login or denied permission
                          window.location = "fanUnauthorized.php";
                      }
                  }, {scope:''}); 
              }
          }
  
          // run once with current status and whenever the status changes
          FB.getLoginStatus(updatePage);
          FB.Event.subscribe('auth.statusChange', updatePage);    
      };
  
      (function() {
          var e = document.createElement('script'); e.async = true;
          e.src = document.location.protocol 
          + '//connect.facebook.net/de_DE/all.js';
          document.getElementById('fb-root').appendChild(e);
      }());
  
      &lt;/script&gt;
  
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>
  
  <p>This code turns my modal dialog authorization into a popup dialogue authorization and without user interaction the popup gets blocked by the browser. I would like the authorization dialogue come up unblocked without user interaction and stay on the current page (my facebook fanpage). Is there a way to do that? Thanks in advance!</p>
  
  <h1><h1>UPDATE:</h1></h1>
  
  <p>Seems I've managed to implement the authorization dialog the non-pop-up-way. The authorization dialog opens without user interaction in the same window (not as a modal dialog) and doesn't get blocked by the browser. After the user has authorized the app he gets redirected to the same tab in the facebook fanpage iframe where he just came from. The app then recognizes that the user is connected. If the user cancels the authorization he gets redirected to the wall of the fanpage. And now the code:</p>
  
  <p>fanPage.php</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;!-- Initialize Facebook authorization dialogue --&gt;
      &lt;?php $app_id = "MY_APP_ID"; ?&gt;
  
      &lt;div id="fb-root"&gt;&lt;/div&gt;
      &lt;script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          &lt;!--
  
          function init(){
              FB.init({
                  appId  : '&lt;?php echo $app_id; ?&gt;',
                  status : true, // check login status
                  cookie : true, // enable cookies to allow the server to access the session
                  xfbml  : true, // parse XFBML
                  channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html', // custom channel
                  oauth  : true // enable OAuth
              });
  
              FB.getLoginStatus(function(response) {
                  if (response.status !== 'connected') {
  
                      var api_key = "&lt;?php echo $app_id; ?&gt;";
                      var canvas_page = escape("http://apps.facebook.com/MY_APP/");
  
                      var redirect = 'https://www.facebook.com/login.php?api_key=' + api_key
                          + '&amp;extern=1&amp;fbconnect=1&amp;v=1.0'
                          + '&amp;next=' + canvas_page + 'fanAuthorized.php'
                          + '&amp;cancel_url=' + canvas_page + 'fanUnauthorized.php';
                      self.parent.location = redirect;
                  } else {
                      window.alert("You are connected!");
                  }
              });
          }
  
          init();
  
          //--&gt;
      &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>fanUnauthorized.php</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  
  &lt;/head&gt;
  
      &lt;script type="text/javascript"&gt;
          &lt;!--
              top.location.href='http://www.facebook.com/pages/MY_FANPAGE_NAME/MY_FANPAGE_ID';
          //--&gt;
      &lt;/script&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>fanAuthorized.php</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;/head&gt;
  
      &lt;script type="text/javascript"&gt;
          &lt;!--
              top.location.href='http://www.facebook.com/pages/MY_PAGE_NAME/MY_PAGE_ID?sk=app_MY_APP_ID;
          //--&gt;
      &lt;/script&gt;
  
  &lt;body&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and if you are wondering what the channel.html is all about - here it is:</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml" lang="en_US"&gt;
      &lt;head&gt;
          &lt;title&gt; &lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>