Cómo instalar Instant Articles en WordPress

Si tienes un sitio web en WordPress y quieres usar la nueva funcionalidad de Facebook, este tutorial te servirá.

A medidados del mes de Abril, Facebook abrió el formato de Instant Articles para todos tipo de editores. Lo que permite a los lectores y usuarios de Facebook ver una versión más rápida de los contenidos, medir visitas y en casos, agregar publicidad. Anteriormente solo había sido exclusivo para ciertos tipos de editores, pero ahora está disponible para todo el mundo.

La ventaja de utilizar los Instant Articles radica en el aporte en la experiencia de usuario con los contenidos, mejorando la lectura en los móviles y la velocidad de visualización de contenidos, que aumenta 10 veces con respecto a un sitio web normal.

Otra ventaja es la integración de monetarización de contenidos a través de Facebook Audience Network, una forma de extender las campañas de Facebook a las aplicaciones móviles. Cuenta con 3 formatos de entrega de contenidos: Banner, Intersitial y Nativo.

Por otra parte, existen desventajas relacionadas a los límites de imágenes y videos que puede tener un artículo, así como otras limitantes en la cantidad de avisos que puede tener un artículo.

Los sidebars de los sitios pierden sentido en los Instant Articles, y ciertos plugins podrían no funcionar al no ser compatibles con el formato que Facebook exige.

En resumen, si eres un editor de contenidos como un blog de noticias, sito de videos o media en general, Instant articles te conviene. Aunque debes si consideras las ventajas y desventajas. Pero si no buscas viralizar contenidos, Instant Articles no te hará ninguna diferencia.

¿Cómo funciona Instant Articles?

El funcionamiento de Instant Articles ocurre en 3 pasos simples de comprender:

  1. El primer paso es crear un artículo en nuestro sistema de gestión de contenidos, en este tutorial ejemplificaremos con WordPress. Luego de escribirlo, lo publicamos.
  2. Posteriormente a la publicación del artículo y con la ayuda del plugin que Facebook provee, nuestro artículo estará disponible a través de una url de feeds parecida al RSS, que será compatible con Instant Articles. Este RSS es informado a Facebook que lo consumirá para su posterior validación.
  3. En el momento en que Facebook decida obtener tus contenidos, los validará según las reglas definidas para crear un Instant Article. Y cuando este proceso ocurra y Facebook determine que el contenido es compatible, estaremos publicando en Instant Articles.

Este proceso lo explico de forma simple en el siguiente diagrama:

como_funciona_instant_articles_v3

¿Cómo hacer funcionar Instant Articles en mi sitio?

Ahora que entendemos a grandes rasgos el funcionamiento de publicación de Instant Articles entraremos de lleno en el tutorial. Para comenzar debemos tener los siguiente :

  1. Una Página de Facebook para tu sitio
  2. Un blog o sitio con 10 artículos como mínimo

Si no tienes una página de Facebook para tu sitio, puedes crerla en el siguiente link : https://www.facebook.com/pages/create.php

Inscríbete en Instant Articles para comenzar

Considerando lo anterior, comenzaremos registrándonos en Facebook Instant Articles en el siguiente link : https://instantarticles.fb.com.

Presionamos Sign Up y llegaremos a la selección de la página. Acá debemos seleccionar la página en la que queremos activar Instant Articles.

fb_instant_articles_1_

Luego de presionar “Accede a las herramientas de artículos instantáneos” aparecerá el siguiente mensaje, lo que nos permitirá continuar con la activación.

fb_instant_articles_3

Este paso nos habilitará la función Artículos Instáneos en la sección de Herramientas de publicación de nuestra página. A primera vista veremos que debemos completar 3 pasos para completar la configuración inicial.

Paso 1: Configurar los artículos instantáneos

Reclama tu URL

fb_instant_articles_2_

En este punto nos recomiendan agregar a nuestro equipo de diseño para que nos ayude con los estilos de los artículos. También nos recomiendan descargar el Administrador de Páginas para hacer una revisión previa de los Instant Articles.

Pero lo que debemos hacer ahora es “Reclamar tu URL“, es decir, indicarle a Facebook que el sitio o blog de donde obtendrá los contenidos te pertenece. ¿Cómo lo hacemos? Agregando un “meta” en el header de nuestro sitio.

Este meta lo podemos obtener presionando el botón “Reclama tu URL

fb_instant_articles_paso1-meta

Este meta tag puede ser agregado de dos formas. La más simple y menos invasiva es editando nuestro archivo header.php del theme.

Este meta debe agregarse dentro del tag head y antes del  tag body. La unica desventaja es que si cambias de theme, tendrás que volver a agregarla.

fb_instant_articles_paso1-meta2

La otra opción es usando este plugin, que permite agregar headers y footers sin intervenir el theme activo.

Luego de haber agregado este header a nuestro sitio, podremos volver a presionar “Reclamar URL” indicando la url de nuestro sitio.

fb_instant_articles_paso1-meta3

Agrega tu Logo en el estilo por defecto

Luego de haber reclamado nuestra URL configuraremos los estilos en la sección “Estilos“.

fb_instant_articles_paso1-estilo

Acá seleccionaremos nuestro estilo default lo que nos llevará a la pantalla de configuración de estilos de los Instant Articles. En esta sección solo agregaremos el logo que va en sobre el título; pero si quieren configurar otras cosas como el color o las tipografías, pueden intentarlo.

fb_instant_articles_paso1-logo

Agrega la fuente de RSS

Continuaremos configurando nuestra página agregando la “Fuente RSS de producción”. Revisen el diagrama y veremos que es lo que necesario para conectar nuestros contenidos con Facebook.

Para lograr lo anterior debemos instalar el plugin Instant Articles for WP. Luego de instalarlo y activarlo tendremos disponible la url /feed/instant-articles, que es la que configuraremos en Facebook.

fb_instant_articles_paso1-rss

Creando nuestra Aplicación en Facebook

Antes de configurar nuestro plugin debemos crear una aplicación en Facebook relacionada con nuestra página de Facebook. Para esto iremos al sitio de Desarrolladores de Facebook para registrar nuestra aplicación : https://developers.facebook.com/apps/. Acá presionaremos el gran botón verde que dice “+ Agregar una nueva aplicación”.

fb_instant_articles_paso1-fbapp1

El siguiente paso es seleccionar Sitio Web como plataforma.

fb_instant_articles_paso1-fbapp2

Lo siguiente es definir el nombre de nuestra aplicación y presionar “Create new Facebook App ID”

fb_instant_articles_paso1-fbapp3

Este paso nos llevará a la configuración final de la creación de la Aplicación, donde debes indicar el email de contacto y la categoría correspondiente.

fb_instant_articles_paso1-fbapp4

Es importante seleccionar la categoría “Aplicaciones para páginas“.

Luego de presionar “Crear identificador de la aplicación” y de validar que no somos un robot, llegaremos al Quick Start.

Iremos a la sección “Tell us about your website” para agregar la URL de nuestro sitio.

fb_instant_articles_paso1-fbapp5

Luego de presionar “Next“, haremos scroll hacia al comienzo del sitio y presionaremos “Skip Quick Start“.

fb_instant_articles_paso1-fbapp6

Esto nos llevará directamente a la configuración de la aplicación que es de donde obtendremos el “Identificador de la aplicación” o “APP ID” y nuestra “Clave secreta de la aplicación” o “App Secret”.

fb_instant_articles_paso1-fbapp7

El siguiente paso es activar publicamente nuestra aplicación en el menú “Revisión de la aplicación”.

fb_instant_articles_paso1-fbapp8

Presionamos el botón “No” para que se active y confirmamos en el popup siguiente.

fb_instant_articles_paso1-fbapp9

Configura el Plugin de Instant Articles para WordPress

Después de que la activación del plugin de Instant Articles veremos que se nos habilitará la siguiente pantalla en el menú lateral.

fb_instant_articles_paso1-app

Acá debemos agregar la configuración de nuestra aplicación de página.

fb_instant_articles_paso1-app2

Presionamos “Siguiente” y veremos que podemos autenticarnos con Facebook.

fb_instant_articles_paso1-app3

Presionamos el botón de Login y nos mostrará la lista de páginas que podemos seleccionar.

fb_instant_articles_paso1-app4

Seleccionamos la de nuestro sitio y presionamos Next. Esto nos dejará el plugin finalmente configurado para comenzar a publicar artículos.

fb_instant_articles_paso1-app5

Paso 2: Configurar los artículos instantáneos

Antes de que puedas comenzar con la publicación de tus artículos instantáneos debes pasar por una revisión. Debes tener al menos 10 artículos publicados en tu WordPress para poder enviarlos a revisión.

Para verificar si tienes 10 artículos, puedes ir al menú “Artículos de publicación” en tu página de Facebook.

fb_instant_articles_paso2-prod

En esta vista deben haber al menos 10 artículos. La lista se actualizará cada 1 hora ya que Facebook estará consultando tu RSS de producción configurado anteriormente.

Cuando los 10 artículos existan podemos presionar “Enviar solicitud de revisión“.

fb_instant_articles_paso2-sent

Según Facebook, la revisión se demora de tres a cinco días laborales. Yo aún estoy esperando la revisión.

Luego de que esta aprobación se realice, comenzaremos a ver el ícono de Instant article en nuestros artículos publicados en la página de nuestro sitio.

Paso 3: Empezar a publicar

El paso 3 es lo más simple. Sólo debes comenzar a crear artículos en tu sitio y estos automáticamente serán enviados a tus artículos instantáneos en la página de Facebook. Lo importante que debemos saber es que cada artículo debe estar correctamente formateado para ser publicado.

¿Cómo detecto si mis artículos están siendo correctamente formateados para ser Instant Articles?

Cuando editamos o creamos un artículo, veremos lo siguiente en la parte inferior del post si es que todo sale bien:

fb_instant_articles_paso3-publish

En caso de que no salga bien, lo más probable es que nuestro artículo no sea publicado.

¿Cómo valido si mi artículo está siendo bien formateado?

Existirán casos en que el post no esté bien formateado y esto generará un problema con Facebook. El plugin que instalamos nos entregará información de este tipo.

fb_instant_articles_paso3-trouble

En este caso, mi problema era que tenía un tag img dentro de un tag h2, algo no estándar en HTML. Lo que hice fue editar esa línea dentro del post y quité el h2 quedando compatible con la publicación.

¿Qué hago si no puedo resolver estos errores?

Si hay errores que no puedan resolver, lo más seguro es que deban crear reglas especiales para los posts. Estas reglas se deben definir dentro de la configuración del plugin, en la opción “Custom transformer rules”.

fb_instant_articles_paso3-rules

Estas reglas buscan convertir ciertos tags no conocidos o clases no estándares a un estándar que Instant Articles pueda reconocer. Pero este tema es tan amplio como este post, así que se los traeré en otro artículo muy pronto.

Conclusiones

Instant Articles es una función muy útil y sin duda marcará un antes y un después en la distribución de contenidos. Su configuración no es tan compleja como parece pero debemos entender claramente como funciona.

El uso de plugins dentro de un sitio con WordPress, puede afectar el formato estándar de un sitio y por consecuencia, dificultar la compatibilidad de un artículo con el formato que exige Instant Articles.

Es importante entender el funcionamiento pero nada es más importante que intentar llegar a un estándar de estructura HTML para que nuestros contenidos sean compatibles con más sistemas parecidos a Instant Articles.

Espero que les haya gustado el tutorial, y si es así comenten acá abajo, compártanlo y hágan like en mi página de Facebook.

¡Nos leemos en el siguiente tutorial!

Blog, Destacado, Tutorial
7 minutos
  • Alexander Bracho

    Hola, genial tutorial, pero tengo un problema, llego hasta solo el punto de poder logearme en el plugin de Instant Articles en wordpress. Y ahí fcebook me arroja este error: No se puede cargar la URL: The domain of this URL isn’t included in the app’s domains. To be able to load this URL, add all domains and subdomains of your app to the App Domains field in your app settings.

    La verdad no sé que hacer. Ojalá me pudieras orientar. Muy útil la info y gracias por tu tiempo.

    • alvaroveliz

      Hola, Alexander.
      Esto pasa cuando no el sitio web no está configurado correctamente en tu aplicación.
      Ingresa a https://developers.facebook.com/ y asegúrate que la APP de Facebook tiene la plataforma “Sitio Web” con tu sitio configurado. (Revisa los pantallazos)

      Saludos y gracias por tu comentario!

  • sabes que agrege el codigo al header pero me sigue recamando “La etiqueta fb:pages en la URL no contiene el identificador de esta página. La URL tiene una etiqueta fb:pages, pero no tiene el identificador de esta página. Trabaja con los desarrolladores o el webmaster para agregar esta etiqueta a tu sitio web” , sabes de este error.

    • alvaroveliz

      Revisé el sitio detrasdecamara.net y sí cuenta con el `fb:pages`, intenta nuevamente reclamar tu URL porque puede ser el caso que Facebook no lea correctamente todo el sitio, por temas de caché.

  • Christian Oviedo Gabarda

    Gracias Feliz!! Vamos a probarlo en Mirada Diaria 😀

  • Daniel MC

    Hola Alvaro, tengo un problema ya que no me muestra el botón de “Login with facebook”, que puede ser?

    Gracias!

    • Hola, Daniel.
      Revisa si las URL en la App de Facebook que creaste y en la configuración de Instant articles corresponde al dominio donde está instalado tun sitio.

      • Daniel MC

        Que raro, lo tengo de esa forma con la url correcta pero no me aparece ese botón, probe creando otra app pero sigue igual.

        • Y el usuario que utilizaste para crear la App tiene acceso a la página? Asegúrate de que estas logeado en FB con el mismo usuario o que al menos eres admin en la página de Facebook.

  • Jaime Solís

    Álvaro, una consulta, conecte una app por error, como aparece en la captura, no se como desconectarla para utilizar la que corresponde.

    Gracias por el tutorial.
    Saludos!

  • gonzalo soto

    Hola! antes que nada gracias por el articulo….estoy atorado en esta parte del articulo “Iremos a la sección “Tell us about your website” para agregar la URL de nuestro sitio.
    ” no me apareció ese cuadro y estoy intentando agregar la url desde “configuración” – “Información básica” hay una parte que se llama dominios de aplicaciones y allí pongo el dominio pero me carca error y no se si allí vaya mi dirección….si me pudieras ayudar te lo agradecería.