Question

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.

Answer 1

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/