TAB OAUTH de la página de Facebook

Question

Tengo una aplicación de pestaña de página y quiero que solicite permiso (para usar el correo electrónico del usuario) la primera vez que un usuario visita la pestaña.
Pensé que esto debería ser bastante simple, pero me he perdido en preguntas y respuestas de hundrends, tutoriales, API PHP/JS, métodos/funciones/técnicas antiguos y nuevos. Ni siquiera estoy seguro de cuál es la forma correcta de satisfacer mis necesidades.

Lo que mi aplicación está haciendo es tan simple:

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

Lo que estoy tratando de hacer es tener esta "ventana emergente" de FB que solicite permiso, preferiblemente solo para usuarios que les guste la página.

Le pido amablemente que no responda con todas las URL de la API/API de Facebook, he probado muchas de ellas.

Si es posible, me gustaría saber cuál de todas estas técnicas es la adecuada para la situación.
Los ejemplos también son bienvenidos.

Gracias por adelantado.

Answer 1

Para una solución JS, puede probar algo similar a lo siguiente en su archivo Fan.php

<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>

El contenido de Channel.html debería ser solo

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

No he tenido tiempo de probar esto y levanté la mayor parte de esto de los documentos oficiales. Sé que dijiste que no querías enlaces. Pero puede encontrar esta página útil

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

Y también hay una consola de prueba donde puedes jugar con la API JavaScript ubicada aquí

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