AMP

Crear el enmarcado

Ahora que ya has añadido todas las páginas, veamos la última pantalla de la historia, el "enmarcado". Esta última pantalla recapitula la historia y te permite compartirla en tus redes sociales y generar enlaces relacionados a ella, de modo que los usuarios puedan compartirla o profundizar en otros contenidos de tu sitio web.

La información de la pantalla del enmarcado se extrae de un archivo JSON especificado en la etiqueta <amp-story-bookend>. Para este tutorial ya tenemos un archivo JSON (bookend.json) que contiene los datos del enmarcado.

La etiqueta <amp-story-bookend> debe ser la última etiqueta de amp-story. Así pues, vamos a añadir <amp-story-bookend></amp-story-bookend> justo antes del final de la etiqueta </amp-story>. En la etiqueta amp-story-bookend, dirige el atributo src al archivo bookend.json y define layout="nodisplay":

  </amp-story-page>
  <amp-story-bookend src="bookend.json" layout="nodisplay"></amp-story-bookend>
</amp-story>

Al actualizar el navegador e ir a la última pantalla, verás este enmarcado:

Echemos un vistazo al archivo JSON. Abre el archivo bookend.json en el editor de texto.

Cada pantalla del enmarcado requiere una bookendVersion, que en este tutorial es v1.0:

"bookendVersion": "v1.0",

Los lectores pueden compartir tu contenido en las redes sociales, como Twitter, Facebook, Pinterest y otros, mediante los botones para compartir. Especifica tus proveedores de redes sociales en el objeto shareProviders y crea una matriz que contenga los nombres de tipo de cada una de las plataformas sociales.

Para este tutorial, hemos escogido Facebook, Twitter y el correo electrónico como proveedores para compartir contenido:

"shareProviders": [
  "facebook",
  "twitter",
  "email"
],

El resto de la pantalla del enmarcado está dedicado a contenido relacionado, el cual se almacena en el objeto components.

Hay varios componentes que se pueden usar para mostrar contenidos y enlaces relacionados, y cada uno de ellos está especificado con un tipo de atributo. Veamos los componentes disponibles:

Tipo Descripción
heading Permite indicar un encabezado que agrupe varios artículos.
{
  "type": "heading",
  "text": "Más información"
},

small Permite enlazar un artículo relacionado con la opción de incluir una imagen pequeña asociada.
{
  "type": "small",
  "title": "Más información sobre gatos",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

landscape Permite enlazar artículos u otro contenido, como vídeos. La imagen asociada con este tipo es más grande y aparece en horizontal.
{
  "type": "landscape",
  "title": "Más información sobre los Border Collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Perros"
},

portrait Permite enlazar historias u otro contenido. La imagen asociada con este tipo es más grande y aparece en vertical.
{
  "type": "portrait",
  "title": "Más información sobre los guacamayos",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "pájaros"
},

cta-link Permite indicar enlaces de llamada a la acción, que aparecerán como botones (p. ej., leer más, suscribirse).
{
  "type": "cta-link",
  "links": [
    {
      "text": "Más información",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

Puedes aprender más sobre el componente bookend. Para obtener más información, consulta la documentación de referencia de amp-story.

Nuestra historia está casi terminada. Antes de poder publicar nuestro contenido, comprobaremos que el HTML de nuestro AMP es válido.