Search code examples
phpjavascriptfacebookfacebook-oauth

facebook page tab oauth


I have a page tab application and i want it to Request for Permission (to use user's email) the first time a user visits the tab.
I thought this should be simple enough, but i've been lost in hundrends q&a's, tutorials, php/js apis, old and new methods/functions/techniques. I 'm not even sure which is the right way to suit my needs.

What my app is doing is as simple:

if (user_has_liked_page())
    include ("fan.php");
else
    include ("guest.php");

What i'm trying to do is have this fb "popup" that requests for permission - preferably only for users that like the page.

I kindly ask you not to just reply with all the urls of the facebook docs/api, I've tried many of them.

If possible i'd like to know which of all these techniques is the right one for the situation.
Examples are welcomed too.

Thanks in advance.


Solution

  • For a JS solution you could try something similar to the following in your fan.php file

    <div id="fb-root"></div>
    <script>
    window.fbAsyncInit = function() {
    FB.init({
      appId      : 'YOUR_APP_ID', // App ID
      channelUrl : '//WWW.YOUR_DOMAIN.COM/channel.html', // Channel File
      status     : true, // check login status
      cookie     : true, // enable cookies to allow the server to access the session
      oauth      : true, // enable OAuth 2.0
      xfbml      : true  // parse XFBML
    });
    
    // Additional initialization code here
    };
    
    // Load the SDK Asynchronously
    (function(d){
     var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
    </script>
    
    <button id="fb-login">Login & Permissions</button>
    
    <script>
    document.getElementById('fb-login').onclick = function() {
    var cb = function(response) {
    if (response.status === 'connected') {
      //user is logged in here and you have email scope already
    } else {
      alert('Click the "Login and Permissions" button so we can send you emails');
    }
    };
    FB.login(cb, { scope: 'email' });
    };
    </script>
    

    The contents of channel.html should just be

     <script src="//connect.facebook.net/en_US/all.js"></script>
    

    I haven't had time to test this and I lifted most of this from the official docs. I know you said you didn't want links. But you might find this page useful

    https://developers.facebook.com/docs/reference/javascript/

    and there is also a test console where you can play around with the javascript api located here

    https://developers.facebook.com/tools/console/