Cara Membuat Instafeed Di Blog Amp HTML
Cara Membuat Insta Feed Di Blog Amp HTMl
Untuk nambahkan instafeed di blog sebenarnya kita bisa menggunakan dari situs pihak ketiga misalnya
- POWR
- Snapwidget
- Elfsight
- Embedsocial
- Light widget
- Dll
Kekurangan menggunakan widget di atas selain kita menggunakan web ekternal di blog , ini akan menjadikan loading blog kita menjadi berat
kekurangan lainnya juga widget widget di atas memerlukan upgrade versi prenium karana ketika kita menggunakan versi gratis hasilnya kurang maksimal di tambah lagi ada embel embel widget tersebut di halaman blog kita dan untuk meng upgrade harganya sangat mahal .
kita juag bisa menggunakan embed intagram langsung dari instagram developer karana amp HTMl kini sudah mendukung menintergrasikan amp instagram dengan menambahkan komponen
amp-instagram
Baca Juga
Sedikit kekurangan embed intagram ini juga kita hanya bisa embed satu postingan saja, karana kita cuma bisa embed postingan intagram jadi ketika kita ingin embed postingan baru lagi harus mengganti ID postingan tersebut, jadi ini bukan instafeed namnaya karana instafeed merupakan postingan postingan terbaru dari hasil postingan kita di intagram.
Maka dari itu solusi yang paling tepat kita bisa menggunakan
instafeed js
dan menggunakan komponen amp iframe
dengan ampaction-js.Kelebihan Plugin AMP Instagram Feed ( ampaction-js )
- Mudah di pasang dengan berbagai opsi atau pengaturan untuk di gunakan
- secara dinamis menampilkan umpan postingan yang di ambil dari akun intagram menggunakan satu markup
- Tidak perlu melakukan pembaharuan Tag/kode atau markup amp-instagram untuk menampilkan postingan instagram baru
- menampilkan postingan , media ,pengikut dan hitungan dengan pilihan aktif/nonaktif
- Menampilkan hingga 20 postingan intagram sekaligus
- Tampilan responsive di segala perangakat
- Design dan tampilan bisa diatur.
Berikut Ini Demo Tampilannya
Follow us on Instagram
@encepnurdin.id
More from Instagram...
Langkah Membuat Instafeed Instagram
Untuk membuat instafeed ini membutuhkan
User ID
, Client ID
, dan Access Token
instagram.Oleh karna itu untuk mendapatkan Client ID dan Screat ID kita harus mendaftar api aplikasi pengembang di instagram developer
1.
Pertama-tama silahkan anda registrasi terlebih di instagram developer2.
Kemudia andalog-in
menggunakan akun instagram anda (jika belum log-in
)3.
Isikan formulir pendaftarannya dengan lengkapDetail Keterangan :
- Nama aplikasi : Isikan nama aplikasi
- Deskripsi : Isikan Deskripsi aplikasi anda
- Company name : Isikan nama persuahaan ( jika ada )
- Website URl : Isikan dengan url website/blog anda
- Privacy Policy URl : Isikan privacy policy situs web anda
- Contact email : Isi dengan kontak email anda
4.
OAunt_redirect_url : isikan lokal host atau bisa juga dengan http://instafeedjs.comPenting di bagian tab security uncheck " disable implicit OAuth "
5.
Setelah anda berhasil mendaftar di bagian Manage Clients sekarang kita salin Client ID nya6.
Untuk mendafatkanAccess Token
dan User ID
langkah selanjutnya buka tab baru di browser anda dan masukan alamat berikuthttps://instagram.com/oauth/authorize/?client_id= [CLIENT_ID_HERE] & redirect_uri = http: //instafeedjs.com&response_type=token
Keterangan :
- Silahkan anda ganti CLIENT_ID_HERE dengan client ID yang sudah kita salin tadi
Sampai di sini anda sudah berhasil mendafatkan
User ID
dan Access Token
instagramCatatan dalam beberapa kasus kita tidak bisa mengakses halaman ini atau terdafat error page itu di karnakan sekarang membutuhkan proses review mensubmit aplikasi untuk mendapatkan User ID dan Access token instagram
Maka dari itu solusinya untuk mendaptkan
User ID
dan Access Token
kita memerlukan bantuan dari penyedian situs lainMendapatkan User ID
Untuk mendaptkan User ID buka alamat https://codeofaninja.com/tools/find-instagram-user-id Lalu login dengan akun instagram untuk mendafatkan
User ID
nyaMendaptkan Access Token
sementara untuk mendafatkan access tokennya buka alamat
https://instagram.pixelunion.net
dan login dengan akun instagram anda.Untuk mendafatkan
Access Token
nya7.
Sampai di sini kita sudah selesai mendafatkan User ID , Client ID , dan Access Token instagramMemasang Instafeed Instagram Di Blog Amp HTMl
Setelah anda berhasil mendafatkan User ID , Client ID , dan Access Token instagram
Seperti yang sudah saya jelaskan di atas kita bisa menggunakan
instafeed js
dan komponen amp-iframe
dengan ampaction-js
1.
Pertama simpan kode scriptamp- iframe
di atas kode <head>
<script async = 'async' custom-element = 'amp-iframe' src = 'https: //cdn.ampproject.org/v0/amp-iframe-0.1.js'/>
2.
Langkah selanjutnya salin tag dan markup amp-iframe berikut ini di template blog amp html anda berikut ini.
<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>
Keterangan :
- Ganti {{ Instagram User ID }} dengan userId Instagranda
- Ganti {{ Instagram Client ID }} dengan clientId Instagram anda
- Ganti {{ Instagram Access Token }} dengan Instagram accessToken Anda.
Artribut lainnya
sortby=random
Media yang di sort
Limit= jumlah postingan yang di tampilkan ini bisa maksimal sampai 20 postingan
resolution=low_resolution
Resolusi media yang di ambil misalnya secara resolution
thumbnail -150px × 150px
Resolusi rendah 306px × 306px
Standard resolution 612px × 612px
Untuk selebihnya bisa anda sesuaikan sendiri
CSS
nya sesuai selera tentunya..Semoga bermanfaat
Referensi : https://blogr-amp.blogspot.com/
Follow us on Instagram
@encepnurdin.id
More from Instagram...