Cómo Publicar Contenido Con Artículos Instantáneos de Facebook

Spanish (Español) translation by Rafael Chavarría (you can also view the original English article)

El desempeño importa, y los grandes jugadores en la web están abordando el rendimiento en sus propias maneras. La respuesta de Google viene en la forma de su controversial AMP; un formato de publicación el cuál ofrece una suave experiencia para sus resultados de búsqueda móvil. Google incluso posiciona listados que implementa AMP más favorablemente.

Facebook, de manera similar, ha divisado su propia iniciativa con Artículos Instantáneos permitiéndole servir contenido web compartido en su aplicación móvil de manera instantánea con una experiencia móvil nativa. El contenido que ha sido validado como siendo un Artículo Instantáneo será marcado con el emblema de rayo cuando es compartido en cualquier lugar en las noticias de Facebook.

En este tutorial aprenderemos qué es "Artículos Instantáneos" y cómo puedes portar tu propio contenido a esta rápida herramienta de publicación. ¡Vayamos!

1. Registro

Primero, necesitarás tener acceso de administrador o editor a una Página de Facebook publicada.

Al momento de su concepción, Artículos Instantáneos solo estaba disponible para publicistas de gran o mediano tamaño cuya Página de Facebook tuviera al menos cien mil seguidores, o likes, con una audiencia activa; ¡no me pregunto por qué mis páginas no eran elegibles para registrarse para Artículos Instantáneos en ese entonces! Hoy en día, Facebook ha abierto Artículos Instantáneos a todos los publicistas de todos tamaños, solo necesitas registrarte.

Después, selecciona la página.

2. Verifica Tu Sitio Web

Necesitarás verificar que posees el sitio web en cuestión agregando la etiqueta meta fb:pages dentro del head. No olvides agregar la URL y presionar Reclamar URL para finalizar la verificación. Puedes verificar múltiples URLs en caso de que tu sitio comprenda un número de canales o subdominios, como Medium y Tuts+ (webdesign.tutsplus.com, code.tutsplus.com, etc.).

Ingresa detalles y presiona "Reclamar URL"

3. Formatea el Marcado

Antes de que puedas publicar Artículos Instantáneos de manera regular, necesitarás enviar al menos cinco artículos para revisión. Estos artículos deberían usar formato de Artículo Instantáneo, por ejemplo:

<!doctype html>
<html lang="en" prefix="op: http://media.facebook.com/op#">
<head>
    <meta charset="utf-8">
    <link rel="canonical" href="http://acme.com/instant-article-origin">
    <meta property="op:markup_version" content="v1.0">
    <meta property="fb:article_style" content="acme-style"/>
</head>
<body>
    <article>
    <header>
        <h1>Title</h1>
        <h2>Subtitle</h2>

        <time class="op-published" datetime="2014-11-11T04:44:16Z">November 11th, 4:44 PM</time>
        <time class="op-modified" datetime="2014-12-11T04:44:16Z">December 11th, 4:44 PM</time>

        <address>
            <a rel="facebook" href="http://www.facebook.com/zuck">Zuck</a>
            Zuck is the CEO of Facebook.
        </address>

        <figure>
            <img src="http://via.placeholder.com/350x150" />
            <figcaption>Cool cover header</figcaption>
        </figure>
        
        <h3 class="op-kicker">Web Design</h3>
    </header>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque doloribus quia quasi soluta atque veniam harum! Voluptatum facilis placeat soluta molestias, dolore quasi quos pariatur minus corporis, consequatur amet facere.</p> 

    <figure data-mode="fullscreen">
        <img src="http://via.placeholder.com/350x150" />
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p>

    <figure data-feedback="fb:likes, fb:comments">
        <img src="http://via.placeholder.com/350x150" />
        <figcaption class="op-vertical-center">
            <h1>Image Caption</h1>
        </figcaption>
    </figure>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex quam maxime voluptas nostrum omnis eaque vero eius perspiciatis aliquam hic fugiat nobis debitis asperiores facilis ullam, nulla voluptatum animi. Quo!</p>
    </article>
</body>
</html>

Como puedes ver arriba, el formato de Artículos Instantáneos es una estructura semántica HTML plana con clases especiales y atributos. La imagen, por ejemplo, tiene el atributo data-mode establecido a fullscreen el cuál generará la imagen a pantalla completa. En la otra imagen, tenemos un atributo data-feedback establecido que permitirá a nuestros usuarios darle un "Like" y adjuntar comentarios directamente a la imagen.

Un par de etiquetas meta personalizadas también son agregadas dentro de la etiqueta head tal como la etiqueta fb:article_style la cuál define los estilos de contenido. En adición, la etiqueta meta canonical debería apuntar al artículo original; un factor que lleva a muchos publicistas a preferir los Artículos Instantáneos de Facebook sobre Google AMP. Google AMP es mucho más críptico sobre la ubicación de trabajo original.

4. Envía Tu Contenido

Una vez que lo tienes listo, envía el contenido a Facebook

Hay dos maneras de enviar tu contenido. Primeramente, puedes publicarlo directamente a través de tu cuenta de Facebook. Dentro de la pantalla Herramientas de Publicación, deberías encontrar el botón + Crear que te llevará al formulario para publicar el código HTML.

La segunda aproximación involucra proporcionar una URL de Noticias que contenga el contenido. Esta aproximación podría llevar un tiempo para configurar dependiendo de la plataforma en la que está construido tu sitio web. Afortunadamente, un complemento está disponible para plataformas populares tales como WordPress y Drupal que hace un poco más sencillo transformar tu contenido a un formato adecuado XML.

Sin embargo, enviar el contenido manualmente es la manera más rápida de publicar tu contenido como un Artículo Instantáneo, especialmente durante estas etapas tempranas.

5. Previsualiza el Artículo

Para previsualizar el contenido que has enviado, necesitarás instalar la aplicación móvil Administrador de Página Facebook. Artículos Instantáneos es accesible en el menú de Ajustes en la Barra de Herramientas de la página.

6. Personaliza los Estilos de Contenido

Estilizar Artículos Instantáneos es bastante sencillo, aunque también restrictivo. Facebook proporciona una interfaz para cambiar algunos componentes del artículo tales como la familia tipográfica, el color de fuente, el logo, etc. Si has creado un estilo personalizado, asegúrate de que ese nombre de estilo es emparejado con el valor establecido en la etiqueta meta fb:article_style.

7. Espera los Resultados del Proceso de Revisión

El proceso de revisión podría tomar hasta tes días---y tu envío podría no ser aceptado inmediatamente. Podría haber errores de código o problemas de estilo que prevengan la publicación. Una vez tuve que reorganizar la posición del encabezado de imagen en un artículo para que apareciera más similar al del sitio web.

Aún así, una vez que has sido aprobado puedes proceder a agregar la URL de Noticias para empujar automáticamente contenido a Artículos Instantáneos.

Concluyendo

Artículos Instantáneos de Facebook posee algunas limitaciones que podrían ser un obstáculo para algunos sitios web. Por ejemplo, no soporta el elemento pre que es una etiqueta común usada en blogs de desarrollo para generar pedazos de código. Los artículos que contienen esta etiqueta son inválidos para el estándar de Artículos Instantáneos. Por esta única razón podrías no ver sitios como Envato Tuts+ o Smashing Magazine en Artículos Instantáneos.

Esto ni siquiera aborda el "debería" en todo esto. Como John Gruber declaró, específicamente cuando discutía Google AMP:

"Si eres un publicista y tus páginas web no cargan rápido, la solución sana es arreglar tu maldito sitio web para que las páginas carguen rápido, no echar tus manos al aire e implementar AMP."---John Gruber

Nuestro trabajo como desarrolladores web se ha vuelto incrementalmente más sobre mantener contenido para ser compatible a lo largo de diferentes plataformas como AMP, Artículos Instantáneos, y si tienes suerte, también Noticias Apple (sin mencionar cómo el flujo de trabajo front-end ha cambiado drásticamente en solo un par de años con la aparición de nuevas herramientas como Webpack, React, Vue, etc.)

Recientemente, los desarrolladores inventaron una nueva iniciativa acuñada Progressive Web App (PWA). Para sitios que no pueden implementar Artículos Instantáneos o AMO, PWA podría ser una gran alternativa. Estaremos echándole un vistazo en el siguiente tutorial, ¡te veré ahí!