AMP Read More

Overview

'Read More' buttons can boost audience engagement significantly, especially on mobile devices. By shortening the viewable content, below-article units become more visible, encouraging interaction.

This page describes the steps needed to implement a 'Read More' button for AMP.

🚧

IMPORTANT

  • The flow described here is not a Taboola product. It is simply a possible approach for implementing 'Read More' in any AMP page.
  • AMP functionality can change over time. Refer to the official amp.dev documentation for the latest information about using AMP.

πŸ“˜

amp-bind

The flow described here uses amp-bind.

For more information, refer to the official amp.dev documentation:

Set up

Step 1: Import the amp-bind component

Add the following script tag to the document <head>:

<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>

Step 2: Wrap the article in a <div>

Wrap the article content in a <div>, with a default class and a [class] AMP binding, as shown below:

<div class="article-body cropped" [class]="expand">

  The article content goes here...
  
</div>

πŸ“˜

Flow

  1. The default class ("article-body cropped") applies a truncated design.
  2. Once the user taps on 'Read More' ('Step 3', below), the[class] AMP binding will replace the default class and apply an expanded design.

For sample CSS, see 'Step 4' below.

Step 3: Add the 'Read More' button

At the end of the article, add a <div> and nested <button>, as shown below:

<div class="article-body cropped" [class]="expand">

    The article content goes here...

    <!-- At the end of the article, add the following: -->
    <div class="read-more-box" [hidden]="hiddenState">
        <button class="read-more-btn" on="tap:AMP.setState({expand: 'article-body', hiddenState: true})">
            Read More
        </button>
    </div>

</div>

<!-- Add your <amp-embed> tag below the article... -->

🚧

Guidelines

  • Nest the 'Read More' <div> within the article.
  • Place your <amp-embed> tag below the article. (See: AMP > Add placement tags)

πŸ“˜

Flow

When the user taps on 'Read More', AMP.setState is triggered:

  1. The expand variable is assigned a value of "article-body".

    This sets [class] to "article-body", applying an expanded design to the article. (See the <div> element in 'Step 2'.)

  2. The hiddenState variable is assigned a value of true.

    This sets [hidden] to true, hiding the 'Read More' div and button. (See the <div> element in this step.)

πŸ“˜

AMP Events

For more information about AMP events, refer to the official amp.dev documentation:

Step 4: Add CSS

The following CSS fragment is provided as an example:

<style amp-custom>
    /* YOUR OTHER STYLES GO HERE */

    /* ARTICLE - TWEAK STYLING AS NEEDED */
    .article-body {
        box-sizing: border-box;
    }

    .article-body.cropped {
        max-height: 700px;
        overflow: hidden;
        position: relative
    }

    /* READ MORE - TWEAK STYLING AS NEEDED */
    .read-more-box {
        position: absolute;
        z-index: 4;
        left: 0;
        right: 0;
        bottom: 0;
        text-align: center;
        padding: 75px 12px 15px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 10%, #fff 60%, #fff 100%);
    }

    .read-more-btn {
        position: relative;
        background: #F7F7F7;
        border: 1px solid #bebebe;
        border-radius: 24px;
        color: #5C5C5C;
        width: 130px;
        margin: -6px 0 20px 0;
        padding: 8px 20px 8px 25px;
        height: 30px;
        line-height: 14px;
        font-size: 14px;
        font-weight: 500;
    }
</style>

🚧

Guidelines

  • Customize the design as needed. The above CSS is provided as an example only.
  • All CSS should be placed a <style amp-custom> element within the <head>. Refer to the official amp.dev documentation.

A Playground Example

The following playground provides a basic, working example of a 'Read More' button:

AMP Playground

🚧

The above playground is provided as an example only - it is not a production-ready page.

Make sure to use your own param values, as provided by Taboola.