Artikel ini membahas tentang bagaimana cara menampilkan post foto atau video instagram di blogspot,website template amp mudah dan bisa anda praktekan sendiri di blog.
Menampilkan foto dan video instagram di blog amp
Dengan <amp-instagram>, Anda dapat menyematkan foto dan video Instagram ke halaman AMP Anda.Anda harus menentukan dimensi embed dengan atribut width dan height, dan Anda juga harus menambahkan pengidentifikasi foto atau video Instagram menggunakan atribut data-shortcode pendek.
Anda dapat menemukan pengenal di akhir URL, untuk contoh untuk foto di bawah URL adalah https://www.instagram.com/p/-PFt7tF8Km/, jadi saya perlu menggunakan -PFt7tF8Km sebagai nilai untuk data Atribut data-shortcode.
<amp-instagram data-shortcode="-PFt7tF8Km"
width="400" height="400" layout="responsive">
</amp-instagram>
Untuk tata letak responsif, AMP secara otomatis menghitung ruang yang diperlukan yang juga mencakup "Instagram chrome" (nama akun, tanggal, jumlah suka, dll).Ini berarti Anda dapat menggunakan nilai apa pun untuk lebar dan tinggi, hingga kedua nilai tersebut sama (foto Instagram biasanya berbentuk persegi), karena runtime AMP akan mengubah ukuran gambar sesuai dengan ruang yang tersedia.
Jika foto tersebut tidak berbentuk bujur sangkar, Anda harus menentukan nilai lebar dan tinggi sebenarnya.
Untuk tata letak yang tetap, Anda harus memasukkan ruang tambahan (atas dan bawah: +48 px, kiri dan kanan: + 8px) yang diperlukan untuk krom Instagram saat Anda menghitung dimensi gambar.
yang harus anda lakukan adalah jangan lupa untuk memasukan amp instagram di blog anda:
<script async custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
</script>