[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.

Share
Tweet
Pin
Share
Tags : , ,

You May Also Like

27 comments

  1. Nefertite FatriyantiJune 15, 2015 at 7:15 PM

    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. Ratna AmaliaJune 15, 2015 at 7:55 PM

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

    ReplyDelete
  3. bundayati.comJune 16, 2015 at 8:41 AM

    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. Ratna AmaliaJune 16, 2015 at 11:28 AM

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

    ReplyDelete
  5. waLnuT♣TreeJune 17, 2015 at 11:10 AM

    hmm semoga sukses trus ngeblog nya yah :)

    ReplyDelete
  6. cahyantoJune 17, 2015 at 1:08 PM

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

    ReplyDelete
  7. Ratna AmaliaJune 17, 2015 at 3:09 PM

    Dear Walnut Tree, terima kasih semangatnyahh !

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

    ReplyDelete
  8. Keke NaimaJune 18, 2015 at 3:26 PM

    asiiikk, saya cobain, ah :)

    ReplyDelete
  9. Ratna AmaliaJune 18, 2015 at 4:27 PM

    Biar tambah keren blognya, Chi ^_^

    ReplyDelete
  10. Gun_July 5, 2015 at 5:18 PM

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

    ReplyDelete
  11. www.EenEndah.web.idJuly 12, 2015 at 12:25 PM

    Horeeeeee, aku sudang pasang Mbak Ratna.
    Terima kasih ilmunya

    ReplyDelete
  12. syauqiyaJuly 29, 2015 at 6:24 AM

    makasih tipsnya mbak :)

    ReplyDelete
  13. SusindraDecember 24, 2015 at 11:17 PM

    terima kasih tipsnya Mbak

    ReplyDelete
  14. Listiani Putri LestariJanuary 21, 2016 at 5:52 PM

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

    ReplyDelete
    Replies
    1. RatnaMay 19, 2016 at 11:32 AM

      Masak siy? Kira-kira, stepnya sudah sesuai langkah-langkah di atas?

      Delete
  15. UnknownJune 14, 2016 at 5:56 AM

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

    ReplyDelete
  16. sarahOctober 27, 2016 at 6:13 AM

    Makasih tipsnya ya. Salam kenal

    ReplyDelete
  17. Agus Elmansyah::::February 16, 2018 at 10:26 PM

    makasih banyak kak udah bantu aku bikin feed ig nya, hasinya bisa dilit nih diblog aku https://aguselmansyah.blogspot.co.id hehe

    ReplyDelete
  18. FreejobsrajasthanJanuary 9, 2019 at 5:40 PM

    Makasih tipsnya ya. Salam kenal
    https://freejobsrajasthan.com/haryana-ssc-junior-engineer-online-form/

    ReplyDelete
  19. AmedysaFebruary 26, 2019 at 1:24 PM

    kalo ini kamu pake widget apa yg buat di blog sekarang? tampilannya lebih bagus. aku pake snapwidget soalnya besoknya kalo dicek gamau ketampil lagi, syedihhh.

    ReplyDelete
  20. Bayu PradanaAugust 26, 2019 at 9:48 PM

    Terima kasih infonya Sis.. Saya coba yaa

    ReplyDelete
  21. Bayu PradanaAugust 29, 2019 at 12:40 AM

    Terima kasih ya sudah berbagi tutorial

    ReplyDelete
  22. RibelDecember 16, 2019 at 1:03 PM

    keren banget infonya

    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 !