AMP Read More


'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.



  • 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 documentation for the latest information about using AMP.



The flow described here uses amp-bind.

For more information, refer to the official documentation:

Set up



  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=""></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...



  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


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



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



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 documentation:

Step 4: Add CSS

The following CSS fragment is provided as an example:

<style amp-custom>

    .article-body {
        box-sizing: border-box;

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

    .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;



  • 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 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.