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.

  32 Comentarios

  1. alex   •  

    gracias por el dato me sirvio de mucho

  2. Davabuu   •  

    Muy intersante opcion pero me preguntaba si hay alguna forma de hacer que el script que lee las frases, lea el texto en html?

  3. Alvaro   •  

    Hola misahagun, donde te puedo agregar para que me pases el código.

    Gracias.

  4. misahagun   •  

    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,

  5. Yeltsin   •  

    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.

  6. Ivan   •  

    Gracias ya arregle algunos de los errores pero todavia sigo sin saber como hacer mi propio diseño para una aplicacion.

  7. misahagun   •  

    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

  8. Juan Escobar   •  

    mira que ya la cambie por otra y lo mismo… que imagen utilizaste? o cual me recomendas?
    gracias 😉

  9. tomast   •  

    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!

  10. Juan Escobar   •  

    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 :/

  11. Brian Urban   •     Autor

    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 😉

  12. Juan Escobar   •  

    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 😀

  13. Juan Escobar   •  

    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
     

  14. TomasT   •  

    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!!!

  15. TomasT   •  

    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!

  16. Brian Urban   •     Autor

    Sube el código a pastebin.com y yo lo miro 😉

  17. TomasT   •  

    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

  18. TomasT   •  

    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

  19. Brian Urban   •     Autor

    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.

  20. TomasT   •  

    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…

  21. TomasT   •  

     

    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!

     

  22. Gerard   •  

    Buenas!!

    Mi duda es… cuando termina de publicar la frase en su muro, como le envias a otra página??

    Muchas gracias

  23. SkAr   •  

    a mi al principio me publicaba en el muro pero ahora no u.u

  24. Pingback: Crear una aplicación de Frases para Facebook: Recuperar frases desde una base de datos | Blog personal de Brian Urban

  25. Pingback: Crear una aplicación de Frases para Facebook: Invitar amigos a usar la aplicación | Blog personal de Brian Urban

  26. Brian Urban   •     Autor


    jose luis:

    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.

  27. jose luis   •  

    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.

  28. Pingback: Crear una aplicación de Frases para Facebook: Publicar en muro de amigo | Brian Urban Blog

  29. Pingback: Crear una aplicación de Frases para Facebook: Tabs y comentarios | Brian Urban Blog

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *