Creating the bookend

Now that you've added all of your pages, let's look at the last screen of the story, the "bookend". This last screen wraps up the story, and allows you to provide social sharing and related links to your story, so users can share your story or dive further into other content on your site.

The information on the bookend screen comes from a JSON file that's specified in the <amp-story-bookend> tag. For our tutorial, we already have a JSON file (bookend.json) that contains the bookend data.

The <amp-story-bookend> tag must be the last tag in <amp-story>. So, let's add <amp-story-bookend></amp-story-bookend> just before the ending </amp-story> tag. In the amp-story-bookend tag, point the src attribute to the bookend.json file and set layout="nodisplay":

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

If you refresh your browser and go to the last screen, you'll see the following bookend:

Let's look at the JSON file. Open the bookend.json file in your text editor.

Every bookend screen requires a bookendVersion, which is v1.0 for this tutorial:

"bookendVersion": "v1.0",

Social share buttons allow readers to share your content through social platforms, like Twitter, Facebook, Pinterest, and so on. You specify social share providers in a shareProviders object, and create an array containing type names for each of the social platforms.

For this tutorial, we chose Facebook, Twitter, and email for our share providers:

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

The rest of the bookend screen is for related content. All related content is contained in a components object.

There are various components that you can use to display related content and links; each component is specified with a type attribute. Let's look at the available components:

Type	Description
heading	Allows you to specify a heading to group articles. { "type": "heading", "text": "More to read" },
small	Allows you to link to related articles with the option to include an associated small image. { "type": "small", "title": "Learn about cats", "url": "https://wikipedia.org/wiki/Cat", "image": "assets/bookend_cats.jpg" },
landscape	Allows you to link to articles or other content, like videos. The image associated with this type is larger and in landscape format. { "type": "landscape", "title": "Learn about border collies", "url": "https://wikipedia.org/wiki/Border_Collie", "image": "assets/bookend_dogs.jpg", "category": "Dogs" },
portrait	Allows you to link to stories or other content. The image associated with this type is larger and in portrait format. { "type": "portrait", "title": "Learn about macaws", "url": "https://wikipedia.org/wiki/Macaw", "image": "assets/bookend_birds.jpg", "category": "birds" },
cta-link	Allows you to specify calls to action links that are displayed as buttons (e.g., read more, Subscribe). { "type": "cta-link", "links": [ { "text": "Learn more", "url": "https://amp.dev/about/stories.html" } ] }