y clickeamos en crar nueva app
ponemos un nombre y descripción a la app y presionamos confirmar,
una vez creada la app vamos a editar configuraciòn y hacemos click en Sitio web con Facebook Login, en URL de sitio ponemos
la ruta de nuestro servidor que va a conectarse con la api de facebook ( si no tenes un hosting, lo podes hacer en tu servidor local como en este ejemplo)
para poder usar nuestra app, necesitamos el skd php de facebook que podemos descargar de github
https://github.com/facebook/facebook-php-sdk
hacen clik en zip
o si tienen git instalado
git clone [email protected]:facebook/facebook-php-sdk.git
la carpeta que bajamos contiene varios archivo de ejemplo, lo que necesitamos para nuestra app es la carpeta src que contiene las clases que se conectan a la api de facebook, creamos una carpeta llamada facebookLogin y esta copiamos la carpeta src
dentro de facebookLogin creamos test.php
<!doctype html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
.btn-facebook-login {
background: #5771A7;
background: -moz-linear-gradient(top, #5771A7 0%, #3B5998 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5771A7), color-stop(100%,#3B5998));
background: -webkit-linear-gradient(top, #5771A7 0%,#3B5998 100%);
background: -o-linear-gradient(top, #5771A7 0%,#3B5998 100%);
background: -ms-linear-gradient(top, #5771A7 0%,#3B5998 100%);
background: linear-gradient(top, #5771A7 0%,#3B5998 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5771A7', endColorstr='#3B5998',GradientType=0 );
}
.btn-social {
width: 220px;
color: white;
padding: 10px;
font-weight: bold;
text-align: center;
}
.facebook-ico {
width: 26px;
height: 20px;
position: absolute;
margin-left: -42px;
background-image: url("http://bookmarks.hol.es/images/icon_facebook.png");
}
</style>
</head>
<body>
<a href="">
<div class="btn-facebook-login btn-social"><i class="facebook-ico"></i>Ingresa con facebook</div>
</a>
</body>
</html>
creamos un link que contiene un div con las clases btn-facebook-login btn-social, que le agrega un color de fondo , padding , y agrega el icono de facebook a la izquierda
<?php require "src/facebook.php";
$facebook = new Facebook(array( 'appId' =--> 'yourappid',
'secret' => 'yoursecret',
));
$user = $facebook->getUser();
if ($user) {
$user_profile = $facebook->api('/me');
$logoutUrl = $facebook->getLogoutUrl();
}else{
$loginUrl = $facebook->getLoginUrl();
}
?>
añadimos este codigo en php al principio del body,
lo primero que hacemos es llamar al archivo facebook.php, mediante un require, este a su vez se encarga de llamar a otro archivo base_facebook.php, que se encuentra en la carpeta src
despues creamos una instancia de la clase facebook y le pasamos un array como parámetro que contiene la appid y secret de nuestra app, datos que se encuentran en la configuración de nuestra app en facebook;
a través del método getUser() obtenemos los datos del usuario
mediante un if verficamos si la variable $user no da true, en caso verdadero mediante el método api de la clase facebook, guardamos en la variable $user_profile los datos del usuario, ademas de crear la dirección url para que el usuario pueda cerrar sesión
si nos da falso creamos el link para que el usuario inicie session
<?php if($user){ ?>
Hola <?php echo $user_profile["name"] ?>
<img src="https://graph.facebook.com/<?php echo $user; ?>/picture" alt="" />
<span style="font-size: 12px; line-height: 18px;"><a href="<?php echo $logoutUrl; ?>">Logout</a></span>
<?php }else{ ?>
<a href="<?php echo $loginUrl ?>">
<span style="font-size: 12px; line-height: 18px;"><div class="btn-facebook-login btn-social"><em class="facebook-ico"></em>Ingresa con facebook</div></span>
</a>
<?php } ?>
si el usuario esta logueado con nuestar app , mostramos su nombre a travez de $user_profile["name"] y su imagen de perfil.
en este paso podemos guardar los su imagen y nombre en una base de datos
en caso contrario mostramos el boton de loguearse creado anteriormente con el link en direccion a $loginUrl, variable que contiene la ruta para loguearse con la app
codigo completo