AMP iFrame

Using an AMP iFrame is an easy way to integrate a liveblog into your AMP Page. The iFrame will display a full featured web variant of the liveblog and will resize itself according to the needed height.

General AMP Structure for the iFrame

To add the iFrame to your AMP Page you need the following code parts:

  1. Add the amp-iframe AMP Module to the <head> of the document

  2. Add the AMP iFrame with recommended parameters

    Show Liveblog
  • IFRAMEURL must be replaced by the URL to your liveblog.
  • The width and height must be set but do not matter because of automatic resizing.
  • The placeholder can be customized however needed. There is no requirement to use aur placeholder.png.
  • You can find more information about AMP iFrames in the AMP Documentation

iFrame URL

URL of the iFrame:

https://cdn.tickaroo.com/embed/v4/amp/liveblog.html

Query Parameters:

You can specify any prameters described in Liveblog Tag Parameters

Full example:

<html>
  <head>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
  </head>
  <body>
    <amp-iframe 
      width="50"
      height="200"
      layout="responsive"
      sandbox="allow-scripts allow-same-origin allow-popups"
      allowfullscreen
      resizable
      src="https://cdn.tickaroo.com/embed/v4/amp/liveblog.html?clientId=&liveblogId=">
      <amp-img layout="fixed-height" height="100px" width="auto" 
        src="https://cdn.tickaroo.com/embed/placeholder.png" placeholder>
      </amp-img>
      <div overflow="">Show Liveblog</div>
    </amp-iframe>
  </body>
</html>

Known Limitations

  • Since the integrated iFrame is not true AMP content this will impact your SEO ranking. For a better SEO experience please use the AMP Server Side Fetch API.
  • Event sharing itself works with the limitation that the automatic scrolling to the shared event does not work
  • The iframe resizes automatically. If this does not work make sure to set proper initial width and height values.