Cómo convertir publicaciones de blog en artículos instantáneos de Facebook: no se requiere codificación

Un amigo mío me pidió que ayudara a convertir artículos publicados anteriormente en su sitio en Facebook Instant Articles. Luego, decidí compilar una guía para ayudar a las personas no técnicas a convertir sus artículos, publicaciones de blog o contenido en línea.

Incluso si no sabe qué son los artículos instantáneos de Facebook, es posible que ya los esté utilizando. Según la página de preguntas frecuentes de Facebook IA:

"Instant Articles es un formato de publicación móvil que permite a los editores de noticias distribuir artículos a la aplicación de Facebook que se cargan y muestran hasta 10 veces más rápido que la web móvil estándar".

Los IA dictan un estándar de publicación de contenido que resulta en un diseño agradable y un rendimiento optimizado para los artículos abiertos desde la aplicación móvil de Facebook. Puede leer más sobre los beneficios de las IA.

Facebook ofrece una gran cantidad de formas de acelerar la producción y conversión de IA. Sin embargo, parece que las guías actuales son para desarrolladores o empresas más grandes que tienen un ecosistema editorial más complejo.

Es difícil encontrar guías para convertir artículos publicados anteriormente que no impliquen el uso de la API de IA de Facebook, el SDK de PHP o el complemento de WordPress. Para los no desarrolladores, la mayoría de estas herramientas requieren demasiada experiencia técnica. Incluso cuando uno intenta encontrar el tutorial del complemento de WordPress, uno tiene que profundizar en la documentación en el portal de desarrolladores de Facebook. Esto no es ideal para los no desarrolladores que se disuaden antes de que puedan encontrar esta página.

¡Trabajemos juntos para convertir cualquier artículo ya publicado en la web en un artículo instantáneo de Facebook! Para nuestro tutorial, usaremos el artículo sobre un perro famoso de la película "Anchorman".

¡Vamos a Groove!

Paso 0: preparación

No necesitaremos instalar complementos o integraciones, pero necesitaremos un editor de texto para trabajar con el código fuente HTML. Hay muchos editores de texto orientados a códigos diferentes, pero por el bien de este ejemplo, recomiendo Sublime. Tiene todas las características que necesitaremos y es fácil de usar de fábrica con una instalación nueva.

Una vez que instales Sublime, vamos a querer descargar la plantilla de código que usaremos desde GitHubGist.

En el lado derecho de la pantalla:
1. Haga clic derecho en el botón "Sin procesar"
2. Haga clic en "Guardar enlace como ..." De manera predeterminada, debe guardar como un archivo HTML con el nombre "plantilla".

¡Ahora tenemos el editor de código y el código de plantilla que vamos a editar!

Para el último paso de la configuración:
1. Arranca Sublime
2. Abra el archivo de plantilla que descargamos

Paso 1: obtener la imagen del banner

Regrese a su navegador de Internet y encuentre el artículo que desea convertir en su sitio en vivo. Primero tomaremos la imagen del banner, que usaremos en la parte superior del Artículo instantáneo de Facebook.

Para hacer esto, haga clic derecho en la imagen y seleccione "Copiar dirección de imagen".

Vuelva a la plantilla que tenemos abierta en Sublime. Busque la etiqueta

en el código, ubicada en la línea 35 (el número de línea es visible en el borde izquierdo).

Resalte la URL original ubicada entre comillas en la línea 36 y reemplácela pegando la dirección de la imagen que copiamos de la imagen del banner. Asegúrese de que haya comillas dobles a cada lado de la URL para conservar el formato. Y asegúrese de no eliminar el "/>" al final de la línea.
Edite el texto dentro de 
con el título que desea que aparezca debajo de la imagen. Esto es a menudo donde va la atribución de la imagen.

Observe cómo tenemos cuidado de no cambiar el formato del código. Jugar con las etiquetas causará errores más adelante cuando intentemos renderizar el sitio web. Sublime colorea nuestro código, lo que nos ayuda a reconocer errores o etiquetas HTML que no coinciden.

Presta especial atención a cómo reemplazamos el texto para el pie de figura. Vamos a editar muchos otros valores exactamente de la misma manera.

Paso 2: Recuperando los Metadatos

Hay un poco de información que necesitaremos recopilar ahora. Dado que la mayoría de estos datos deben poder recuperarse sin excavar a través del código fuente, copiar esta información manualmente funciona bien. Sin embargo, necesitaremos este código fuente más adelante, por lo que no hay ningún daño en abrirlo ahora.

  • URL del artículo original
  • Título del artículo
  • Subtítulo del artículo
  • Autor (es) del artículo
  • El artículo de fecha y hora se publicó originalmente
  • Fecha y hora del último artículo actualizado

Si es difícil obtener esta información, podemos usar el código fuente del sitio web. La forma en que acceda a estos datos dependerá del navegador que esté utilizando.

Chrome: CTRL + U, o clic derecho → Ver código fuente de la página
Firefox: clic derecho → Ver código fuente
Safari: Menú Safari → Preferencias → Avanzado, Habilite "Mostrar menú de Desarrollo en la barra de menú", luego Menú de Desarrollo → Mostrar Fuente de Página
El código fuente debe parecerse a esto

Ahora que tenemos el código fuente y el sitio web original, comencemos a buscar nuestra información.

Título: copie el título del artículo y utilícelo para reemplazar "Título del artículo" dentro de las etiquetas

en la línea 14 de la plantilla. En el código fuente, esto generalmente está dentro de las etiquetas . Por ejemplo,

Título del artículo

se convierte

15 minutos en la vida de Celebrity Dog Baxter de 'Anchorman'

Subtítulo: igual que el anterior, pero con el subtítulo. Use esto para reemplazar "Subtítulo del artículo" dentro de las etiquetas

en la línea 15 de la plantilla.

URL: copie la URL del artículo del sitio web en vivo. Use esto para reemplazar la URL que aparece en la línea 7 de la plantilla. Por ejemplo:

se convierte en ...

Hora de publicación: en la línea 18 de la plantilla, puede nombrar la fecha y hora en que se publicó originalmente el artículo. Tenga en cuenta que el parámetro "datetime" tiene un formato muy específico. Los datos dentro de datetime = "" determinan los metadatos (no se muestran), mientras que el texto entre las etiquetas "> " determinará qué fecha se muestra (puede estar en cualquier formato aquí).

Por ejemplo,
Se muestra como: 11 de noviembre, 4:44 p.m.
Cambiemos a: 24 de julio de 2017. 6:30 PM
Última hora de actualización: mismo plan que el anterior, pero en la línea 21 de la plantilla.

Autor (es): las líneas 24–27 de la plantilla representan a un autor cuyo nombre se vincula a algún lugar de la web. Las líneas 28–31 representan un autor cuyo nombre no está vinculado. Puede copiar todo el bloque de código para ese autor respectivo y pegarlo consecutivamente en el bloque anterior, y luego editarlo según sea necesario. También puede hacer esto para múltiples autores. Vea el siguiente ejemplo para varios autores con nombres simples + subtítulos.

Paso 3: Copiar el contenido del cuerpo

Ahora recuperaremos el contenido del artículo que queremos convertir. Existe una amplia gama de tipos de contenido, como medios mixtos, JavaScript sofisticado, contenido incrustado. Con contenido más complicado, hay más posibilidades de que las cosas no funcionen sin la resolución de problemas, por lo que su kilometraje puede variar.

Explicaré cómo trabajar con texto, imágenes (estáticas o gifs) y video, ya que son la base de la mayoría de los artículos instantáneos que he visto.

El código fuente es probablemente cientos (o incluso miles) de líneas. Un truco fácil para encontrar el inicio del contenido del cuerpo es hacer un "Buscar" para las primeras palabras del texto del cuerpo del artículo. Queremos copiar desde la etiqueta

al comienzo del texto de nuestro cuerpo hasta (e incluir) la etiqueta

que sigue a las palabras finales del artículo.

A continuación, vamos a necesitar volcar esto en nuestra plantilla. Cerca de la línea 58 en la plantilla, debe haber una línea con lo siguiente:

Contenido del artículo

Resalte toda esta línea y pegue sobre el contenido del cuerpo que copiamos del código fuente del artículo en vivo. Nota: copiamos la apertura

y el cierre

del código fuente, razón por la cual las estamos pegando en la plantilla aquí. Hay algún código dentro de otro conjunto de etiquetas

que sigue al texto del cuerpo, pero es el estilo; tenga cuidado de no copiar esto con el texto del cuerpo.

* ¿Tiene un video que le gustaría incorporar en su IA? Cambie la URL entre las etiquetas que comienzan alrededor de la línea 64, como hicimos con la URL de la imagen del banner en el Paso 1.

Notas legales: Línea 84. Este texto será muy pequeño y al final de su artículo.

Paso 4: campanas y silbatos (anuncios, rastreadores de análisis y más)

Recomiendo omitir este paso por ahora. Si desea confirmar que lo que hemos hecho hasta ahora funciona, o si no tiene anuncios o rastreadores personalizados, vaya al Paso 5.

Una de las mejores cosas de Facebook Instant Articles, en comparación con otras herramientas de conversión de artículos patentadas, es que puede mantener los rastreadores analíticos personalizados y los anuncios que ya usa en su propio sitio.

Cada integración personalizada será diferente y probablemente variará en dificultad. Para este ejemplo, utilizaremos ChartBeat, una herramienta de análisis de tráfico y seguimiento. Podemos utilizar una búsqueda rápida en Google de "Documentación de ChartBeat" para encontrar la Guía de inicio.

La página de documentación de algunas empresas puede estar dirigida a desarrolladores. Si eso no funciona para usted, busque un tutorial en su lugar.

ChartBeat nos proporciona todo el código y las instrucciones sobre cómo agregar su integración.

En la guía, nos dice lo siguiente, así que eso es lo que haremos:

Inserte este script justo antes de la etiqueta de cierre :

Ahora que hemos agregado nuestro rastreador ChartBeat, necesitaremos realizar algunas ediciones rápidas para que el rastreador sepa cómo sincronizar con nuestra cuenta ChartBeat.

Código del fragmento de ChartBeat que necesitaremos personalizar

Cada línea resaltada (excepto la ".useCanonical") necesitará una edición para que pueda registrar los datos.

CAMBIOS (a la derecha de "=")
.uid: la ID única para su cuenta de ChartBeat
.domain: el dominio completo del artículo original
.sections: el nombre de la 'sección / género / etiquetas' a la que pertenece su artículo
.authors - El nombre del autor a asociar con esta pieza.

¡Bingo! Agregó el rastreador y asociará los datos que envía con su cuenta exclusiva de ChartBeat. Guarde su archivo de plantilla editado y preparémonos para publicar.

Paso 5: Implemente su artículo instantáneo

En Facebook, vaya al panel de la página que administra desde la que desea publicar. Vaya a Herramientas de publicación y a la lista de artículos. Haga clic en el botón azul "+ Crear" en la esquina superior derecha.

Panel de IA

Ahora se le pedirá que pegue el código para su nuevo artículo.

Seleccione todo el código de la plantilla que hemos estado editando y péguelo aquí. Hit guardar! Puede publicar ese borrador cuando lo considere oportuno, o programarlo para que se publique en un momento predeterminado utilizando el panel de control.

¡Felicidades, ya terminaste! No puedo esperar para leer los increíbles artículos que estás a punto de publicar.

Hola, soy Nick Walsh.

Soy un evangelista técnico para Wolfram Research y un entrenador de Hackathon para la piratería de grandes ligas, con una pasión por la tecnología, los deportes electrónicos y el empoderamiento de los desarrolladores de estudiantes.