Talleres de Arte

Aquí vamos a descubrir como podemos personalizar nuestra pagina de fans en Facebook. Este es un documento abierto a aportaciones, correcciones,  recursos, etc.
Cuando visitas una pagina de fans (que aun no has añadido a tu biografía pulsando el Me Gusta) entras por defecto en el muro de esa pagina pero como creadores de la pagina podremos hacer que cuando alguien entre lo haga en una  pagina/pestaña  especifica de presentación que podemos crear nosotr@s: Una pagina de aterrizaje donde pondremos la información que consideremos importante para presentar nuestro taller a los visitantes.

Para crear y personalizar esa pagina de aterrizaje estos son los pasos a seguir:

1. Estando registrados en nuestra cuenta de FB iremos a la aplicación que vamos a instalar, en este caso vamos a usar: Static HTML http://apps.facebook.com/static_html_plus/?ref=ts ypulsaremos sobre el botón que dice Add Static HTML to a Page
2. Se abrira una nueva ventana en Fb que nos preguntará donde queremos activar la aplicación y en el menu despegable escogeremos nuestra pagina del taller (que previamente habremos creado claro)
3. En la misma pantalla y una vez escogida la pagina nos aparecerá el botón de confirmación Añade Static HTML: iframe tabs. Pulsamos y con ello aceptamos la política de la aplicación
4. Automáticamente nos redirigirá a nuestra pagina y observaremos que en el menu de la izquierda (información -actividad-estadísticas -fotos…) nos aparece nuestra nueva pagina de aterrizaje:   Welcome  …vamos a ella.
5. Veremos dos cajas de texto para añadir nuestro código HTML (mas adelante hablaremos sobre el código) Uno visible para todo el mundo que visite la pagina y otro que solo verán los fans y que es opcional. en principio no vamos a trabajar en esta caja.
6. Encima de los campos veremos tres botones de uso: Magic – Preview (vista previa) – Save change (guardar cambios)
7. Botón Magic: Desde esa pestaña  podremos escoger que no halla barras de desplazamiento No scrollbars  / Si al generar el código tenemos comillas dobles (“) nos la cambie a comilla recta ( ‘) Fix curly quotes /y por ultimo si en el código hemos insertado fragmentos en FBML nos lo interpretará.   FBML mode  – FBML es código HTML especifico para Facebook, es util por ejemplo para insertar vídeos.  por ultimo, si preferimos usar las estadísticas de Google analytics porque nos parecen mas fiables que  las de FB podemos insertar nuestro numero de seguimiento que obtendremos en nuestra cuenta de Google analytics.
8. Desde esa misma pantalla y dentro de Magic podremos personalizar nuestro icono de entrada ..la   Costum icon. Para ello tendremos que crear una aplicación, es sencillo:

• Primero tendremos que autorizar a Static HTML  a acceder a nuestro datos. Una vez activa hacemos click  en el primer Step en el enlace que dice: click here to open it in a new window lo que nos llevará a otra a nuestras aplicaciones creadas.
• En la parte superior pulsamos sobre el botón   +Create new app
• Se nos abrirá una ventana flotante con dos campos para nombrar la aplicación, solo es necesario rellenar el primero: App DisplayName por ejemplo podemos llamarla Pagina de inicio, el campo AppNamespace lo dejamos en blanco.
•  Aceptamos la política de FB, validamos el código captcha (descifrar las letras deformadas )
• Nos dirigen a la pagina de nuestra nueva aplicación.  
• En la parte superior buscaremos los números del App ID y el App Secret (números y letras) . Los copiaremos  (Ctrol+C) y regresaremos a nuestro pagina de aterrizaje de FB para pegarlos (Ctrol+V) en los campos para el efecto del Step 3.
• Veremos debajo dos códigos para pegar en nuestra aplicación Pagina de inicio: Page Tab URL y Secure Page Tab URL algo como esto: http://custom.statichtmlapp.com/tab/1720173/custom. Volvemos y al pie de pagina y buscamos el campo que dice
  Pestaña de la página, lo abrimos y pegamos los códigos (URL de pestaña de la página=Page Tab URL y URL segura de pestaña de la página=Secure Page Tab URL . Veréis que es la misma, solo cambia de http a https)
• En la parte superior, donde hemos copiado el App ID y el App Secret. Vemos Edit Iconhacemos click y subimos la imagen desde nuestro ordenador (16x16px) o en su defecto una imagen cuadrada, la aplicación la redimensiona.
•  Guardamos los cambios.
• Volvemos a nuestra pagina de aterrizaje,  al Step 4 ,Guardamos los cambios (Saved Changes) Automáticamente salimos de la pestaña Magic y regresamos a nuestra pagina de aterrizaje en modo editor. Refrescamos la pagina (la volvemos a cargar) y en vez de la estrella deberemos ver nuestro icono.

Ya solo nos queda colocar el código HTML en la caja de edición, para probar podéis pegar el de la tabla inferior, los campos en rojo son para personalizar con tus datos:

9.  Ahora vamos a cambiar el nombre a la pestaña, no más Welcome:  Para cambiar el nombre  debemos ir a  Editar Información, en la parte superior de tu página, a la izquierda buscamos la opción           Aplicaciones, una vez allí buscamos la correspondiente a Pagina de Inicio  hacemos click sobre Editar Configuración y  cambiamos el nombre: Bienvenidos, conocernos, quienes somos…

10. Para diseñar nuestra pagina con la distribución de contenidos que deseemos lo mejor es crear una tabla, teniendo en cuenta que esta no debe ser mayor de 500px para que se visualice    correctamente.  si no teneis un editor de HTML os recomiendo usar uno online, por ejemplo el de Quackit  http://www.quackit.com/html/online-html-editor/  – En breve hablaremos de como editar nuestro código HTML desde este editor.

11. Ya con nuestra tabla personalizada, pegamos el contenido en la caja de edición de nuestra pagina de aterrizaje. Guardamos los cambios.

12. Por ultimo solo nos falta hacer que esta nueva pagina sea la de aterrizaje por defecto cuando alguien entra en nuestra pagina de fans:

• Hacemos clic en  Editar en  la parte superior de nuestra página. Seleccionamos  Administrar permisos  en la barra lateral izquierda.
• Buscamos donde pone Pestaña de inicio predeterminada y escojemos la que acabamos de crear. Guardamos los cambios

Y eso es todo…12 pasos para configurar tu pagina de presentación en Facebook