¿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…

Pedir permisos en una aplicación de Facebook

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Facebook permite a las aplicaciones poder tomar datos concretos de los usuarios, como por ejemplo el nombre para dar un saludo, el ID, el sexo y entre otros. Por razones de privacidad hay datos que no se pueden obtener y para ello hay que pedir permisos al usuario. En este caso vamos a suponer que necesitamos el email y fecha de cumpleaños del usuario, al no tener los permisos veríamos algo como:

Continuar leyendo…

Crear una aplicación de Frases para Facebook: Recuperar frases desde una base de datos

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Anteriormente había explicado como mostrar aleatoriamente las frases desde un archivo de texto usando PHP, el problema de usar este método es que se puede volver muy fastidioso estar editando el archivo de texto para introducir una nueva frase; el uso de una base de datos convierte este proceso en algo más sencillo ademas nos de muchas más ventajas como la posibilidad de permitirle a los usuarios enviar sus propias frases, mostrar todas las frases en una tabla, etc.

Creando la base de datos en MySQL

Se debe crear una base de datos con el nombre que quieran, en este caso yo usare el nombre “app_quotes” y luego debemos crear una tabla con una estructura como la siguiente:

CREATE TABLE frases
 (
 id INT PRIMARY KEY AUTO_INCREMENT,
 frase VARCHAR(150)
 );

Después de crear la tabla deben insertar las frases para luego mostrarlas.

Recuperar las frases desde la base de datos

$conexion = mysql_connect("localhost", "usuario", "password");
mysql_select_db("app_quotes", $conexion);
$consulta = "SELECT frase FROM frases ORDER BY RAND() LIMIT 1";
$query = mysql_query($consulta, $conexion) or die(mysql_error());
$row = mysql_fetch_row($query);
$frase = $row[0];
echo "La frase del día es: ".$frase;

Publicar la frase en el muro

<script>
 function publicar(){
 var mensaje = "<?php echo $frase; ?>";
 var user_message_prompt = "¿Deseas comentar algo?";
 var user_message = "Que buena frase!";
 var attachment = {'media':
 [{'type':'image',
 'src':'http://tuweb.info/logo.png',
 'href':'http://apps.facebook.com/tuaplicacion/'}],
 'name': mensaje +'<br />',
 'description':'Frases Urban'};

 Facebook.streamPublish(user_message,attachment,'','',user_message_prompt);
 }
publicar();
</script>

Ver ejemplo

Crear una aplicación de Frases para Facebook: Invitar amigos a usar la aplicación

Este articulo hace parte de la vieja API de Facebook, para más información sobre la nueva API te recomiendo leer Funcionamiento de la Graph API de Facebook.

Continuando con el Tutorial para crear una aplicación de frases, veremos algo muy importante para hacer crecer nuestra aplicación: Invitar amigos.

Para hacer esto necesitamos hacer uso de las siguientes etiquetas FBML:

<fb:request-form
 action="index.php?accion=amigos"
 method="POST"
 invite="true"
 type="Tu aplicacion!"
 content="Hola! encontre esta aplicacion y pense que te podria gustar. Descripcion de la aplicacion
 <fb:req-choice url='http://www.facebook.com/login.php?api_key=<c:out value='${apiKey}' />'
 label='Ir a la aplicacion!' />">

 <fb:multi-friend-selector
 showborder="false"
 actiontext="Invita a tus amigos a usar esta aplicacion."
 exclude_ids="<c:out value='${appUserFriends}' />"
 max="20" />
</fb:request-form>

El resultado:

Pueden ver el ejemplo funcionando aquí.