AMP

Criação do bookend

Depois de adicionar todas as páginas, veremos a última tela da história, o "bookend". Essa tela encerra a história e permite incluir links de compartilhamento social e relacionados à sua história. Assim, os usuários podem compartilhar o material ou navegar mais em outros conteúdos do seu site.

As informações na tela de bookend vêm de um arquivo JSON especificado na tag <amp-story-bookend>. Para nosso tutorial, já temos um arquivo JSON (bookend.json) com os dados correspondentes.

A tag <amp-story-bookend> precisa ser a última tag em amp-story. Então, adicionaremos <amp-story-bookend></amp-story-bookend> antes da tag </amp-story>. Na tag amp-story-bookend, vincule o atributo src ao arquivo bookend.json e defina layout="nodisplay":

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

Se você atualizar o navegador e acessar a última tela, verá o seguinte bookend:

Vejamos o arquivo JSON. Abra bookend.json no seu editor de texto.

Toda tela de bookend exige um bookendVersion, que é v1.0 neste tutorial:

"bookendVersion": "v1.0",

Os botões de compartilhamento social permitem que os leitores compartilhem seu conteúdo por meio de plataformas sociais, como Twitter, Facebook, Pinterest e outros. Você especifica os provedores de compartilhamento social em um objeto shareProviders e cria uma matriz com os nomes dos tipos de cada plataforma social.

Para este tutorial, escolhemos Facebook, Twitter e e-mail como nossos provedores de compartilhamento:

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

O restante da tela de bookend é para o conteúdo relacionado. Todo esse conteúdo está em um objeto components.

Há vários componentes que você pode usar para exibir links e conteúdo relacionado. Cada componente é especificado com um atributo de tipo. Vejamos os componentes disponíveis:

TipoDescrição
headingPermite especificar um título para agrupar artigos.
{
  "type": "heading",
  "text": "More to read"
},

smallPermite vincular artigos relacionados com a opção de incluir uma imagem associada pequena.
{
  "type": "small",
  "title": "Learn about cats",
  "url": "https://wikipedia.org/wiki/Cat",
  "image": "assets/bookend_cats.jpg"
},

landscapePermite incluir links para artigos ou outros conteúdos, como vídeos. A imagem associada a esse tipo é maior e no formato paisagem.
{
  "type": "landscape",
  "title": "Learn about border collies",
  "url": "https://wikipedia.org/wiki/Border_Collie",
  "image": "assets/bookend_dogs.jpg",
  "category": "Dogs"
},

portraitPermite incluir links para histórias ou outros conteúdos. A imagem associada a esse tipo é maior e no formato retrato.
{
  "type": "portrait",
  "title": "Learn about macaws",
  "url": "https://wikipedia.org/wiki/Macaw",
  "image": "assets/bookend_birds.jpg",
  "category": "birds"
},

cta-linkPermite especificar links de calls-to-action exibidos como botões (por exemplo, "Leia mais", "Assine").
{
  "type": "cta-link",
  "links": [
    {
      "text": "Learn more",
      "url": "https://amp.dev/about/stories.html"
    }
  ]
}

Veja mais informações sobre o componente de bookend. Acesse a documentação de referência do amp-story.

Nossa história está quase pronta. Antes de publicar o conteúdo, vamos verificar se o HTML para AMP é válido.