Skip to main content

Using Embedded FRED Graphs on an AMP Website

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





Posted in How can I share my FRED graph?
FRED Economic Data | St. Louis Fed


Subscribe to the FRED newsletter


Follow us

Twitter logo Google Plus logo Facebook logo YouTube logo LinkedIn logo
Back to Top