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

Crear una aplicación de Frases para 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.

De seguro haz visto muchas veces en Facebook aplicaciones que dan frases como por ejemplo la galleta de la fortuna o otras de Frases de celebridades, chistes y cualquier tipo de cosas que uno se pueda imaginar. Para crear este tipo de aplicaciones existe una aplicación (…) que genera automáticamente todo lo necesario para tener nuestra propia aplicación de Frases en Facebook, lo malo de usar este servicio es que no nos permite modificar la aplicación a nuestro antojo y las posibles ganancias que podamos tener son para ellos.

Por esta razón, explicare como desarrollar una aplicación generadora de Frases, que será sencilla pero útil y con el tiempo le iremos agregando más funcionalidades.

Generar frases aleatoriamente con PHP

Lo primero que haremos será crear un script que imprima aleatoriamente frases que tengamos en un archivo de texto plano que llamaremos archivofrases.txt. En este caso podríamos también usar una base de datos MySQL, pero para no hacer el tutorial extenso lo haremos de esta forma que es más sencilla pero de igual forma funcional.

<?php
$archivo ="archivofrases.txt";
$frases = file("$archivo");
$frase = rand(0, sizeof($frases)-1);
echo "<h2>".$frases[$frase]."</h2>";
?>

Si tienes dudas con el anterior código, tal vez te interese Leer archivos de texto usando PHP la única novedad es el uso de la función rand. Si hacen la prueba en su servidor, cada vez que recarguen la pagina aparecerá una frase aleatoria. Cada frase en el archivo debe estar en una linea diferente.

Integrar el generador de frases en PHP con Facebook

Para este paso si nunca haz trabajado con el desarrollo de aplicaciones en Facebook te recomiendo el articulo: Primeros pasos para generar aplicaciones de Facebook así que necesitaras tener conectado Facebook con tu servidor.

Creamos una función en Javascript llamada publicar, en la que usaremos el método Stream.publish propio de Facebook para poder publicar en el muro la frase.

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

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

Solo deben modificar la anterior función con los datos de su aplicación. Por ultimo crearemos un botón llamado Publicar Frase, con el que invocaremos la función publicar:

<input type="button" name="frase" value="Publicar Frase" onclick="publicar();" />

Eso es todo por el momento, después explicare como poder realizar invitaciones a la aplicación, agregar comentarios a la aplicación, agregar tabs/pestañas entre otras cosas.