Personalizar staticHTML en el nuevo diseño de facebook

Te has preguntado... ¿Cómo personalizar "static HTML: iframe tabs" en el nuevo diseño de facebook?

Desde el 20 de junio del 2014 facebook actualizó su nuevo diseño para páginas de empresa y la aplicación "static HTML: iframe tabs" tiene una nueva (y rebuscada) forma de personalizar los iconos de presentación.

En el pasado, este tipo de aplicaciones eran muy famosas debido a la restricción existente sobre el desarrollo de concursos; donde facebook obligaba a llevar a cabo estas acciones a través de páginas de terceros. En la actualidad, ya se pueden desarrollar concursos a través de la propia página de empresa de facebook, lo que lleva a que estas aplicaciones estén comenzando a quedar en desuso... aunque siguen guardando un gran potencial por explotar.

Como sabes, en el segundo día del curso del Curso de Redes sociales para autónomos, desarrollamos una página de empresa o de marca en facebook y entre los distintos apartados a configurar, están las pestañas de aplicaciones o  "Page tab" y por eso vamos a ver cómo puedes personalizar "static HTML" en el nuevo diseño de facebook.

Cómo instalar Static HTML en nuestra página de facebook

Con el nuevo diseño de facebook, esta acción aún es más sencilla que en la versión anterior y solo tienes que seguir estos pasos:

1. En la parte superior de la pantalla de facebook, en el cuadro de texto añade “Static HTML: iframe tabs”. También podrás poner: Static HTML [Second Tab]/[Third Tab]/etc
2. Al hacer clic sobre la aplicación, te redirige a una página, donde has de pulsar sobre “Add Static HTML: iframe tabs to a Page”
3. En la nueva ventana, selecciona tu página y haz clic en “Añadir pestaña de página”
4. Para configurar la nueva pestaña de página que acabas de añadir, sigue los pasos que nos ofrece Beatriz González Pozo en su post: Cómo añadir tu web o blog a Facebook.

Cómo Personalizar "static HTML" en el nuevo diseño de facebook

La personalización del icono de "static HTML" en el nuevo diseño de facebook tiene una forma rebuscada de realizarse pero como comprobarás, es una tarea sencilla si sigues estos pasos:

1. Dirígete a developers.facebook.com/apps y haz clic en el botón "+Create new App".
   
2. En la nueva ventana: Escribe el nombre que quieras para la aplicación (con sentido y descriptivo) y en el botón "Escoge una categoría" selecciona "Aplicaciones para páginas"
   Te recomiendo que dejes en blanco el campo "Namespace" y mantén la selección "No" para "Is this a test version of another app?"
   
3. En la parte inferior derecha pulsa sobre el botón "Creación de aplicaciones" y... ¡Felicidades ya tienes tu aplicación creada! ... ahora veremos cómo se configura.
   
4. Dentro de la aplicación creada, en la página de configuración general donde te encuentras, dirígete a la parte izquierda de la pantalla y en el menú vertical haz clic en "Settings"
   
5. En dicha pantalla dirígete a la parte inferior y pulsa sobre "+Add Platform" y selecciona "Page Tab"
   

En este momento, vas a hacer un alto en la configuración de la aplicación creada, para dirigirte a tu página de empresa de facebook que estás personalizando ¡Cuidado! Dirígite a tu página de facebook a través de una nueva pestaña o ventana de tu navegador de internet o perderás parte del trabajo realizado.

1. Visualizando tu página de facebook, dirígete a la pestaña de "static HTML" que estás personalizando y haz clic en ella.
   
2. Una vez visualizada la aplicación "static HTML" pulsa sobre "Edit Tab" y en la nueva ventana haz clic en el botón "Settings"
   
3. Dentro de la pestaña "Settings", desplaza la página hasta la parte inferior y de nuevo pulsa sobre el botón "Edit Icon"
   

"static HTML" te ofrece la posibilidad de personalizar 3 imágenes de pestañas de páginas de facebook de forma gratuita, sin tener que desarrollar ninguna otra opción...

cuando superes ese límite has de continuar con estos pasos... o pagar una suma de dinero al mes... por este motivo, continuemos:

1. Dirígete al paso "Step 2" dentro de la ventana donde te encuentras (ventana configuración de "static HTML")
   
2. En la aplicación de facebook creada a través de developers.facebook (visualízala cambiando en tu navegador de pestaña o ventana). Por si te has despistado... ve a la categoría "Configuración/Settings", del menú vertical de la parte izquierda de la pantalla.
   
3. Copia los datos del campo "ID de la aplicación" (developers.facebook) y pégalos en el campo "App ID" (static HTML); repite esta acción con el campo "App Secret" de developers.facebook y pegando en "App Secret" de static HTML
   
4. Dirígete al paso "Step 3" dentro de la ventana de la configuración de "static HTML" y copia los datos de "Page Tab URL" para pegarlos en el campo "URL de pestaña de la página" de developers.facebook, repite esta acción con el campo "Secure Page Tab URL" de static HTML y pegando en "URL segura de pestaña de la página" de developers.facebook
   
   
5. Haz clic en el icono del campo "Imagen de pestaña" en la parte inferior developers.facebook para subir tu imagen de icono personalizada.
   
   
6. Una vez subida tu imagen personalizada, salva los cambios realizados tanto en developers.facebook como en static HTML pulsando en los botones "Guardar cambios / Save" respectivamente. En static HTML te pedirá, después de guardar, que pulses sobre "Active custom icon" para finalizar la configuración del icono.
   

Si te diriges a tu página de empresa de facebook y bajas hasta la sección aplicaciones ¡Sorpresa! Ya tienes tu icono personalizado... pero como ves ahora esta duplicado :( No pasa nada, esto sí que es muy sencillo resolver ;)

Para saber Cómo eliminar una aplicación de página de empresa en el nuevo diseño de facebook visita nuestro post ¡Pero no olvides comentarnos qué tal te ha ido! ¿Te fue complicado o no es para tanto? Deja un comentario para próximos compañeros que consulten este post, piensa en qué te gustaría que te aconsejasen
¡Y Mil Gracias por llegar hasta aquí! :) ¡Hasta otra!