Bien, al final si tube tiempo para poder subir lo que utilize, notablemente es menos codigo del qu pense que estaba utilizando
Sugeriria ponerlo como aporte
ya que muchos buscan este tipo de informacion y en muchos lugares siempre es lo mismo, muy enredado sin explicacion y aveces no sirve
bien, comensemos
------------------------------------
(aclaro, el archivo lo llame
facebookConnect.php y lo llame al index con
php (include))
Para comenzar partire por partes el codigo para una explicacion y al final incluire el codigo completo
tambien aclaro que utilize jQuery
------------------------------------
Aqui es puro html, es el boton Conectar con facebook (#login)
y la capa donde se hacen las peticiones de facebook (#fb-root)
llamamos tambien a la api de facebook, cambiando el lenguaje de la api en donde dice
lenguaje
( para español utilizen
es_ES )
aqui todos los lenguajes, los buscas de esta forma
Klingon FB tl_ST lenguaje + FB + lg_LG
Código HTML:
Ver original<a href="#" id="login">Entrar con facebook
</a> <script type="text/javascript" src="http://connect.facebook.net/[B]lenguaje[/B]/all.js"></script>
Aqui va lo que en verdad nos interesa
Esta seccion comprueba si el usuario esta logueado en facebook, osea que anteriormente ya se logueo dentro de nuestra pagina y acepto los permisos
Código Javascript
:
Ver original<script type="text/javascript">
// Se inicializa la api de acuerdo a tus datos y configuraciones
FB.init({
//Este es tu id de aplicacion de facebook que debiste ya haber registrado, esto es muy importante
appId: '3452523624',
// Esto copialo y pegalo tal y como esta
status: true,
cookie: true,
xfbml: true
});
// Al cargar la pagina se hace el logueo
$(document).ready(function(){
// Pregunta si estas logueado en fcebook, esta funcion te devuelve un callbak ( response ) true/false
FB.getLoginStatus(function(response) {
// if existe una session...
if (response.session) {
// cargamos el api y buscamos al usuario local, osea el logueado ( /me )
// te devuelve un callback, un objeto que almacena todos los [URL="http://developers.facebook.com/docs/reference/api/user"]datos del usuario[/URL]
FB.api('/me', function (usuario) {
// Doy señales de que el usuario esta logueado mostrando su nombre ( usuario.name )
$("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
// Oculto el boton de logueo
$("#login").hide();
});
}
});
});
// Si el usuario no esta loguado, y pulsa el boton de loguear
$('#login').click(function (e) {
e.preventDefault();
Bien, ahora, aqui se hara el proseso de login por primera vez
Código Javascript
:
Ver original// Hacemos el login, FB.login te devuelve un callback ( response )
FB.login(
function(response) {
// si el logueo fue correcto...
if (response.session) {
// verifico que existan permisos, si no le pido los permisos
if (response.perms) {
// aqui solicito los datos del usuario ( /me )
FB.api('/me', function (usuario) {
// variable global para almacenar el url de la foto de perfil
var fb_pic;
// consulto de la base de datos la foto
FB.api(
{
// utilizando [URL="http://developers.facebook.com/docs/reference/fql/"]fql[/URL] ( facebook query languaje )
method: 'fql.query',
// selecciono la columna "pic" de la tabla "user" donde "uid" es igual al id del usuario ( usuario.id )
query: 'SELECT pic FROM user WHERE uid=' + usuario.id
},
//te devuelve el dato por callback
function(response) {
// y te devuelve un array con todas las fotos, las que nos interesa es la primera, que es la del perfil
fb_pic = response[0].pic;
}
);
// ahora a enviar los datos a nuestro archivo de registro por post (ustedes sabran como hacer el sistema de registro)
$.post(
"fb/fb-register.php",
{
// declaro los datos y les asigno el valor, del usuario, usuario.dato
idUser: usuario.id,
name: usuario.name,
link: usuario.link,
pic: fb_pic,
email: usuario.email,
website: usuario.user_website
}
);
// despues muestro señal que el usuario ya esta loguado
$("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
$("#login").hide();
});
}
}
},
// aqui declaro los [URL="http://developers.facebook.com/docs/authentication/permissions"]permisos[/URL] que quiero pedir
{ perms: 'user_website, email' }
);
});
Y por ultimo, mostramos el boton de cerrar secion
Código Javascript
:
Ver original// como el enlace para cerrar session se crea a mitad del proseso de logueo, hay que crear un evento para tal
// con ayuda de jquery lo creamos, cuando este elemento este vivo le asignamos el evento click
$('#logout').live("click", function(e){
// esto desata el logout, logout no tiene callback
FB.logout(function(){
//ocultamos informacion de login
$("#welcome").hide();
// muestro el boton de logueo
$("#login").show();
e.preventDefault();
});
});
</script>
-----------------------------------------
y bien eso seria todo, el resto es imaginacion y cosa suya
a continuacion les dejo el codigo completo
Código Javascript
:
Ver original<a href="#" id="login">Entrar con facebook</a>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
var nombre;
var link;
var imagen;
FB.init({
appId: '000',
status: true,
cookie: true,
xfbml: true
});
$(document).ready(function(){
FB.getLoginStatus(function(response) {
if (response.session) {
FB.api('/me', function (usuario) {
$("#fb_connect").append('<span id="welcome">Bienvenido <strong>' + usuario.name + '</strong> | <a id="logout" href="#">Cerrar seción</a></span>');
$("#login").hide();
});
}
});
});
$('#login').click(function (e) {
e.preventDefault();
FB.login(
function(response) {
if (response.session) {
if (response.perms) {
FB.api('/me', function (usuario) {
var fb_pic;
FB.api(
{
method: 'fql.query',
query: 'SELECT pic FROM user WHERE uid=5526183'
},
function(response) {
fb_pic = response[0].pic;
}
);
$.post(
"fb/fb-register.php",
{
idUser: usuario.id,
name: usuario.name,
link: usuario.link,
pic: fb_pic,
email: usuario.email,
website: usuario.user_website
}
$("#login").hide();
});
}
}
},
{ perms: 'user_website, email' }
);
});
$('#logout').live("click", function(e){
FB.logout(function(){
$("#welcome").hide();
$("#login").show();
e.preventDefault();
});
});
</script>
y si tienen alguna duda, encuentran un error, o tienen una sugerencia, por favor de postearla!!
saludos y suerte, y de nuevo muchas gracias a
dual3nigma
------------------------------
si alguno duda de su funcionamiento... lo pueden ver trabajando en
http://dannegm.com
como mencione esta incluido en el index