Do you build things with AMP? Fill out the AMP Developer Survey!
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:

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.