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.
Un saludo, el javascript donde lo agrego, lo agrego dentro de mi archivo PHP? gracias por el tutorial, ya por lo menos me salen las frases, pero no logro que se pueda publicar ni nada de eso saludos.
Si dentro del mismo archivo PHP, algunas personas me han comentado que no les funciona el publicar en muro cuando recién crean la aplicación pero después de algunos días funciona.
Saludos.
a mi al principio me publicaba en el muro pero ahora no u.u
Buenas!!
Mi duda es… cuando termina de publicar la frase en su muro, como le envias a otra página??
Muchas gracias
Hola Urban, vengo siguiendo tus tutoriales y me encontre con un problema, espero que me puedas ayudar, mi aplicacion ya funciona practicamente, es decir cada vez que entro me tira una frase aleatoria de las que ya escribi pero ahora tengo un problema…Cuando entro a la aplicacion y se ve toda una pantalla blanca y dice la frase arriba a la izq y abajo de la frase hay un boton que dice publicar, el resto NADA! (ensima el boton no funcina lo clikeas y no pasa nada) me podrias ayudar para que le quede una estetica mas parecida a la de la foto de arriba del post???
“http://img63.imageshack.us/img63/2871/publicacion.png“
Realmente me quedo esperando tu respuesta con muchas ansias
Desde ya gracias!
agrego algo mas al mi comentario, creo que el script no esta funcionando, yo lo copie y lo pege debajo del codigo que esta primero pero no creo que este funcionando…
Hola TomasT, al crear la aplicación en facebook.com/developers en la parte que dice Integración con Facebook hay algo llamado Canvas Type, allí debes seleccionar FBML y guardar, esto con el fin de que sirva el botón de publicar. En cuanto a la estética que dices ya viene así por defecto cuando se pulsa el botón publicar.
Hola urban, gracias por contestar, te comento que ya modifique la aplicación y le tilde el fbml, y supuestamente ya debería funcionar pero me surgió otro problema, al entrar a la aplicación, aparece la frase, el botón publicar, pero debajo de este aparece esto
“Aplicación no disponible temporalmente
Errores de tipo Parse:
FBML Error (line 21): illegal tag “noscript” under “fb:canvas”
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde.”
Sabes que es este error?, me podrias ayudar a corregirlo??
Espero tu respuesta con ansias
Desde ya gracias
Hola urban, gracias por contestar, te comento que ya modifique la aplicación y le tilde el fbml, y supuestamente ya debería funcionar pero me surgió otro problema, al entrar a la aplicación, aparece la frase, el botón publicar, pero debajo de este aparece esto
“Aplicación no disponible temporalmente
Errores de tipo Parse:
FBML Error (line 21): illegal tag “noscript” under “fb:canvas”
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde.”
Sabes que es este error?, me podrias ayudar a corregirlo??
Espero tu respuesta con ansias
Desde ya gracias
Sube el código a pastebin.com y yo lo miro
Muchas gracias por contestar, te cuento que ahora la cosa cambio, yo no hice ningún cambio en el código ni nada pero ahora al entrar a la aplicación el no aparece la frase ni el botón (antes si) y el error ahora es otro :
“Aplicación no disponible temporalmente
Errores de tipo Parse:
FBML Error (line 10): illegal tag “map” under “fb:canvas”
FBML Error (line 11): illegal tag “area” under “fb:canvas”
FBML Error (line 12): illegal tag “area” under “fb:canvas”
FBML Error (line 13): illegal tag “area” under “fb:canvas”
FBML Error (line 14): illegal tag “area” under “fb:canvas”
FBML Error (line 18): illegal tag “body” under “fb:canvas”
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde.”
Aca dejo el código, como te das cuenta trate de cambiar lo menos posible tu código para evitar que haya algún error de mi parte pero no logro que funcione :S
http://pastebin.com/QZL4Vf9H
Desde ya gracias!
hola, bueno, te comento que el problema del ultimo post fue algo con el servidor, nada que ver al codigo, ahora se soluciono pero sige el primer error ”
Aplicación no disponible temporalmente
Errores de tipo Parse:
FBML Error (line 19): illegal tag “noscript” under “fb:canvas”
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde”
te dejo nuevamente el codigo (es el mismo que arriba)
http://pastebin.com/QZL4Vf9H
Como siempre espero tu respuesta con ansias
desde ya gracias!!!
Hola Urban, a mi me da el mismo error:
“Aplicación non dispoñible temporalmente
Errores de Análisis:
FBML Error (line 24): illegal tag “noscript” under “fb:canvas”
Lo sentimos, la aplicación que estabas usando está experimentando un problema. Por favor, inténtalo de nuevo más tarde.”
Aquí esta le código: http://pastebin.com/y0DNL4MB
Gracias
El error era por el hosting, ya lo solicione pero sigue sin funcionarme el boton. Y escogí FBML en canvas type. Sería más facil si subieras un código completo de ejemplo, por que estoy medío enrredado
Bueno muchachos, les comento que ya probé el código y funciona http://apps.facebook.com/myloves/tin pero cuando pongo el PHP dentro del Javascript no funciona (raro). Lo que les recomiendo es que rescaten las frases desde una base de datos, así lo tengo yo en una aplicación y me funciona de maravilla. En cuanto al error FBML, yo había leído por ahí que FB iba a hacer unos cambios en el o algo así, a lo mejor por eso el problema. La otra opción es hacer publicaciones con el SDK de Javascript o PHP, por ahí en la documentación hay ejemplos
A mi ya me funciono Urban! pero no me esta publicando en el muro :S y cada vez que se le da clic a plublicar salta el captcha :/
A mi también me saltaba el captcha cuando puse como imagen a http://jennifergil.co.cc/face/homer.jpg la cambie y listo
Hola. el problema que me saltaba era del server, como dice juan, la aplicacion funciona perfecto
y si, con la imagen pone captcha pero si no pones imagen podes publicar sin problema
Gracias por todo!
mira que ya la cambie por otra y lo mismo… que imagen utilizaste? o cual me recomendas?
gracias
Hola Conseguí la forma de que funcionará perfecto, utilizando un archivo de texto para cargar las frases y utilizando la Api Graph de Facebook. pueden verificar el funcionamiento en:
http://app.facebook.com/misahagun/indexf3.php
Si alguien lo necesita dejar mensaje en el area de contacto de misahagun.com
Hola brian necesito tu ayuda, he seguido todos los pasos mira estos son mis codigos http://pastebin.com/L4DBEn1Z ahora bien la aplicacion esta aqui http://www.lilfox.net/facebook/ pero no aperece tal cual la diseñe en facebook.
que puedo hacer?
Gracias ya arregle algunos de los errores pero todavia sigo sin saber como hacer mi propio diseño para una aplicacion.
Hola, me gustaria que me ayudaran tengo un problema con la aplicacion que nadamas me publica la ultima frase del archivo.txt y cuando recargo la pagina y sale otra frase el boton no funciona solo funciona con la ultima frase.
si alguin mejoro el codigo porfavor de pasarmelo si pueden.
Hola. Tengo el código funcionando con algunas modificaciones. Por favor agregarme y les envio. Y de paso me ayudan a publicarlo para todos.. Gracias,
Hola misahagun, donde te puedo agregar para que me pases el código.
Gracias.
Muy intersante opcion pero me preguntaba si hay alguna forma de hacer que el script que lee las frases, lea el texto en html?
@Davabuu si se puede, solo sería cosa de poner html en el txt y listo. Les recomiendo leer sobre la graph API (http://www.brianur.info/funcionamiento-de-la-graph-api-de-facebook/) ya que lo usado en este tutorial hace parte de la vieja API y no se recomienda su uso.