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:
amp-iframeAMP Module to the
<head>of the document
Add the AMP iFrame with recommended parametersShow Liveblog
- IFRAMEURL must be replaced by the URL to your liveblog.
heightmust 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
URL of the iFrame:
You can specify any prameters described in Liveblog Tag Parameters
<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>
- 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.