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:
-
Add the
amp-iframe
AMP Module to the<head>
of the document -
Add the AMP iFrame with recommended parameters
Show Liveblog
- IFRAMEURL must be replaced by the URL to your liveblog.
- The
width
andheight
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.