Thursday, December 8, 2016

Menampilkan Gallery Instagram Pada Blog


Ulasan Singkat
Cara sederhana memasang Instagram pada blog dengan memanfaatkan layanan pihak ketiga.

Instagram, salah satu sosial media berbasis gambar/foto yang juga sangat populer dikalangan netter dimana biasa digunakan untuk memajang atau mengunggah foto-foto. Melihat hal itu, sudah barang tentu hampir semua blogger pasti memiliki akun Instagram, entah memang dihubungkan dengan situs/blog yang dikelola atau sebagai akun personal.

Yang menjadi problem adalah bagaimana memunculkan foto-foto atau lebih tepatnya feeds atau mudahnya sebut saja update dari Instagram di situs/blog. Sebenarnya Instagram sendiri sudah mendukung untuk mengambil atau memanggil resource dari Instagram untuk web, dimana user dapat menyertakan embed pada web berupa postingan di Instagram.

Lalu, bagaimana jika ingin menampilkan full atau semua gambar atau update dari Instagram pada situs/blog yang dikelola?

Untuk memanggil resource Instagram ini sendiri masih cukup rumit implementasinya, dimana harus membuat akses token dan sebagainya.

Solusi paling mudah adalah dengan menggunakan layanan pihak ketiga, yang memang menawarkan layanan generate feeds Instagram dan support untuk dipasang pada web/blog. Layanan pihak ketiga ini sendiri cukup banyak dan memiliki fitur masing-masing. Namun, dari sekian layanan yang tersedia hanya Juicer yang sepertinya mumpuni (untuk saat ini).

Pemasangannya sendiri sangat sederhana dan tidak membingungkan. Anda hanya perlu melakukan registrasi pada Juicer kemudian mengintegrasikan dengan akun Instagram (yang diinginkan) dan akan diminta untuk melakukan otentikasi akses token. Setelah proses pendaftaran dan inetgrasi selesai, Anda bisa menyesuaikan style yang ingin ditampilkan.

Selanjutnya copy kode embed dari Juicer untuk web kemudian paste pada web/blog, bisa dipasang pada widget/elemen atau pada halaman post/page. Tinggal menyesuaikan sesuai keinginan dimana akan dipasang atau ditampilkan feeds Instagram pada web/blog.

Sampai disini sebenarnya sudah selesai, dan Instagram sudah muncul pada web/blog. Hanya saja ada yang kurang (menurut saya) karena terdapat embel-embel dari Juicer berupa iklan (biasanya layanan gratisan memang demikian"menyertakan iklan").

Untuk menghilangkan iklan tersebut juga tergolong sangat mudah, Anda hanya perlu menambahkan css kondisional yang beerfungsi untuk menyembunyikan iklan-iklan tersebut. Dari pengujian yang sudah dilakukan, penambahan css kondisional ini cukup berguna dan hasilnya iklan-iklan Juicer tidak muncul.

Berikut kode css kondisional yang bisa ditambahkan :

<style>
.juicer-feed h1.referral {
display:none;
}
.juicer-feed.white li.feed-item.juicer, .juicer-feed.user li.feed-item.juicer, .juicer-feed.juicer-widget li.feed-item.juicer, .juicer-feed.colors li.feed-item.juicer, .juicer-feed.colored-icons li.feed-item.juicer, .juicer-feed.gray li.feed-item.juicer {
display:none;
}
</style>

Untuk pemasangannya kebetulan pada percobaan menggunakan WordPress dan diletakkan pada halaman, sehingga peletakan kode css kondisional tepat dibawah kode Juicer pada laman. Namun untuk implementasi mungkin akan berbeda, dimana terkadang ada jenis sistem web (CMS) yang tidak mendukung model script seperti diatas, terkadang ada yang mengharuskan untuk peletakan pada are tertentu (khusus css/sript) dan penulisan tag pun kadang berbeda, misal <style> ditulis menjadi <style type="text/css">

Tapi hal itu bukan merupakan hal yang sulit, karena hanya berbeda sedikit saja.

Alternatif lain selain dengan cara diatas adalah menjadikan kode Juicer tersebut berada dalam satu file bersama kode css kondisional, file ini nanti harus diunggah untuk mendapatkan hosting kemudian tinggal melakukan pemanggilan pada url file hosting tersebut.

Total Komentar: 3 comments:

  1. sya baru buat instagram nya sja blm lama mas hahahaa, baru ada 2 foto, untuk domain blog spot otomatis atau harus di tambah script mas ? ... blm buka2 tampilan blog lgi soalnya

    ReplyDelete
    Replies
    1. ssst..jangan bilang -bilang ini artikel lama :)

      Delete
    2. tambahkan script diatas om eka, @djangkaru bumi, haha iya maaf ini artikel setahun yg lalu, saya aktifnya di www.hasan.id, yang ini mau di mapping kesana

      Delete



Copyright © 2017