Página de bienvenida en Facebook usando Pagemodo

Cómo crear una página de bienvenida en tu Facebook

Podemos añadir paginas/pestañas en nuestro sitio de Facebook. Son las denominadas Page tab. Algunas vienen predefinidas como las fotos y los eventos, otras se elaboran a través de aplicaciones o se pueden tunear conociendo el código.

En esta ocasión vamos a tratar cómo añadir una página/pestaña de bienvenida usando una aplicación o servicio que te permite  hacer esto de forma gratuita. Este servicio se llama Pagemodo.

Uno de los inconvenientes de Pagemodo es que en cuanto te sales de lo más simple y eliges alguna opción, te manda a tramitar el pago sin avisar. Yo no tengo nada en contra del pago por las aplicaciones, pero no es de recibo la cantidad de inconvenientes y pérdidas de tiempo que encuentras si quieres aprovechar las prestaciones gratuitas que ofrece Pagemodo.

Este post servirá para que evites los tropezones que tuve que darme en el proceso de crear una página de bienvenida en tu espacio de Facebook:

Entrar en Pagemodo

Te vas a http://www.pagemodo.com/es. Después de iniciar sesión/conectar con tu cuenta de Facebook, escoger la opción ‘Pestañas personalizadas’

Crea una página de Facebook con Pagemode
Crea una página de Facebook con Pagemode
pagemodo
la plantilla ‘Simplicidad’

Hemos elegido la opción más simple: la plantilla ‘Simplicidad’:

Haciendo click sobre la imagen de la plantilla se selecciona y el abanico de posibilidades es mínimo, no hay margen de error. Puedes cambiar el texto y los colores, luego sigues los pasos y de una forma muy sencilla podrás publicar tu página en Facebook.

Puedes cambiar el texto y los colores, luego sigues los pasos y de una forma muy sencilla podrás publicar tu página en Facebook.
Puedes cambiar el texto y los colores, luego sigues los pasos y de una forma muy sencilla podrás publicar tu página en Facebook.

Complicando un poco más las cosas: jugando con código

Una vez elegida y configurada la plantilla podemos ir más allá utilizando la posibilidad que nos ofrece de editar el código HTML del contenido de la plantilla. Para ello hay que dar con el ratón en el iconillo que se indica en la imagen:

Para editar el código HTML del contenido de la plantilla hay que dar con el ratón en el iconillo que se indica
Para editar el código HTML del contenido de la plantilla hay que dar con el ratón en el iconillo que se indica

Aquí podemos jugar con el código para meter algún efecto extra. Pero nosotros seremos prudentes y vamos a ir a lo seguro. Para ello escogeremos los códigos que el propio Facebook nos ofrece en sus páginas para desarrolladores. En concreto vamos a insertar por la cara una Like Box, esto es, una cajita de Me Gusta, con sus imágenes de seguidores y todo eso. Una cosa  exáctamente como esto:

Aquí se puede crear una 'Like Box'
Aquí se puede crear una ‘Like Box’

El enlace para acceder a este tipo de cajita es este: https://developers.facebook.com/docs/plugins/like-box-for-pages/

La configuración de tamaño, etc. de la caja es fácil, a pesar de que la página está en inglés. Nosotros hemos elegido, después de un buen rato probando posibilidades esta. Y el código que elegimos para insertar es el tipo IFRAME. No le des más vueltas. Ya hemos perdido el tiempo probando 😛

Hay que elegir el código tipo IFRAME.  No lo dudes...
Hay que elegir el código tipo IFRAME.
No lo dudes…
Este es el código completo que hemos insertado en el editor de nuestra pestaña personalizada en Pagemodo:
EL código del contenido de la pestaña creada en Pagemodo
EL código del contenido de la pestaña creada en Pagemodo

 

Y el resultado está en nuestro perfil de Facebook ¿Habrá salido bien?…. :/  Somos muy quisquillosos….
La caja es transparente... No nos gusta así. ¿Qué hacemos ahora?
La caja es transparente… No nos gusta así. ¿Qué hacemos ahora?

Estaría mucho más visible la caja si no fuera tranparente…. Nos gustaría blanca… No te preocupes, ya nos hemos partido la cabeza por ti y lo hemos solucionado. Hay que modificar un poco el código, simplente añadiendo en el código la especificación del color. Esto se hace en el apartado style=””.  Añadimos la opción de color blanco en el fondo de la caja con esto:  background-color: white;. El código finalmente queda así (resaltado el cambio):

El código del contenido de la pestaña creada en Pagemodo (Modificado)
El código del contenido de la pestaña creada en Pagemodo (Modificado)

 

¡Ahora si! Por fin tenemos la caja en blanco como queríamos, como puede comprobarse en la página de Facebook de la Delegación de Cultura del Ayuntamiento de Córdoba. Unas cuantas horas de trabajo que plasmamos aquí para que tú no las pierdas ;).
 
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s