{"componentChunkName":"component---src-templates-blog-post-js","path":"/vuukle-amp-integration/","result":{"data":{"site":{"siteMetadata":{"title":"Vuukle Docs","author":"Vuukle"}},"markdownRemark":{"id":"15ffb25c-3032-5b8e-a31d-28b8ed276eb4","html":"

Before you start

\n\n

How to install

\n
    \n
  1. Add the following code to the page
    2. \n
\n
<amp-iframe\n  width=\"600\"\n  height=\"350\"\n  layout=\"responsive\"\n  sandbox=\"allow-scripts allow-same-origin allow-modals allow-popups allow-forms allow-top-navigation\"\n  resizable\n  frameborder=\"0\"\n  src=\"ARTICLE-URL-HERE\"\n>\n  <div\n    overflow\n    tabindex=\"0\"\n    role=\"button\"\n    aria-label=\"Show comments\"\n    style=\"display: block;text-align: center;background: #1f87e5;color: #fff;border-radius: 4px;\"\n  >\n    Show comments\n  </div>\n</amp-iframe>
\n
    \n
  1. Populate src url with parameters:\nurl - Article URL\nhost - Site Host\nid - article id\napiKey - your api key\ntitle - article title
    2. \n
  2. Add AD code to the page
    3. \n
\n
<amp-ad width=\"300\" height=\"250\" type=\"doubleclick\" data-slot=\"/213794966/amp/{host}\">\n  //host should not contain http, https or www.\n  <div placeholder></div>\n  <div fallback></div>\n</amp-ad>
\n
    \n
  1. Refer to the amp-iframe documentation and amp-ad documentation add the required amp-iframe and amp-ad script to your document’s <head>. :
    2. \n
\n
<script async custom-element=\"amp-ad\" src=\"https://cdn.ampproject.org/v0/amp-ad-0.1.js\"></script>\n<script async custom-element=\"amp-iframe\" src=\"https://cdn.ampproject.org/v0/amp-iframe-0.1.js\"></script>
\n
\n

You can check working samples here

\n

​

","frontmatter":{"title":"How to embed Vuukle on AMP pages","date":"May 01, 2017","category":"Install Vuukle","tags":["how to","install","amp"],"shortDescription":"Accelerated Mobile Pages (AMP) is a fast-loading, optimized Vuukle experience for Google AMP compatible pages."}}},"pageContext":{"id":"15ffb25c-3032-5b8e-a31d-28b8ed276eb4"}}}