Karena kendala amp pada platform Blogger, para perancang website telah mengembangkan sebuah plugin unik untuk menampilkan umpan Instagram secara dinamis menggunakan ampaction-js & Instafeedjs yang dapat dengan mudah digunakan & diintegrasikan oleh pengguna blog Blogger di template & templat Blogger Berbasis AMP.
Manfaat plugin AMP Instagram Feed (ampaction-js)
1. Mudah dipasang dengan berbagai pengaturan / opsi untuk digunakan.
2. Secara dinamis menampilkan umpan posting Instagram yang diambil dari akun pengguna menggunakan satu markup.
3. Tidak memerlukan pembaruan tag / kode / markup amp-instagram untuk menampilkan posting Instagram baru.
4. Menampilkan posting / media, Pengikut & Hitungan berikut dengan opsi untuk mengaktifkan / menonaktifkan.
5. Ambil hingga 20 pos - pembatasan Instagram untuk mode Sandbox.
6. Opsi pemfilteran posting Instagram - oleh sebagian besar komentar, paling disukai, paling tidak dikomentari, paling tidak disukai, secara acak atau dengan urutan kronologisnya.
7. Kustomisasi & perpaduan tampilan umpan Instagram dengan desain blog yang ada.
8. Minimalkan halaman blog Ukuran HTML - membutuhkan 1 markup tunggal untuk menampilkan beberapa posting Instagram.
Cara menginstal Umpan Instagram AMP di Blog AMP.
1. Di halaman Pengembang Instagram, dapatkan ID pengguna, clientId & accessToken Anda. Artikel ini menunjukkan kepada Anda caranya: https://blog.irsah.com/2017/06/add-instagram-widget-for-blogger-themes.html lanjutkan ke Langkah # 2.2. Periksa tema Anda jika komponen amp-iframe telah disertakan.
3. Salin & tempel amp-iframe yang disediakan markup HTML
4. Perbarui & tambahkan userId Instagram yang unik, clientId, dan accessToken.
5. Simpan perubahan Anda
6. Refresh halaman web untuk melihat hasilnya.
Tentang ampaction-js
ampaction-js adalah penolong unik all-in-one untuk halaman web terintegrasi AMP HTML - khusus dibuat untuk blog Blogger yang terintegrasi dengan AMP HTML.Diinangi pada Github & file yang dikirim menggunakan Content Delivery Network CDN oleh rawgit.com, mudah meningkatkan tema blog Blogger apa pun dengan fitur & konten yang luar biasa ditenagai oleh komponen AMP.
Cara mendapat userId Instagram Anda, clientId & accessToken
Untuk mendapatkan user id,dan access token silahkan kunjungi artikel ini.Masukan amp-iframe
Masukan frame work amp-iframe di atas kode </head> :<script async='async' custom-element='amp-iframe' src='https://cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
Kemudian Salin tag & markup amp-iframe
Pilih & sorot markup amp-iframe di bawah ini dalam kode tema Anda atau gunakan gadget HTML / Javascript (yang mendukung integrasi AMP) & rekatkan di badan widget.<amp-iframe class="instafeed" frameborder="0" width="600" height="265" layout="responsive" resizable="resizable" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://cdn.rawgit.com/blogr-amp/ampaction-js/0.9.0/widget.html
?ampactions=instagram
&get=user
&userid={{ Instagram User ID }}
&clientid={{ Instagram cliend ID }}
&accesstoken={{ Instagram access token }}
&sortby=random
&limit=6
&resolution=low_resolution
&comments=true
&likes=true
&posts=Posts
&follower=Followers
&following=Following
&breakpoint=428
&columns=6
&columnsmobile=2
&headercolor=%23333333
&headerbg=white
&headerborder=rgba(0,0,0,.055)
&feedbg=%23ffffff
&feedbgopacity=.25
&feedbgcolor=%23333333
&feedcolor=%23ffffff
&fontstyle=normal
&fontweight=bold
&fontsize=15
&fontlineheight=1.428
&fontfamily=Helvetica,Arial,sans-serif
&fontcolor=%23333333
&fontlinkcolor=%230066cc">
<div placeholder="placeholder">
<p>Loading Instagram...</p>
</div>
<div overflow="overflow" tabindex="0" role="button" aria-label="Instafeed" class="text-center">
<p>More from Instagram...</p>
</div>
</amp-iframe>
Kustomisasi Pengaturan Instagram amp-iframe
- Ganti {{ID Pengguna Instagram}} dengan userId Instagram unik Anda.
- Ganti {{ID Klien Instagram}} dengan clientId Instagram unik Anda.
- Ganti {{Token Akses Instagram}} dengan Instagram accessToken unik Anda.
- Klik Simpan untuk menyimpan tema atau widget Anda.
- Refresh halaman blog Anda untuk melihat hasilnya.
Atribut deskripsi
Yang dibutuhkan :
userid = {{ID Pengguna Instagram}} UserId Instagram yang unik clientid = {{ID klien Instagram}} ClientId Instagram yang unik accesstoken = {{Token akses Instagram}} Akses Instagram unik sortby = acak Penyortiran media diambil dari umpan Instagram. Nilai yang diijinkan: