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.