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>

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í.

Crear una aplicación de Frases para Facebook: Publicar en muro de amigo

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.

Hasta el momento nuestra aplicación de frases con opción de publicar en nuestro muro la frases, tabs y comentarios debe ir algo así:
La aplicación es funcional pero no tiene ese toque social que puede hacer crecer a la aplicación: Publicar frases en el muro de nuestros amigos. Con esto es que podemos hacer conocer la aplicación y también enviando invitaciones pero de eso hablare en otro post. Para poder realizar esto usaremos el método propio de Facebook llamado Stream.publish del cual ya había hablado en un post anterior.

<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':'https://brianur.info/logo.png',
'href':'http://apps.facebook.com/tuaplicacion/'}],
'name': mensaje +'<br />',
'description':'Frases Urban'};
var target_id = <? echo $_POST['friend_sel']; ?>;

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

Continuar leyendo…

Crear una aplicación de Frases para Facebook: Tabs y comentarios

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 de como crear nuestra propia aplicación de frases para Facebook, explicare como agregar tabs/pestañas para mostrar las secciones que queramos y también añadiremos un formulario para que los usuarios puedan dejar comentarios.

Tabs

De seguro ya has visto las pestañas en Facebook ya que son muy comunes. Básicamente se usan para organizar en secciones el contenido de la aplicación y su uso es bastante fácil, solo necesitaremos usar un par de etiquetas FBML: fb:tabs y fb:tab-item.

<fb:tabs>
<fb:tab-item href="index.php" title="Inicio" selected="true" />
<fb:tab-item href="comentarios.php" title="Comentarios" />
</fb:tabs>

Usando el anterior código tendríamos de una forma muy sencilla dos pestañas, usando el atributo title le asignamos un titulo o nombre a cada una y de igual forma usando href sus respectivos enlaces a la web de cada sección. Para que la pestaña aparezca como seleccionada usamos el parámetro selected=»true». También se podría usar el parámetro align para que las pestañas se alineen al sentido que se quiera ya que por defecto es a la izquierda.

Continuar leyendo…

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':'https://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.