Skip to main content

Menampilkan Gallery Instagram Pada Blog

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.

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

Post a Comment

Popular posts from this blog

Cara Memasang Iklan Google Adsense Pada Blog AMP

Google Adsense merupakan sebuah jaringan periklanan digital yang disebut-sebut sebagai yang terbesar untuk saat ini mengingat program tersebut adalah milik Google, dan merupakan incaran utama para blogger untuk medapatkan penghasilan tambahan dari situs/blog yang dikelola (dari Youtube juga).

Sekarang ini sedang trend design situs menggunakan AMP yang katanya dioptimalkan untuk pengguna mobile, dan tentu saja hal tersebut menjalar pada para blogger untuk melakukan perombakan situs agar mendukung AMP.

AMP menawarkan banyak hal bagi penggunanya, bahkan untuk penambahan unit adsense pun ada peraturannya. Hal ini tentu saja menjadi keuntungan karena loading akan lebih cepat, namun menyisakan masalah pada pemasangannya. Untuk yang terbiasa jalan-jalan (sebut saja blog walking) pasti sudah menemukan solusi untuk mengatasi masalah ini, tetutara jika sering membaca aturan serta panduan pada AMP.

Cara menulis kode Adsense pada blog AMP
Cara penulisan kode Adsense pada AMP Blogger sangat mudah, d…

Bertemu Kawan Lama

Hehehe,, sebelumnya mohon maaf ya buat teman-teman kalau merasa risih dengan blog ini. Barusan saya membuka email dan ternyata ada yang mengirim email pada saya (maaf tidak bisa saya sebutkan siapa pengirimnya), email tersebut berisi kritikan yang mengatakan blog ini hanya sampah, tidak ada nilai apapun yang bisa didapat dan tidak ada unsur pendidikan atau ilmu yang dapat di ambil. Ya, saya hanya bisa tersenyum saat membaca email tersebut karena faktanya memang seperti itu, dan memang pada awalnya blog ini akan saya gunakan untuk sharing ilmu tapi saya lebih menyukai blog ini sebagai blog personal milik saya seperti saat ini.
Dan kalau memang ada hal yang ingin ditanyakan baik itu seputar HTML, CSS, PHP, CI, atau semacamnya silahkan hubungi saya langsung baik itu melalui pesan singkat, Yahoo messenger, G plus, Facebook atau lewat yang lainnya Isnyaallah akan saya jawab kalau memang saya bisa menjawabnya. Ok, itu sebagai introduce saja karena saya ingin menulis kesenangan saya yang be…

Memasang SSL/HTTPS Pada Blogger Custom Domain

Blogger memang sudah menawarkan fitur atau layanan SSL untuk subdomain blogspot, sehingga para pengguna bisa mengaktifkan SSL/HTTPS melalui halaman pengaturan. Dengan adanya layanan ini tentu merupakan hal yang menyenangkan, terlebih SSL sendiri dikabarkan dapat membantu dalam hal SEO (belum paham untuk hal ini).

Sedangkan untuk pengguna custom domain, Blogger belum memberikan layanan tersebut (mungkin tidak akan mendukungnya sama sekali). Namun, tidak perlu khawatir karena ada layanan pihak ketiga yang bisa dimanfaatkan untuk mengaktifkan SSL/HTTPS pada Blogger custom domain.

Sebenarnya ada dua layanan yang bisa digunakan untuk mengaktifkan atau memasang SSL pada Blogger, yaitu dengan menggunakan Lets Encrypt atau Cloudflare. Namun, dalam hal ini saya membahas penggunaan Cloudflare saja karena jauh lebih mudah proses konfigurasinya.

Untuk mengaktifkan atau menggunakan layanan shared SSL dari Cloudflare, terlebih dulu silahkan mendaftar pada Cloudflare. Setelah proses pendaftaran dan …