No había tenido oportunidad de practicar el «Conectar cuentas con facebook» desde algún website. Hay muchos ejemplos en del Developer Site de Facebook, pero ninguno con un diseño personalizado del botón, que siendo honestos el diseño del botón del login esta muy feo. Bueno navegando por muchos sitios y probando códigos por fin hice uno que me gustó. Simplemente aparece un botón con diseño personalizado y al conectarse muestra el nombre y la foto del usuario, así de simple.
<html>
<head>
<title>Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId : '386824534708984', // App ID
channelUrl : 'www.oundmedia.com', // Channel File
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
/* Revisar es status del usuario al entrar a la pagina */
FB.getLoginStatus(function(response) {
if (response.status === 'connected') { // Esta conectado
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
login();
} else if (response.status === 'not_authorized') { // La aplicacion no esta atoriada
logout();
} else { // No esta conectado
logout();
}
});
/* Eventos para capturar el login del usuario */
FB.Event.subscribe('auth.login', function(response) { // cuando autoriza conexion
login();
});
/* Funcion que se ejecuta cuando ya se autoriza la conexion */
function login(){
FB.api('/me', function(response) {
document.getElementById('login').style.display = "block";
document.getElementById('name').style.display = "block";
document.getElementById('login').innerHTML = response.name + " estás conectado!";
document.getElementById('fb-login').style.display = "none";
fqlQuery();
});
}
/* Funcion que se ejecuta cuando aun no se hace la conexion con facebook */
function logout(){
document.getElementById('login').style.display = "none";
document.getElementById('name').style.display = "none";
document.getElementById('fb-login').style.display = "block";
}
/* Funcion para extraer algunos datos del susuario, como nombre y foto */
function fqlQuery(){
FB.api('/me', function(response) {
var query = FB.Data.query('select name, hometown_location, sex, pic_square from user where uid={0}', response.id);
query.wait(function(rows) {
document.getElementById('name').innerHTML =
'Your name: ' + rows[0].name + "<br />" +
'<img src="' + rows[0].pic_square + '" alt="" />' + "<br />";
});
});
}
};
/* Funcion para abrir la ventanita y conectarse a facebook */
function facebookLogin() {
FB.login(function(response){
scope: 'email,user_birthday,status_update,publish_stream' // estos son los permisos que necesita la aplicacion
});
}
// Load the SDK Asynchronously
(function(d){
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<!-- HTML de los botones y divs para el nombre y la foto -->
<a id='fb-login' href='#' onclick='facebookLogin()' style="display:none;"><img src="http://oundmedia.com/facebook-connect-button.png" border="0"/></a>
<div id="login" style ="display:none"></div>
<div id="name"></div>
</body>
</html>
El Pinche Regio 
No me funciona, ya puse mi app_id y el archivo chanel.html pero nada
Que no te funciona?
Muchas gracias. Me resolviste el problema. Muy claro y al punto.
Saludos
Excelente. Y para desloguearte como haces?
Ese se hace desde facebook desde los permisos de apps
buenisimo! Gracias
De nada
Espero disfrutar todos
Los comentarios
Buenos días regio, que tal?
estuve implementando el código que muestras aquí, obviamente con las ID de mi propia aplicación, al principio cuando te logueas, el cuadro de dialogo pide permiso para acceder a cierta información de la cuenta del visitante (obviamente se puede configurar desde datos básicos, hasta datos de contactos). Mi pregunta es: ¿Una vez que se le otorgan permisos a la aplicación, ésta podrá acceder SIEMPRE a dichos datos? ya no hay manera de DENEGARLOS en el futuro?
Gracias
Si se puede bloquearlos, desde tu configuracion de cuenta en facebook, les quitas permisos a las apps o las bloqueas, borras etc.
Gracias por tu pronta respuesta regio, si a otro le sirve, la opción de bloquear, eliminar etc. permisos para alguna aplicación que hayas agregado, se encuentra en:
aplicaciones>centro de aplicaciones>tus aplicaciones
Por lo pronto tu blog ya lo tengo en favoritos, creo que entre desarrolladores nos podemos ayudar.
De nuevo, Gracias!
No me funciona con el boton personalizado pero cambiando con los tags que da facebook:
Login Faceook funciona PERFECTO.
Gracias, excelente post!!
Hola, a que te referis q cambiando los tags de FB? no logro ver nada, se ve la pantalla en blanco, y el nombre de mio de facebook y nada mas, nada de estilos
Perfecto!! Me ha funcionado genial! Gracias por la aportación amigo.
Saludos
Aurora
Amigo! Gracias por esto, pero quiero abusar de tu habilidad. ¿Como se hace para que luego de que el usuario se conecte a nuestra aplicación desde la pagina web, se publique automaticamente el enlace del sitio que esta visitando dentro de mi sitio en su muro? e visto que varias aplicaciones «virales» publican sin avisarle al usuario luego de que le entregan el permiso Publish_stream o publish_actions, pero… no logro dar con la función que haga eso.
cuando intento imprimir mi correo dice undefined, pero no me aparece el boton de permitir aplicacion o algo
saludos
Imprimir tu correo?
Gracias! Yo también intenté mostrar el email y me sale undefined, que estoy haciendo mal?
Bien bueno esta eso, a mi me funciono perfect!!!
Hola Regio, una consulta. ¿Cual son los datos a modificar en este codigo si quiero integrarlo a mi pagina web?
Roman no se si aun sea válido este script, lo hice hace 2 años pero si aún llega a funcionar solo cambia estos 2:
appId : ‘386824534708984’, // App ID
channelUrl : ‘www.oundmedia.com’, // Channel File
Pingback: Boton personalizado de login de facebook | Da Webmasters
para desconectarse usen estos parametros simplemente y faciles
function fblogout() {
Muy buen post amigo.
LA CREATIVIDAD DEL SER HUMANO ES COMPATIBLE CON TU CONOCIMIENTO
—-
Gerard.