GuidesCommunity DiscussionAnnouncements
GuidesAnnouncementsCommunity Discussion
GuidesCommunity DiscussionAnnouncementsLog In

AMP Read More

Suggest Edits

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.

📘

Non-AMP pages

To implement 'Read More' on your non-AMP pages, reach out to your Taboola Account Manager. This is configured by the Taboola team, and requires minimal changes (if any) on your side.

🚧

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

Overview

📘

  1. Import the <amp-bind> component.
  2. Wrap the article content in a <div>, with:
    1. A default class (to apply a cropped view).
    2. A [class] AMP binding to replace the above class (and apply an expanded view).
  3. At the end of the article, add a <div>, with a nested 'Read More' button.

Initially, the <div>:

  • Applies a fade effect to the cropped text.
  • Is visible, together with the 'Read More' button.

Once clicked, the button sets AMP state, and:

  • Applies an expanded design to the article.
  • Hides the <div> and it's nested 'Read More' button.
  1. Include the necessary CSS for the above HTML elements and their various states.

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

    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

    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 demo

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

  1. To run the playground demo, open the playground link (below) in an Incognito Window:

    Right-click > Open Link in Incognito Window

  2. To replay the demo, close the existing Incognito Window, and open a new one (see previous step).

    Refreshing the existing Incognito Window will take you to a different playground demo.

📘

Playground demo (AMP Read More)

🚧

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.

Updated over 1 year ago