Skip to main content

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>

Follow us on Instagram
@encepnurdin.id

More from Instagram...

Follow us on Facebook
@encepnurdin.id

Find us on Google Maps
@encepnurdin

Reactions:

Berbagi Itu Peduli :

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Jika merasa artikel ini bermanfaat ulas saya di google maps
https://g.page/encepnurdin/review
Buka Komentar
Aplikasi: Tambahkan aplikasi encepnurdin. id di smartphone tanpa install, buka encepnurdin. id dengan browser Chrome di smartphone lalu klik ikon 3 titikdi browser kemudian pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi encepnurdin. id dari layar utama smartphone Anda.