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" 
    src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"> 
</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= 
"https://amp.dev/documentation/examples/components/amp-instagram/index.html"> 
  
    <!-- Import the amp-instagram component  
        in the header -->    
    <script async custom-element="amp-instagram" 
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"> 
    </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>