Embedded FRED graphs allow users to show interactive graphs on their websites with little or no programming knowledge. However, Google's accelerated mobile pages (AMP) project does not support embedded iframes by default. AMP does support iframes, but it requires some changes to your website. The following code snippets and links will help you or your web developers implement the changes necessary to embed FRED graphs on your AMP-enabled site.
Introduction
Use amp-iframe for embedding content into AMP pages via iframe. This allows you to display content not yet supported by AMP, like FRED graphs.
Sample embed block
<amp-iframe width="600" title="Fredgraph Test"
height="600"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://fred.stlouisfed.org/graph/graph-landing.php?g=fkG9&width=420&height=300">
</amp-iframe>
Include this line in the pages head
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
Links to official AMP documentation
Simple example AMP page containing a FRED graph
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Import the amp-iframe component in the header. -->
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<link rel="canonical" href="<%host%>/components/amp-iframe/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
div[overflow] {
text-align: center;
background: #f9f7f7;
line-height: 36px;
line-size: 22px;
}
</style>
</head>
<body>
<!--
elements must be positioned outside the first 75% of the viewport or 600px from the top (whichever is smaller). This graph won't show up since it is to close to the top of the page.
-->
<amp-iframe width="600" title="Fredgraph Test"
height="600"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://fred.stlouisfed.org/graph/graph-landing.php?g=fkG9&width=450&height=275">
</amp-iframe>
<amp-iframe width="600" title="Fredgraph Test"
height="600"
layout="responsive"
sandbox="allow-scripts allow-same-origin allow-popups"
allowfullscreen
frameborder="0"
src="https://fred.stlouisfed.org/graph/graph-landing.php?g=fkG9&width=420&height=300">
</amp-iframe>
</body>
</html>
AMP Embed Generator
