stillife27
Usuario (Argentina)
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
<h1>Validar subida de archivos con formData html5</h1> En este tutorial vamos a crear un formulario, que nos va a permitir subir archivos a nuestro servidor, verificando que el tipo de archivo sea jpg, gif, o png antes de enviarlo al servidor y gastar recursos innecesarios<!--more-->, dándole al usuario una respuesta rapida usando la api FormData mediante javascript, lo primero que vamos a crear es nuestro template en html5 y agregar un simple formulario <div id="wrapper"> <h1>Subir imagen</h1> <!-- <form action="" method="POST" enctype="multipart/form-data"> -->{} <input type="file" name="avatar" /> <input type="submit" value="Enviar" /> <div id="error"></div> </div> agregamos algo de estilo , metiendo este codigo en el head ( abajo de la etiqueta meta) en el id wrapper , centramos el contenido mediante el margin, cambiamos el fondo y añadimos algo de padding para que se vea un poco mejor, tambien cambiamos el color del texto del div error a rojo <style> #wrapper{ margin: 0 auto; width: 400px; border:solid 1px grey; padding: 8px; background: #ddd; } label{ display:block; margin-bottom: 5px; } #error{ width: 200px; color:red; padding: 8px; } </style> con la presentacio basica ya terminada pasamos a javascript, agregamos este codigo debajo del formulario, antes de la etiqueta de cierro del body if(window.FormData){ // valida archivo }else{ alert("actualiza tu navegador, para usar FormData") } debido a que la api formData no esta soportada por todos los navegadores ( IE lo soporta desde la version 10) usamos un condicional [if(window.formData)], si nos da verdadero procedemos a validar el archivo si no enviamos un mensaje al usuario, if(window.FormData){ var file = document.getElementById("avatar"), error = document.getElementById("error"), submit = document.getElementById("submit"); error.innerHTML = ""; file.addEventListener("change", function(){ validateFile = this.files[0]; console.log(validateFile) }) } en caso de que nuestro navagador soporte FormData usamos el método getElementById para tener referencia al input file de nuestro formulario y lo guardamos en una variable llamada file también guardamos una referencia al div con el id error y al botón submit , después mediante addEventListener, llamamos al evento change, que se va a encargar de llamar a una función anónima cuando el usuario seleccione un archivo, creamos una variable llamada validateFile, que va a guardar los datos relacionados al archivo, usamos this que hace referencia el elemento seleccionado con la propiedad files contiene los datos de la misma usando console.log vemos lo siguiente vemos información importante como el nombre, tamaño y tipo, estos nos últimos nos van a servir para realizar la validación if(validateFile .size > 1000000){ document.getElementById("error").innerHTML("EL archivo pesa mas que 1mb"); error.innerHTML = "EL archivo pesa mas que 1mb"; submit.setAttribute("disabled", "disabled"); return; } primero verificamos el tamaño de la imagen, supongamos que el limite de subida de que queremos es de 1mb, debido a que file.size guarda el tamaño en bytes usamos este numero 1000000 , ( 1kb equivale a 1000bytes y 1mb a 1000000 bytes); si nos da verdadero damos el mensaje al usuario en el div con el id error, también deshabilitamos el botón submit para evitar que el usuario no pueda enviar el formulario al servidor , con el atributo disabled despues un return para que el script no se siga ejecutando if(validateFile.type == "image/png" || validateFile.type == "image/jpeg" || validateFile.type == "image/jpg" || validateFile.type == "image/gif"){ error.innerHTML = "Archivo aceptado"; submit.removeAttribute("disabled"); }else{ submit.setAttribute("disabled", "disabled"); error.innerHTML = "EL archivo debe ser jpg, gif o png"; } necesitamos que el archivo este en png, gif o png, para verficarlo usamos un condicional que examina la propiedad size del archivo sea igual a alguno de estos formatos, si nos da true, mostramos un mensaje de exito y removemos el atributo disabled mediate el metodo setAttribute si el archivo no es valido deshabilitamos el boton submit y mandamos el mensaje adecuado