How to embed instagram in AMP HTML

BLOG MOBILE.



    Salam menyambungkan lagi ketutorial tenang INSTRAGRAM, setelah kemarin saya sudah membuat toturial menggukan fitue terbaru instragram carousel.  Kali saya mau melanjutkan cara embed instragram di AMP HTML.

Untuk membuat embed instragram kita cukup ambil  data-shortcode nya saja.

Example:

<amp-instagram
      data-shortcode="BGgvHp2N8U"
      width="381"
      height="381"
      layout="responsive">
  </amp-instagram>

Untuk embed instragram di AMP HTML syarat umatamanya simpan AMP js di bawah ini di tag HEAD 

<script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>

Berikut ini contoh embed instragram di AMP HTML :

<amp-instagram
      data-shortcode="BGgvHp2N8U"
      width="381"
      height="381"
      layout="responsive">
  </amp-instagram>

Instagram

Instagram with Frame

  <amp-instagram
      data-shortcode="BUO16FVDjtv"
      data-default-framing
      width="500"
      height="500"
      layout="responsive">
  </amp-instagram>

Instagram with Frame, Caption and Overflow Element

 <amp-instagram
      data-shortcode="BUO16FVDjtv"
      data-captioned
      data-default-framing
      width="500"
      height="500"
      layout="responsive">
      <div overflow>Show Caption</div>
  </amp-instagram>

Show Caption

Instagram Default Layout

<amp-instagram
      data-shortcode="BRIrHrujpja"
      width="381"
      height="381">
  </amp-instagram>

Instagram Video

<amp-instagram data-shortcode="BN6TQWuhzsF"
                 width="300"
                 height="300"
                 layout="responsive">
  </amp-instagram>