Dar estilo a aplicaciones de Facebook con Fbootstrapp

Una parte importante de una aplicación es su diseño y estructura del contenido, en mi caso por ejemplo se me dificulta más idear esta parte que el mismo desarrollo, pero gracias a Fbootstrapp ahora me puedo olvidar del CSS y lo que ello conlleva. Fbootstrapp es un framework que incluye todo lo necesario para que nuestra aplicación de Facebook se vea bien: Botones, tablas, tipografías, formularios y demás componentes estilizados y no se limita sólo a eso, también trae consigo una librería Javascript (que usa jQuery) que nos permite hacer alertas, tabs, barras de navegación, etc. Este framework se basa en Bootstrap por lo que trae consigo algunas ventajas como poder usar Less o el Scaffolding adaptado para funcionar de maravilla en aplicaciones iFrame (canvas) o pestañas de fanpages.

Sitio web de Fbootstrapp

Publicar una foto con el PHP SDK en Facebook

Continuando el trabajo con el PHP SDK de Facebook veremos cómo publicar una foto en el muro de una persona. En este caso se debe hacer lo de siempre, autentificar al usuario con nuestra aplicación y pedir permiso de publicación (publish_stream) como lo vimos anteriormente, la única novedad es el uso del método setFileUploadSupport que le indica al SDK que permita la carga de archivos. Después de tener la foto guardada en el servidor, sea cual sea la forma en que tu aplicación la genere se publica la foto de la siguiente forma:

/*Se habilita la carga de archivos 
con setFileUploadSupport.*/
$facebook->setFileUploadSupport(true);
// Se indica la ruta de la imagen en el servidor.
$img = 'ruta_de_la_imagen.png';
// Haciendo uso de POST se envía la foto usando el método llamado api
$photo = $facebook->api('/me/photos', 'POST',
array( 'source' => '@' . $img,
'message' => 'Mensaje a ser publicado con la foto'
));

Facebook automáticamente crea un album con el nombre de la aplicación, en caso de querer crear un album con otro nombre:

$album=array('name'=>'BrianUR.info', 'description'=>'Tutoriales para crear aplicacion
en Facebook');
$facebook->api('/me/albums','post',$album);

Crear un sistema de login con Google+ (OAuth)

Con este articulo quiero dar el inicio a una serie de tutoriales sobre la API de varias redes sociales como Google+, Twitter, Youtube y todas las demás que se pueda en el proceso. Para crear un sistema de login en nuestra web con Google+ debemos conocer sobre OAuth, que por definirlo de una forma muy general y rápida es un protocolo creado para interactuar fácilmente con los datos de usuario de un sitio como lo puede ser Facebook, Google, Twitter y muchos más servicios reconocidos hacen uso de OAuth.

Lo primero que debemos hacer es registrar nuestro sitio:

Posteriormente en manejar dominios se debe verificar la propiedad del dominio siguiendo los pasos:


Continuar leyendo…

Crear un sistema de pago con tweets o publicaciones en Facebook

Es hora de hacer una aplicación real con lo aprendido en anteriores tutoriales, en este caso lo que haremos será una aplicación para loguear al usuario en nuestra web (no una aplicación dentro de Facebook) con el objetivo de que se le publique en el muro lo que queramos a cambio de poder descargar por ejemplo un libro o un tutorial, por decirlo de una mejor forma cambiar una descarga por un tweet o una publicación en Facebook. Es algo sencillo de hacer y bastante útil para hacer conocer tu sitio o producto en redes sociales.

Primero debes editar tu aplicación en el área de desarrolladores, buscas donde diga Selecciona como tu aplicación se intrega con Facebook y en Sitio web escribes la URL del sitio. Posteriormente debemos crear un directorio, en mi caso lo he llamado descargas. Este directorio debe estar protegido para que nadie con solo obtener la URL del archivo pueda descargarlo directamente, posteriormente usando PHP se llama al archivo para que pueda ser descargado solo por usuarios que hagan el «pago». En la carpeta mencionada anteriormente creamos un archivo .htaccess que debe tener lo siguiente:

AuthUserFile  /home/miweb/descargas/.htpasswd
AuthName "Que coño intentas hacer?"
AuthType Basic

Options All
<Limit GET POST PUT>
require valid-user
</Limit>

Continuar leyendo…

Publicar en el muro con el PHP SDK

Una de las cosas más habituales en una aplicación es publicar contenido del usuario en su muro o en el de un amigo, así que para continuar trabajando con los métodos que nos provee el PHP SDK veremos como hacerlo. Para el caso de querer publicar en el muro de un amigo se debe reemplazar /me/feed por /IDAmigo/feed, no olvides que para que el código funcione tienes que autenticar el usuario y pedir el permiso extendido publish_stream.

<?php
$parametros=array('message' => 'Aprendiendo a desarrollar aplicaciones en Facebook',
				  'name' => 'BrianUR.info',
				  'caption' => 'Mi primer aplicacion en Facebook',
				  'link' => 'https://www.brianur.info',
				  'description' => 'Es genial',
				  'picture' => 'https://brianur.info/brianur.png',
				  'actions' => array(array('name' => 'Entra ya!',
                                      'link' => 'https://www.brianur.info')));
$facebook->api('/me/feed','post',$parametros);
?>

Conociendo el PHP SDK de Facebook

Facebook provee a los desarrolladores un kit de desarrollo para poder trabajar con su API de una manera más sencilla, dentro de estas herramientas se encuentran el JavaScript SDK, PHP SDK, iOS SDK (iPhone & iPad) y el Android SDK. Para este caso veremos el funcionamiento del PHP SDK de Facebook, trabajaremos algunos de sus métodos más usados, eso si, es primordial haber leído antes el funcionamiento de la Graph API de Facebook para entender lo que se hace en el código.

Puedes descargar el archivo facebook.php que necesitamos desde github. La versión actual es la 3.1.1, muy importante en tener en cuenta esto para las personas que ya habían desarrollado aplicaciones antes, ya que algunos métodos no funcionan en las nuevas versiones del SDK, como es el caso de getSession() que hacía parte de la Rest API, así que si ven un Fatal error: Call to undefined method Facebook::getSession() ya saben la razón.

Autenticación

El siguiente código siempre será necesario usarlo para poder autenticar el usuario con una aplicación (obtener un token, pedir permisos), si buscas por la red te podrás encontrar con múltiples formas para hacer este paso, hay personas que hacen varios tipos de validaciones (recomiendo que tu también lo hagas) para evitar errores; en este caso para ahorrar código y para que se entienda mejor he puesto lo estrictamente necesario:

<?php
/*
	Código de ejemplo para obtener datos del usuario en Facebook
	www.BrianUR.info
*/
// URL de la aplicación
$urlApp = "http://apps.facebook.com/brianur/";
// ID y Secret ID de la aplicación
$appId = "0000000000000";
$secret = "00000000000000000000000000000000";
//Llamada al Facebook SDK
include_once "facebook.php";
// Instanciamos el objeto Facebook
$facebook = new Facebook(array('appId' => $appId,
							   'secret' => $secret,
							   'cookie' => true));
// Obtenemos una session
$user = $facebook->getUser();
if (!$user){
// Si el usuario no está autentificado crea una URL para hacerlo.
// Se usa 'scope' para pedir permisos separados por coma.
// Se usa 'redirect_uri' para redireccionar a esa URL despues de la acción del usuario
$loginUrl = $facebook->getLoginUrl(
            array(
                'scope' => 'user_about_me',
                'redirect_uri' => $urlApp
            )
    );
echo "<script type=\"text/javascript\">top.location.href = '$loginUrl';</script>";
} else {
	// Hasta aquí el usuario tendría que estar autentificado con la aplicación.
	$yo = $facebook->api('/me');
	print_r($yo);
}
?>

El anterior código retorna varios datos del usuario, para ver datos ocultos se requiere el uso de permisos extendidos.
Continuar leyendo…

La nueva plataforma para desarrolladores en Facebook: Creando una aplicación

En los últimos meses la plataforma para desarrolladores de aplicaciones para Facebook ha cambiado bastante, con solo mencionar que ya no se utiliza FBML el cual usé para casi todos los tutoriales anteriores y por lo tanto ya son obsoletos. De esta manera iniciaré otra serie de tutoriales hablando del «nuevo Facebook» y de cómo hacer aplicaciones en específico. Iniciemos por lo más básico, crear una aplicación. Este será el único tutorial en el que mostraré el proceso paso por paso para ayudar a los nuevos, en los próximos prometo ir al grano 😉

Creando una aplicación en Facebook Developers

Antes que nada para poder crear una aplicación debes tener tu cuenta verificada, para eso puedes agregar tu número de móvil y luego esperar a que te llegue un SMS con un código que debes usar para la verificación, he podido ver que a algunas personas no les llega el código y eso se debe al operador móvil que usan (Comcel), en mi caso usando Tigo funcionó perfectamente.

Para crear y editar aplicaciones se usa Facebook Developers, si es la primera vez que accedes a el te pedirá permisos y si ya habías creado una aplicación te darás cuenta que la interfaz cambió. Ahí veremos un botón llamado Crear una nueva aplicación:

Continuar leyendo…

¿Qué es Open Graph protocol y cómo funciona?

Para definir Open Graph de una forma sencilla piensa en el momento cuando compartes un enlace en Facebook: lo normal sería ver una imagen, una descripción y un titulo que toma automáticamente Facebook para mostrar, el problema es cuando por ejemplo toma una imagen aleatoriamente del sitio que muchas veces no tiene nada que ver con lo que queremos compartir o en el peor de los casos no aparece una imagen y de la misma forma el titulo y descripción que toma no son descriptivas.

Ahí es donde Open Graph trabaja, permitiendo con un simple método incluir información precisa sobre nuestro sitio web para una correcta representación del contenido de nuestro sitio en redes sociales. En el caso específico de la red social de Mark Zuckerberg, usar este método no solo nos servirá a la hora de compartir un enlace sino también cuando un usuario le de un «me gusta» a un post, en vez de publicarse en su muro un simple enlace aparecerá el titulo, descripción y imagen que nosotros queramos; de esta forma podemos atraer nuevos visitantes/clientes.

¿Cómo funciona Open Graph?

Sencillo, solo debes incluir en la cabecera de tu sitio la etiqueta <meta> especificando la información de la siguiente forma:

<head>
<title>El Tales</title>
<meta property="og:title" content="El Tales"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://tales.com/info/"/>
<meta property="og:image" content="http://visajes.com/tales.jpg"/>
<meta property="og:site_name" content="Tales"/>
<meta property="fb:admins" content="TU_ID"/>
<meta property="og:description"
content="El tales o visaje visajoso es aquel elemento visaje que se une con el tin
         para formar el visajimiento conocido como TinTales, el cual reune cosillas varias."/>
</head>

Continuar leyendo…

Funcionamiento de la Graph API de Facebook

De ahora en adelante los tutoriales sobre el desarrollo de aplicaciones para Facebook estarán orientado para la Graph API, ya que gran parte de los anteriores artículos están basados en la Old REST API que aunque actualmente funciona no es recomendado hacer uso de esta.

¿Cómo funciona la Graph API?

Antes que nada hay que entender el funcionamiento de esta «nueva» API, la cual nació con la idea de simplificar el desarrollo de las aplicaciones. Básicamente nos permite obtener datos de distintos objetos como por ejemplo el objeto User o el objeto Event y las conexiones entre ellos. Esto se podría representar como una base de datos, por ejemplo si «buscáramos» el objeto user sería como hacer un select * from users y recibiríamos un array con los datos.

¿Cómo funcionan los Objetos?

[pullquote1 align=»right» variation=»green»]Los objetos disponibles actualmente son: Users, Pages, Events, Groups, Applications, Status messages, Photos, Photo albums, Profile pictures, Videos, Notes y Checkins.[/pullquote1]
Cada objeto tiene un identificador Único (ID) con el que se puede acceder a su información que sería algo como https://graph.facebook.com/ID. Por ejemplo si probáramos con mi ID https://graph.facebook.com/brianurban nos debería devolver un array con nombre, ID, genero y otros datos que son públicos, pero en caso de querer acceder a datos privados como por ejemplo el email del usuario se deben pedir permisos, explicaré eso más adelante.

Conexiones

Cada objeto está relacionado con otros, a dichas relaciones se les llama Conexiones, como por ejemplo la conexión friends o la conexión posts a los cuales se puede acceder desde http://graph.facebook.com/ID/Conexion. Las conexiones disponibles actualmente son: Friends, News feed, Profile feed (Wall), Likes, Movies, Music, Books, Notes, Photo Tags, Photo Albums, Video Tags, Video Uploads, Events, Groups, Checkins.

Como mencioné anteriormente la forma acceder a la API es enviando peticiones a http://graph.facebook.com, pero para no complicarnos la vida Facebook provee varias librerías que facilitan el trabajo. La Graph API también nos permite hacer consultas a varios objetos a la vez (multiquerys) de la forma http://graph.facebook.com?ids=ID,ID o hacer la consulta de datos específicos http://graph.facebook.com/1230140028?fields=email,name. Incluso podemos hacer un limit, imagínense lo que se podría demorar consultar todos los amigos de un usuario, suponiendo que ese usuario tiene 4.000 amigos, para ello solo haríamos un limit a la conexión friends http://graph.facebook.com/ID/friends?limit=15.

Permisos extendidos

Para obtener por ejemplo el email del usuario como en el ejemplo anterior se necesitan pedir permisos extendidos, algunas conexiones simplemente requieren un token, veámoslo en detalle:

[default_table]

PermisosDescripción
read_friendlistsAcceso a la lista de amigos del usuario.
read_insightsAcceso a los «Insights» de páginas, aplicaciones y dominios del usuario.
read_mailboxAcceso a los mensajes del usuario.
read_requestsLee las solicitudes de amistad.
read_streamPermite lectura del time line del usuario.
xmpp_loginPermite a la aplicación usar el chat de Facebook.
ads_managementAdministración de anuncios en Facebook.
create_eventHabilita la creación y edición de eventos.
manage_friendlistsEdición y creación de listas de amigos.
manage_notificationsLeer notificaciones y poder marcarlas como leidas.
user_online_presenceAcceso a la cuenta del usuario cuando esté online/offline.
friends_online_presenceAcceso a los amigos del usuario
publish_streamPermite la publicación de estados, comentarios…
rsvp_eventPermite confirmar asistencia a eventos.

[/default_table]

En el articulo conociendo el PHP SDK de Facebook hablo de como usar los permisos extendidos. Como ven el funcionamiento de esta API es bastante sencilla, teniendo en mente su funcionamiento se pueden hacer cosas fácilmente como por ejemplo publicar en el muro, crear albums… próximamente iremos viendo como hacer este tipo de cosas.

Recomendaciones al crear una aplicación en Facebook

En tiempo que llevo desarrollando aplicaciones para esta red social me he llevado algunas malas experiencias, por eso quiero compartir con ustedes algunas recomendaciones que deberían tener en cuenta cuando hagan sus propias aplicaciones:

Enviar la aplicación al directorio

Cuando la aplicación tiene por lo menos 5 usuarios mensuales (no fans) se puede enviar al directorio de aplicaciones. La clara ventaja de realizar este paso es que podemos aumentar los usuarios de la misma y por otro lado he podido comprobar que Facebook es menos restrictivo con las acciones de la aplicación. El proceso de aprobación en el directorio se demora más o menos 24 horas.

Evitar hacer uso de publicaciones automaticas

Es cierto que con las publicaciones automáticas en el perfil de los usuarios la aplicación puede crecer muy rápido, pero Facebook puede considerar tu aplicación como generadora de spam y solo sería necesario un par de horas para que te la bloqueen ya que cuentan con un sistema de detección de acciones sospechosas. Mi recomendación es que las publicaciones sean generadas por eventos realizados por el usuario, como por ejemplo al dar click en un botón, o por lo menos hacer uso de sesiones para que solo se haga una publicación automática. Continuar leyendo…