Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Google AMP amp-instagram

  • Last Updated : 25 Oct, 2020

 

Adding social media post, comments are attractive features in websites which developers tend to add and Instagram being one of the popular social media networks in 2020 embedding Instagram post comes in handy when looking to attract audience. In AMP HTML we can do exactly this by using amp-instagram.

Required Scripts: Importing the amp-instagram header into the header.

HTML




<script async custom-element="amp-instagram" 
</script>

Attributes:

  • data-shortcode: Found in every Instagram photo URL. Example the bold underlined part in the below link https://www.instagram.com/p/CEZCQC-osEP/
  • data-captioned: Will resize to original height including the caption.

Example:

HTML




<!doctype html>
<html ⚡>
  
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-instagram</title>
  
    <script async src="https://cdn.ampproject.org/v0.js"></script>
      
    <link rel="canonical" href=
  
    <!-- Import the amp-instagram component 
        in the header -->    
    <script async custom-element="amp-instagram" 
    </script>
      
    <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>
</head>
  
<body>
    <amp-instagram data-shortcode="CEZCQC-osEP" 
        width="1" height="1" layout="responsive">
    </amp-instagram>
  
    <!-- You can include captions with the 
        `data-captioned` attribute -->
    <amp-instagram data-shortcode="CEQ17teInqd"
        data-captioned width="1" height="1" 
        layout="responsive">
    </amp-instagram>
</body>
  
</html>

Output :




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!