Crear pestañas personalizadas en Facebook

¿Estás listo para llevar tu Página de Facebook a todo lo que da de sí?

Facebook nos ofrece de manera predeterminada una serie de pestaña, que podemos mover arriba, o abajo dependiendo del tipo de negocio, o perfil que tengamos en nuestras páginas profesionales. Lo ideal a la hora de administrar una página de Facebook en nuestra estrategia de marketing online, es ofrecer a los usuarios que acceden a ella la experiencia más satisfactoria posible. Para ello existe la posibilidad de crear por fuera pestaña personalizadas.

Para comenzar vamos a asegurarnos que estamos en el mismo lugar, no vaya a ser que estemos hablando de cosas diferentes. Mirad nuestra Fan Page, dónde hemos señalado el lugar de las pestañas: https://www.facebook.com/Ideariomarketing/

 

 

Pasos que tenemos que seguir para poner una pestaña personalizada:

Paso 1: Crea el contenido que mostrarás en tu pestaña personalizada

Piensa en tu pestaña de Facebook como un iFrame que se carga en Facebook. Es decir lo que hayas creado por fuera será lo que Facebook como si fuera de su propia página muestre en la propia herramienta y no salga a ningún lado.

Importante: Acuérdate que el lugar que estés creando y que quieres que Facebook coja para mostrar, deberá tener un certificado de capa de conexión segura (SSL). Es decir, el famoso https, si es http Facebook directamente no lo cogerá. 

Medidas del contenido de tu página de aterrizaje, o web:

Ancho web: 520 px u 810 px y de que todas las imágenes, videos, etcétera, que incluyas en tu página, también midan menos de520 px u 810 px.

 

Facebook medidas para pestaña personalizada Ideario Marketing

Paso 2: Facebook Developer (desarrollador de Facebook). Deberás iniciar sesión aquí:

Entra en https://developers.facebook.com/apps el registro es muy sencillo, es automático.

Paso 3: Debemos crear nuestra nueva pestaña:

1) Haz clic en el botón verde de «+ Add a New App (Agregar una aplicación nueva)» en la esquina superior derecha. Luego selecciona el botón de «Website (Sitio web)» en el extremo derecho.

Facebook desarrolladores

2) En lugar de utilizar el asistente de «Quick Start (Inicio rápido)» que abre Facebook (lo cual puede ser algo confuso), haz clic en el botón de «Skip and Create App ID (Omitir y crear identificación para la aplicación)» en la parte superior derecha.

Ideario Markeitng Facebook desarrolladores

3) Aquí tendrás que proporcionar un «Display Name (Nombre para mostrar)», que es lo que mostrará tu «aplicación» o pestaña en tu Página de Facebook. También puedes crear un «Namespace (espacio de nombre)», el cual básicamente es una identificación única para tu aplicación; esto no es necesario, así que puedes dejar el espacio en blanco. Selecciona «No» a la pregunta de las versiones de prueba. Esto aplica solo si estás creando una aplicación de Facebook que quieras que otros usuarios de la plataforma puedan utilizar, no si solo estás creando una pestaña personalizada para tu página. Por último, selecciona «Apps for Pages (Aplicaciones para páginas)» como la categoría, ya que estás creando esta aplicación como una pestaña personalizada para tu Página de Facebook.

Crear App en Facebook Ideario Marketing

4) Haz clic en «Create App ID (Crear la identificación para la aplicación)»y después te dirigirán al App Dashboard (Panel de aplicaciones) para el siguiente paso. (Nota: es probable que te soliciten ingresar uncaptcha para comprobar que seas humano 😉

Paso 4: Configura la pestaña de tu Página de Facebook

1) Una vez que estés en tu App Dashboard (Panel de aplicaciones), haz clic en «Settings (Configuración)» en la parte izquierda de la pantalla de navegación; da clic en el botón «Add Platform (Agregar plataforma)»para empezar a configurar la pestaña de tu Página de Facebook.

Facebook desarrolladores

2) Cuando te lo soliciten, selecciona «Página Tab (Pestaña para página)» como tu plataforma.

Plataforma selección Facebook

3) Después agrega la «Secure Page Tab URL (URL de página segura para la pestaña)» de la página web externa que creaste en el primer paso. Recuerda que Facebook necesita una URL segura (la cual empieza con https://), de lo contrario, esto no funcionará. (Consulta el primer paso para saber más detalles). A continuación, especifica si deseas una pestaña de página ancha (810 px), la cual recomiendo para que tu contenido llene todo el ancho de la pestaña. Esta debe alinearse con el ancho de la página que configuraste en primer paso. Puedes dejar el espacio de «Page Tab Edit URL (Editar URL de la pestaña de la página)»en blanco. También puedes cargar aquí la «Page Tab Image (Imagen de la pestaña de la página)», la cual debe ser de 111 x 74 píxeles), aunque, para ser sincero, no estoy seguro de qué forma Facebook usa esta imagen, debido a que ya no utilizan miniaturas en la navegación de las pestaña de tu Página de Facebook.

Página detalles

4) Cuando termines de editar del contenido de esta sección, haz clic en el botón azul «Save changes (Guardar cambios)» en la parte inferior derecha.

Paso 5: Agrega tu nueva pestaña personalizada a tu Página de Facebook

Este paso puede ser un poco complicado, así que lee cuidadosamente. Para agregar tu nueva pestaña a tu Página de empresa, necesitarás visitar un enlace con varios parámetros de URL personalizados. Sé que suena raro, pero ten un poco de paciencia. Aquí está el enlace que tendrás que modificar:

http://www.facebook.com/dialog/pagetab?app_id=TU_APP_ID&next=TU_URL

1) Primero reemplaza las partes en rojo en la URL de arriba — TU_APP_ID TU_URL — con la «App ID (Identificación para la aplicación)» que se encuentra en la configuración básica de tu aplicación y tu «Secure Page Tab URL (URL de página segura para la pestaña».

Crear URL

Así que con nuestro ejemplo, mi nueva URL sería:

http://www.facebook.com/dialog/pagetab?app_id=1546958298917818&next=https://www.hubspot.com/custom-facebook-tab

2) Una vez que tengas tu URL, ábrela con tu navegador. Al hacerlo, aparecerá esto:

add-page-tab

3) Por último, pero no por eso menos importante, selecciona la Página de Facebook a la que deseas agregar tu pestaña. Después haz clic en «Add Page Tab (Agregar pestaña de página)». Ten en cuenta que podrías necesitar ser el administrador de la Página de Facebook para agregar la pestaña.

Voilà! Tu pestaña de Facebook personalizada debería aparecer en tu página. ¡Ve a verla!

Nota del editor: escuchamos que a algunas personas les aparecen errores de 403 y 405 de «Forbidden» en sus pestañas una vez que ya las han configurado. Cuando un usuario de Facebook hace clic en tu pestaña personalizada, su explorador envía una solicitud HTTP POST a tu URL de página segura para la pestaña. Ellos verán este mensaje de error si la página que estás usando para alojar el contenido de tu pestaña de Facebook prohíbe las solicitudes HTTP POST. Si ves estos errores, lo mejor que puedes hacer es trabajar con un desarrollador experto para que te ayude a configurar tu pestaña de Facebook personalizada.

Paso 6 (Opcional): Reorganiza tus pestañas de Facebook

Ya que Facebook solo te permite mostrar una serie de pestañas antes de que el resto se enmarquen en el menú desplegable «Más», también puedes reorganizar el orden de tus pestañas para que tu nueva pestaña personalizada resalte más en la navegación principal de tu página en lugar de que se quede en el menú desplegable de «Más». Para reorganizar las pestañas, haz clic en «Manage Tabs (Administrar pestañas)» en el menú desplegable de «Más» en tu Página de Facebook y después arrastra y suelta las pestañas en el orden que desees que aparezcan. Solo ten en cuenta que es un requisito que la «Biografía» y la «Información» aparezcan primero.

 

Nos gustaría para terminar dar las gracias a HubSpot por la información que proporciona, ya que la hemos usado para dar forma a este post en el blog de Ideario Marketing. 

Badajoz, Cáceres, Sevilla, Cádiz, Málaga, Huelva, Barcelona, Madrid.