Una App para Facebook Static HTML: Iframes Tabs Laboratorio de Excelencia Digital Facebook Marketing 1
Una App para Facebook. Static HTML: Iframes Tabs Facebook Marketing El objetivo de este articulo es el de crear una página en Facebook que tenga dos opciones; una para personas inscritas y otra para los que aun no son miembros. Para ello se seguiran una serie de pasos descritos a continuación. Paso 1 Lo primero que se debe hacer es acceder a la página de Facebook donde se indica el tipo de app que se requiere para conseguir nuestro objetivo. Simplemente introducimos esta url en el navegador y aparecerá el botón ir a la aplicación. Imagen 1: Cómo acceder a Static HTML: Iframe tabs Tras apretar en el botón ir a la aplicación, nos aparecerá una segunda pantalla donde Facebook nos pregunta si deseamos añadir Static HTML: inframe a nuestra página de Facebook y nos explica que, permitir esta acción supone que la app pueda acceder a los contenidos de tu página. 2
Simplemente debemos seleccionar la opción añade Static HTML: Iframe tabs y ya tendremos instalado el app en nuestra página de Facebook. Una vez hayamos añadido la app, esta aparecerá en la página, bajo nuestra imagen. Imagen 2: Instalar Static HTML: Iframe tabs Paso 2 En estos momentos ya tenemos instalada la app en nuestra página de Facebook, y lo que debemos hacer ahora es configurarla. Para ello debemos acceder a la opción editar información desde nuestro muro; una vez dentro de la edición, buscamos la opción aplicaciones y seleccionamos Static HTML: Iframe tabs. Paso 1: Editar Información! Paso 3: Static HTML: Iframe tabs Paso 2: Aplicaciones 3
Una vez hemos llegado hasta la aplicación, sólo debemos hacer clic en la opción editar configuración y nos aparecerá una nueva ventana; en esta nueva ventana debemos escribir el nombre que queremos que tenga la pestaña en nuestra página y hacer clic en aceptar. Imagen 4: Editar la Configuración de Static HTML: Iframe tabs Cuando hayamos hecho clic en aceptar, volvemos al muro de nuestra página y podremos comprobar que el mensaje inicial se ha substituido por el que nosotros hemos añadido; para este ejemplo, hemos escrito la palabra Bienvenidos. Imagen 5: El antes y el después 4
Paso 3 El siguiente paso es crear una imagen para los miembros y otra para los no miembros; esto nos permitirá mostrar contenidos diferentes a los fans de nuestra página que a los que aun no lo son. Es imprescindible tener presente que, para poder crear nuestras imágenes, el primer requisito necesario es tener un dominio web donde poder almacernarlas y posteriormente obtener el código HTML que necesitamos. Por lo tanto, si no dispones de un dominio web, una buena opción es crearse una cuenta en Wordpress de forma gratuita o pagando, según tus preferencias y/o necesidades. Puedes encontrar la forma de obtener tu propio dominio web haciendo clic aquí y siguiendo los sencillos pasos de registro que se indican en la web: Imagen 6: Nuevo usuario en Wordpress Si ya dispones de un dominio web o si acabas de crear uno nuevo, ahora ya tienes un lugar donde subir tus imágenes. Por lo tanto, deberemos proceder a la creación de la imagen de miembros y la de no miembros. Para ello, antes debemos saber qué imagenes queremos utilizar. Si lo tenemos claro podemos saltar al siguiente paso (Paso 4), pero si no lo sabemos, podemos utilizar un programa llamado Snagit. 5
Para descargar este programa también disponemos de dos alternativas; podemos obtene el Snagit v10, que es de pago; o podemos optar por el Snagit v9, que es gratuito. En todo caso, haciendo clic aquí accederás a la versión gratuita a partir de la cual podrás crear tus imágenes para Facebook. Imagen 7: Descargar Snagit Ahora que ya disponemos tanto de un dominio web como de un programa para crear las imágenes que necesitamos, lo único que nos queda hacer para terminar este paso es buscar y seleccionar las imágenes que queremos. Para ello, en Google encontraremos montones de colecciones gratuitas que nos servirán para este cometido. Una buena página donde se encuentran colecciones bastante estructuradas y variadas es Gograph; puedes acceder a ella haciendo clic aquí. Imagen 8: Colección de imágenes en Gograph 6
Una vez hayamos seleccionado las imágenes que deseamos editar, podemos descargarlas a nuestro ordenador y abrirlas con el programa Snagit para crear tanto la imagen de miembros como la de no miembros (consultar tutorial recomendado sobre programa Snagit). Paso 4 Este último paso consiste en la preparación de dos códigos html distintos: uno para miembros y otro para no miembros. Puesto que hemos vuelto al muro de la página, hemos de hacer clic en la pestaña que acabamos de crear; en este ejemplo, hemos creado la palabra Bienvenidos, por lo que será ahí donde debemos hacer clic. Imagen 9: Acceder a la app Static HTML: Iframe tabs Una vez hayamos hecho clic en Bienvenidos nos aparecerá una nueva ventana, y será en esta donde deberemos añadir los códigos html: uno en la casilla Ingrese aquí su contenido para no fans y el otro en la casilla Contenido para fans. 7
Imagen 10: Añadir el código html Para introducir los códigos se debe seguir una fórmula muy sencilla pero que debemos hacer muy bien para que funcione. IMPORTANTE: estos códigos deben modificarse antes de ser pegados en sus casillas correspondientes de la siguiente forma: Substituir www.direcciónweb.com por la web donde queremos que aparezca la imagen. Para ello, necesitamos acceder al dominio web donde hemos subido las imágenes creadas en el paso anterior. Un ejemplo de cómo quedaría este código es el siguiente: Miembros: <a href="http://tudireccionweb.com/";><imgsrc="http://tudireccionweb.com/ imagen-miembros";/></a> No Miembros: <img src="http://direccionweb.com/imagen-no-miembros.png";/> Para colocar los códigos sus casillas correspondientes, será imprescindible que no se realice la acción copiar pegar, sino que se escriba manualmente. Si no lo hacemos de esta forma, el código puede no funcionar. Tras copiar los códigos html en cada una de las casillas, habremos conseguido el objetivo que buscamos: que los miembros vean un contenido y los no miembros otro distinto. Un ejemplo de cómo quedaría es el siguiente: 8
Imagen 11: Lo que se muestra a los no miembros Imagen 12: Lo que se muestra a los miembros 9
Tutoriales recomendados: Snagit 9: Vídeo en Inglés sobre cómo utilizar este programa Vídeo en castellano sobre cómo utilizar este programa Wordpress: Vídeo en castellano sobre cómo subir una imágen a nuestra web Vídeo en castellano sobre cómo crear una cuenta en Wordpress 10