Cara Membuat Instafeed Di Blog Amp HTML

Last Update : 

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

• How to embed instagram in AMP HTML

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 ada di bawah blog ini ( jika belum di hapus )

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 developer

2.

Kemudia anda log-in menggunakan akun instagram anda (jika belum log-in)

3.

Isikan formulir pendaftarannya dengan lengkap


Detail 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.com
Penting di bagian tab security uncheck " disable implicit OAuth "

5.

Setelah anda berhasil mendaftar di bagian Manage Clients sekarang kita salin Client ID nya

6.

Untuk mendafatkan Access Token dan User ID langkah selanjutnya buka tab baru di browser anda dan masukan alamat berikut

https://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 instagram

Catatan 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 lain

Mendapatkan 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 nya

Mendaptkan Access Token

sementara untuk mendafatkan access tokennya buka alamat
https://instagram.pixelunion.net
dan login dengan akun instagram anda.Untuk mendafatkan Access Token nya

7.

Sampai di sini kita sudah selesai mendafatkan User ID , Client ID , dan Access Token instagram

Memasang 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 script amp- 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
&amp;get=user
&amp;userid={{ Instagram User ID }}
&amp;clientid={{ Instagram cliend ID }}
&amp;accesstoken={{ Instagram access token }}
&amp;sortby=random
&amp;limit=6
&amp;resolution=low_resolution
&amp;comments=true
&amp;likes=true
&amp;posts=Posts
&amp;follower=Followers
&amp;following=Following
&amp;breakpoint=428
&amp;columns=6
&amp;columnsmobile=2
&amp;headercolor=%23333333
&amp;headerbg=white
&amp;headerborder=rgba(0,0,0,.055)
&amp;feedbg=%23ffffff
&amp;feedbgopacity=.25
&amp;feedbgcolor=%23333333
&amp;feedcolor=%23ffffff
&amp;fontstyle=normal
&amp;fontweight=bold
&amp;fontsize=15
&amp;fontlineheight=1.428
&amp;fontfamily=Helvetica,Arial,sans-serif
&amp;fontcolor=%23333333
&amp;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/