AMP iFrame
Using an AMP iFrame is an easy way to integrate a liveblog into your AMP Page.
Use the following code to embed a ticker within your amp page.
<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/amp/tik3.html?client_id=YOURCLIENTID&id=YOURLIVEBLOGID">
<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>
YOU NEED TO REPLACE “YOURCLIENTID” and “YOURTICKERID” WITH YOUR ACTUAL IDS PROVIDED BY TICKAROO!
The src
of the amp-iframe
can be customized with the following options:
-
clientId
(ObjectID) The Client ID provided by Tickaroo -
id
(ObjectId) ID of the ticker to load (required) -
eventId
(String) if you want to focus on an important event in this ticker, add the event id here and the ticker will navigate to this event on load. (optional) -
showHighlights
(Boolean) Will display a list of game highlights underneath the scoreboard, (eg.: a goal scorer list in a soccer game) (default: true) -
reverseEvents
(Boolean) Will reverse the order of the events (oldest on the top of the livecast) (default: false) -
limit
(Integer) The number of items to fetch on initial load (default: 15, range: 2-1000) -
loadMoreLimit
(Integer) The number of items to fetch on load more (default: value of limit, range: 2-1000) -
deepLinkLimit
(Integer) The number of items to fetch over limit in case of a event deep link (default: 0, range: 0-1000) -
handleScoreboard
(‘auto’ or ‘off’) determines if the display of a scoreboard should be handled automatically (default: ‘auto’) -
refreshInterval
(Number) the time (in milliseconds) interval to refresh and update the ticker (default: 20000) -
handleRefresh
(‘auto’, ‘notify’ or ‘off’) automatically refresh the content of the ticker. If set to “notify”, updates are fetched and sent to the trackingCallback but are not rendered automatically. You have to call “updateWithPendingItems” to apply the updates. (default: ‘auto’) -
showEventMeta
(‘reporter’ or ‘off’) enables reporter or ticker info in event (default: ‘reporter’) -
coalesceRepeatedMeta
(Boolean) decides wether to show or hide the reporter’s information in successive messages for a grouping effect. (default: true) (‘showEventMeta’ must be set to ‘reporter’ for this setting to have any effect) (hidden elements take this css class ‘ticker-event-item-meta-reporter-hidden’) -
showEventSharing
(Boolean) enables ticker events to have sharing buttons that will be visible on mouseover (default:false) -
showLineup
(Boolean) will display line up below the event rows (default: false) -
imageWidth
(Number) image width (px) in events (default: 480) -
locale
(String or undefined) force-set the embed language and skip language detection. Unless a value is set, a language will be detected from the browser settings. Currently, we support ‘en’, ‘en-GB’ and ‘de’ for English (US), English (GB) and German. (default: undefined) -
showTeamIcons
(Boolean) Will display team icons in the scoreboard if provided (team-image) (default: false) -
showNavigation
(‘off’ or ‘event_tag_filter’) Will display the specified navigation (default: ‘off’) -
whitelistedScoreboardAffiliations
(Array or String) Hides the scoreboard meta information above the team names and shows only the mentioned types of affiliations. E.g.:["Tik::ApiModel::LiveRef"]
will only show the sportstype of the ticker “Basketball”. (default: undefined) -
blacklistedScoreboardAffiliations
(Array or String) Same aswhitelistedScoreboardAffiliations
but reverse. IfwhitelistedScoreboardAffiliations
is set,blacklistedScoreboardAffiliations
option is ignored. (default: undefined)
SEO
Since the integrated iFrame is not true AMP content this will impact your SEO ranking. For a better SEO experience please use the AMP prefetch API.
Known limitations
showEventSharing
the 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.