Páginas

viernes, 14 de octubre de 2011

Cambiar favicon al fan page de Facebook con Iframes

No sabía cómo titular este post, ya que, puede tener muchas denominaciones lo que finalmente queremos hacer, sin embargo, el resultado siempre será el mismo:


** Dar click sobre las imágenes para verlas grandes.**

Este post podría denominarse: 

- Poner logotipo pequeño a página de fans en Facebook.
- Favicon en tabs de Facebook.
- Cómo ponerle el logo chico a mi página de Facebook.
- Cambiar favicon en pestañas de páginas de fans.
- Cambiar ícono de tab de página de fans con Static Iframe.
- Favicon en landing page.
- Entre otras.

Pero, basta de introducciones, vamos a lo que nos interesa y quizá hayamos estado buscando por meses sin respuesta satisfactoria, sobretodo en español.

A continuación trataré de ser lo más específico posible para que no hayan dudas.

1. Lo primero que se debe hacer es OBVIAMENTE tener creada una página para fans (no me refiero a la cuenta de usuario, sino al fanpage) en FB (Facebook). De eso sí hay muchos tutoriales y videotutoriales, así que supondré que todos los que están leyendo ya tienen una creada.

2. Lo segundo es, con la cuenta de usuario de FB abierta, ingresar a https://developers.facebook.com/apps para ingresar a la zona de las aplicaciones, las cuales nos ayudarán a crear el "tab" o "pestaña" de nuestro fanpage. (o ingresar a http://www.facebook.com/developers si ya se tienen aplicaciones creadas con anterioridad)

Nos aparecerá una ventana como esta:

Le damos click a "Permitir" para poder acceder.

3. Si es la primera vez que vas a crear una aplicación te saldrá una ventana como esta:


En mi caso, como ya he creado un par, me sale esta ventana (que no es muy distinta):


4. Ahora, tengas cualquiera de las 2 ventanas, los siguientes pasos son los mismos

5. Das click en el botón "+ Crear nueva aplicación". Se te abrirá un cuadro llamado "Nueva aplicación". Allí escribes el nombre que gustes para la aplicación, aceptas la "Facebook Platform Policies". Y, finalmente, click en "Continuar", como en la imagen:


6. Aparecerá un nuevo cuadro de control de seguridad, solo debes escribir las letras o números que te piden, y dar click en "Aceptar":


7. Una vez aceptada, aparecerá la siguiente ventana, la cual representa que ya se creó nuestra nueva app (En esta ocasión dejaré los códigos visibles, ya que solo es un ejemplo y resultará más fácil de comprender el proceso)


8. En esta nueva ventana es donde se puede colocar el favicon o logo chico de la página para que sea visible en la pestaña o tab de la fan page. 

Esto se realiza dando click en "(editar ícono)" debajo del nombre de la aplicación. Una vez clickeada la palabra aparecerá un cuadro donde se podrá subir la imagen. Lo recomendable es que ésta sea cuadrada y pequeña, para que se adapte mejor a la pestaña de la página.

La imagen más grande también se puede editar, pero no es necesario hacerlo. En caso se haga, no es indispensable que sea cuadrada, a diferencia de la pequeña.

9. En la parte de "Información básica" no es necesario modificar nada. Así que lo dejamos tal cual está.

10. Vamos a la parte inferior donde sí hay que adicionar datos.


Aquí bastante atentos, porque no debemos equivocarnos al escribir.

Primero damos click en la parte llamada App on Facebook para que se despliegue la sección:

- En Canvas URL:  http://301413096540219.iframehost.com/
- En Secure Canvas URL:  https://301413096540219.iframehost.com/

Luego  damos click en la parte llamada Page Tab para que despliegue la sección

- En Page Tab Name escribimos el nombre que queremos tenga la "pestaña" o la "tab" de nuestro Fan Page, por ejemplo Bienvenid@s, Welcome, Hola a Todos, etc.
- En Page Tab URL:   http://301413096540219.iframehost.com/tab
- En Secure Page Tab URL:  http://301413096540219.iframehost.com/tab

Ahora, si se han dado cuenta, el número que he usado es el App ID de la aplicación que yo creé. Ese número debe ser reemplazado por el App ID de la aplicación que ustedes hayan creado.

O sea, el App Id de mi aplicación es 301413096540219, ese número lo borras y escribes el que te aparece en la parte superior de la ventana. Así de sencillo.

Adicionalmente vamos a guardar la App Secret (que en mi caso es 60a3c951b8945fe743e317bc05803) porque más adelante vamos a utilizarla. O simplemente copiamos el código y lo pegamos en alguna hoja del block de notas, para no perderla.

Finalmente damos click en "Guardar cambios"

11. Terminamos con la configuración de la aplicación. Pero, ustedes se preguntarán por qué no aparece en su Fan Page??? Ahora vamos a colocarlo, no se desesperen jaja. 

12. El siguiente paso es ingresar a:


http://www.facebook.com/add.php?api_key=IdDeTuAPP&pages 
(Remplazando IdDeTuAPP con la ID de tu Aplicación)

13. Aparecerá una nueva página donde debes elegir a cuál de tus páginas quieres insertar la pestaña. En mi caso elegí la página con la que inicié este post.


14. Y, ahora sí aparecerá el favicon, logo chico o ícono en tu página de fans!

15. No te preocupes que aún no terminamos. Todavía nos falta configurar esa pestaña, sino solo estaría de adorno el iconito.

16. Vamos a nuestra página de fans. Veremos que aparece el favicon con nuestra imagen. Le damos click y se nos abrirá la siguiente imagen:


Recuerdas que te dije que guardaras la App Secret? Pues acá la vamos a utilizar! En el espacio en blanco que aparece copias la App Secret de tu aplicación recién creada. No vayas a escribir la mía porque no funcionará!

**Si no recuerdas cuál es, es sencillo saber dónde está, solo ve a http://www.facebook.com/developers. Allí te aparecerá la aplicación que creaste con tu App ID /API Key y a la derecha tu App Secret o "Código secreto de la aplicación"**

17. Luego de haber escrito el código secreto damos click en el botón verde "Save Up Setting". Saldrá el mensaje con título "New App Setup Complete"


18. Vamos a darle click nuevamente al iconito de la app. Esta vez nos aparecerá  una "Solicitud de permiso" a la cual le daremos click en "Continuar" para poder ingresar finalmente a las bondades de nuestra hermosa aplicación.

19. No se aburran que ya estamos por acabar. En realidad ya terminamos si manejan HTML. Pero, seguiré para los que no lo manejan.

20. Aparecerá lo siguiente: 


Pero, como el HTML puede resultar complicado, mejor elegiremos la opción Page Source: Image para subir imágenes directamente desde nuestra computadora, sin necesidad de escribir ningún código. Y hacer de esa imagen la LANDING PAGE (página de aterrizaje, primera imagen que se ve) de nuestra página. Y tendremos esta imagen:


21. Seleccionamos una imagen que hayamos preparado (que no sea más ancha de 500 px) y listo. Damos click en el botón verde "Save Settings"

**Como dato adicional les comunico que en la opción "Non-Fan Page Source" que está marcada en el botón "Off" también se puede subir una imagen que sería vista solo por personas que no son fans de la página. 
O sea, se puede tener una imagen de bienvenida para fans y otra imagen para no fans.

Para ver el resultado damos click en "View Tab" ubicado en la parte superior derecha. Si queremos hacer cambios, damos click en "Settings"

22. Mi resultado es:


23. Para terminar este tema. Mencionaré de manera rápida cómo hacer que aparezca como primera página nuestra nueva pestaña. Lo haré rápido, ya que, hay tutoriales donde explican con mayor claridad, de todos modos, espero ser igual de claro.

- Encima de la imagen dice "Editar información" damos click allí (En ocasiones aparece un botón "Editar la página" que es lo mismo)

- En la nueva ventana buscamos "Gestionar permisos" en la parte izquierda, le damos click.

- En esta nueva ventana buscamos en la parte gris "Pestaña de inicio predeterminada" y elegimos el nombre de nuestra pestaña.

- Damos click en Guardar cambios y LISTO.

.....
Espero se entienda la explicación y sirva para que puedan mejorar sus páginas de fans.
Un gusto.

Sergio LP

10 comentarios:

  1. Mil Gracias por postear cómo hacer la aplicación para poner mi propia imagen en mi página de fans :) Me super sirvió.

    ResponderBorrar
  2. Hola hermano, tengo una pregunta, en este caso que vendria a ser ¿iframehost.com/tab? Es un servicio? es una aplicacion? es algo propio de facebook? o que? espero tu respuesta, gracias

    ResponderBorrar
  3. @Anónimo Hola. Eso es una aplicación prediseñada para hacer landing pages en las páginas de fans, o sea la primera imagen que ves cuando entras a una página de facebook. Lo malo es que te pone el favicon preestablecido, y no el que tú quieres que aparezca. O sea que, al final, igual terminas haciendo el procedimiento que acá expliqué, pero acá está en español X]
    Puedes usarla, funciona igual, si no te molesta el favicon que te ponen por defecto.
    Espero haber sido claro.

    Sergio LP

    ResponderBorrar
  4. Amigo he seguido todos tus pasos, es la tercera vez que lo hago, pero en esta vez no me muestra el enlace Ver la página de perfil de la aplicación" he seguido tus pasos al pie de la letra, a que se debe que no me salga esa opcion? tengo que esperar algo de tiempo? o a que se debe? gracias! es la primera vez que me pasa

    ResponderBorrar
  5. La verdad, no sé a qué se debe que no te aparezca la opción. Intenta nuevamente hacerlo a ver cómo va esta vez. Saludos

    Sergio LP

    ResponderBorrar
  6. No es la primer app que creo siguiendo al pie de la letra este tuto, sin embargo, no me aparece mas lo de "Ver página de perfil de la aplicación".


    Qué será?
    Mariano

    ResponderBorrar
  7. FACEBOOK LAS AH RETIRADO LAS PAGINAS DE PERFIL DE LAS APLICACIONES, ahora cuando queramos añadir una aplicacion a nuestra pagina, tendremos que editar nuestra aplicacion y agregarle una pagina web, por ejemplo http://www.mipagina.com

    y realizar este paso

    https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID
    &display=popup&next=YOUR_URL

    editar esos campos, donde dice YOY APP ID coloquen su id de su aplicacion y donde dice YOU URL coloquen la pagina que le pusieron a la hora de crear su aplicacion, (con la forma que le puse arriba)

    Entonces tendremos por ejemplo

    https://www.facebook.com/dialog/pagetab?app_id=213123213213
    &display=popup&next=http://www.mipagina.com/

    Y Listo, podran añadir su pequeño icono en su página de facebook :D

    ResponderBorrar
  8. Mas info aca

    https://developers.facebook.com/docs/reference/dialogs/add_to_page/

    ResponderBorrar
  9. Muchas Gracias
    https://www.facebook.com/pages/Mundo-Hack-360/169415896462943

    ResponderBorrar