[TUTORIAL] Memasang Insta Feed di Blogspost dengan Snapwidget

by - June 15, 2015

Akhirnya saya bisa juga memasang feed Instagram di blogspot.  Ternyata caranya tidak sesulit yang saya bayangkan.  Feed Instagram itu adalah semacam galeri mini dimana foto yang ditampilkan sesuai koleksi Instagram yang kita miliki.  

Sudah cukup lama tuh kepikiran gimana caranya pamerin foto Instagram seperti yang selama ini sering saya temukan di laman para IGer (istilah bagi para pemain Instagram) kalau saya sedang blog walking.


Dari hasil pencarian, kalau menemukan 2 cara yang tidak sulit.  Pertama dengan menggunakan POWR. Langkahnya bisa dilihat di sini.



Image from http://stokpic.com by Ed Gregory



















Namun saya sendiri lebih suka dengan mengoptimalkan Snapwidget karena 
caranya betul-betul plug and play alias simple bin easy.

OK, siap ya !



Pertama, siapkan akun Instagramnya dulu ya.  Ya ealaaahh !

Setelah itu, langsung akses www.snapwidget.com , scroll ke bawah sedikit maka akan terlihat kolom-kolom yang perlu kita isi seperti berikut.



Insta Feed di Blogspot #1



1. Username: isi sesuai nama akun Instagram, punya saya @ratna17amalia (ayo, follow yang belum, modus ^_^)

2. Hastag: kosongkan.  
Karena jika diisi hal tersebut hanya akan terbatas pada pencaharian sesuai hastag saja

3. Widget Type: bentuk tampilan yang akan terlihat di blog.  Saya pilih Grid.
Explore sendiri biar tahu masing-masing widget ya !

4. Thumbnail size: ukuran foto Insta yang bakal dipajang. 
Sesuaikan dengan width blogspot masing-masing aja.

5. Lay Out: opsi ini muncul karena saya pilih Grid.
Angka 2 x 3 artinya 2 kolom dengan 3 foto tiap kolomnya.
Sekali lagi ini selera masing-masing ya...

6. Photo Border: futunya mau dipakein border atau ngga ?

7. Background: fotonya mau dipakein latar belakang atau tidak.

8. Photo Padding: jarak pengaturan antar foto dalam pixel.
Isi manual dan saya atur di angka 10 karena fotonya kecil-kecil

9. Hover Effect: saya pilih NO.
Hover Effect ini maksudnya jika gambar tidak disorot maka gambar kelihatan buram.
Gambar akan nampak jelas jika cursor diarahkan ke salah satu foto.  Gicu...

10. Sharing Button: jika YA, 
maka akan tampil ikon media sosial seperti Facebook atau Twitter.

11. Responsive: 
Menilik keterangannya, Insta feed akan otomatis menyesuaikan dengan ukuran screen.
Saya pilih YES.


Sehabis mengisi kolom-kolom tersebut, pengen tahu donk, tampilannya seperti apa ? Klik aja tombol preview.  Kalo udah sreg, langsung klik tombol Get Widget untuk dapatkan coding seperti gambar berikut ini.




Insta Feed di Blogspot #2

Kalau masih belum puas, ulik lagi kolom-kolom tadi hingga mendapatkan lay-out seperti yang diinginkan.


Sudah menetapkan pilihan ?


Jika sudah, sesuai instruksi, copy coding tadi untuk ditempatkan dalam blogspot.  Caranya ?



(a) Masuk ke blogspot kemudian pilih Lay Out

(b) Add Widget dan klik Add HTML

Insta Feed di Blogspot #2


(c) Terapkan coding yang diperoleh dari widget sebelumnya lalu Save.


Blogspot Anda sudah dihiasi dengan gambar-gambar paling update dari akun Instagram Anda.

Kalau pengen lihat video tutorialnya, ada juga kok.   




Selamat mencoba ya.



You May Also Like

21 comments

  1. Ini dia kandidat tutor profesional, talenta begini harus dikembangkan mba, semakin banyak disebar makin manfaat, makin barokah.
    Aku kaya biasanya, ntar kalo ketemu face to face ajaah diajarin hihihi

    ReplyDelete
  2. Matur suwun doanya, Amiinnn, mba Yanti. Semoga barokah untuk yang membacanya.

    ReplyDelete
  3. Ratnaaa udah baca teuteup harus dibaca lagi nih, bahkan kalo mungkin kudu di screen shoot arahannya and di print, hehe... biar gampang sambil baca arahannya. Aduuh, leppy ini koq ngadat terus, ya. Masa sih nulis kek gini aja lama banget, ampe lebih dari 15 menit.

    ReplyDelete
  4. Semangat Bunda Yati !
    Kalo merasa ada yang perlu dibantu, colek aku di FB aja ya. Hatur nuhun.

    ReplyDelete
  5. hmm semoga sukses trus ngeblog nya yah :)

    ReplyDelete
    Replies
    1. Terima kasih sudah mampir. Amin doanya

      Delete
  6. ilmu yang bermanfaat, kalo di platform lain gimana? seperti WP atau joomla.

    ReplyDelete
  7. Dear Walnut Tree, terima kasih semangatnyahh !

    Mas Cahyanto, di web page Snapwidget ada video tutorial untuk platform WP, silahkan dicoba.

    ReplyDelete
  8. Biar tambah keren blognya, Chi ^_^

    ReplyDelete
  9. yes! Akhirnya menemukan tutorial yang berhubungan dengan instagram, makasih ya mbak :)

    ReplyDelete
    Replies
    1. Sama-sama, alhamdulillah jika bermanfaat.

      Delete
  10. Horeeeeee, aku sudang pasang Mbak Ratna.
    Terima kasih ilmunya

    ReplyDelete
  11. Replies
    1. Sama-sama mba Diah, semoga bermanfaat.

      Delete
  12. kok di blog saya gak mau muncul ya mba widget nya? butuh bantuan nih :)

    ReplyDelete
    Replies
    1. Masak siy? Kira-kira, stepnya sudah sesuai langkah-langkah di atas?

      Delete
  13. gan pernah mengalami ga snapwidgetnya ga berfungsi, saya sudah setahun pake snapwidget setelahnya ga berfungsi lg, apakah anda pernah mengalaminya ? terimakasih

    ReplyDelete
  14. Makasih tipsnya ya. Salam kenal

    ReplyDelete

Hai ^_^
Terima kasih sudah berkunjung dan membaca tulisan saya di blog ini.
Silakan tinggalkan komentar yang baik.
Mohon maaf, komentar anonim maupun yang sifatnya spam, tidak akan dipublikasikan.
Keep reading and Salam !