Cara menampilkan lagu dan album dari embed spotify ke blog

Saat sedang mencari lagu di Google dan salah satu hasil pencariannya menunjukkan situs Spotify, lalu saya kunjungi dan inilah pertama kalinya saya mengenal situs tersebut yang sepertinya ini situs atau aplikasi tempat mendengarkan musik favorit secara gratis.

Dan sebagai Blogger yang hobi tutorial websites saya otomatis scroll kebawah mencari halaman developer untuk mencari tau apa saja yang situs ini tawarkan untuk pengembang, ya seperti umunya semua situs yang ditawarkan tidak jauh-jauh dari tombol-tombolan, embed-embedan, widget, API, SDK, dan lainnya.

Saya tertarik mencoba embed/widget menampilkan Track lagu dan Album ke Blog. Ini cukup berguna buat Blogger yang misalnya bercerita/menyenggol lagu dalam kalimat postingnya, umumnya kita biasa menampilkan video Youtube untuk menunjukkan lagu yang dimaksud dan alternatifnya Spotify juga layak dicoba untuk melakukan itu.

Namun kekurangan Spotify lagunya hanya separuh dan untuk mendengarkan secara full harus mendownload aplikasinya tapi kemungkinan harus bayar agar bisa mendengar secara full, karena di websitenya ada tertulis upgrade ke premium.

Tapi yang membuat saya tertarik tidak hanya dapat menampilkan perlagu tapi dapat juga per-album segaligus yang terdiri dari beberapa lagu, 7/9/12 dan juga kompilasi hingga 50 lagu atau lebih sekaligus dan serunya sekali play semua lagu itu otomatis bersambung. Dari itu saya sempat terpikir ingin kembali mejadi Blogger musik, berbagi lagu hehe.

Cara Menampilkan Lagu dan Album dari situs/app Spotify dengan Embed ke Blog

1. Kunjungi situsnya https://open.spotify.com/ atau aplikasinya lalu pilih lagu atau album yang ingin di embed ke blog. Tap share dan salin urlnya.

Contoh urlnya seperti ini: https://open.spotify.com/user/spotify/playlist/37i9dQZF1DXa2EiKmMLhFD

2. Tempelkan url yang disalin tersebut ke halaman dalam kotak alat konfigurasi di https://developer.spotify.com/documentation/widgets/generate/embe

d/

Atur hal yang diperlukan seperti tinggi dan lebar kode iframenya. Tenang kode iframenya cukup ringan untuk blog sedangkan dari sisi SEO ini hanya masalah soal render-merender atau mesin pencari tidak bisa mengindex konten yang berada dalam bingkai iframe, jadi ini hanya masalah kode iframe yang tidak bisa diindex, tak penting juga kan mengindex iframe.

3. Salin kodenya dan tempel kedalam postingan blog, selesai.

Contoh kodenya ada dua jenis, minimalis dan besar dan tampilan single atau album.

<iframe src="https://open.spotify.com/embed/user/spotify/playlist/37i9dQZF1DXa2EiKmMLhFD" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

<iframe src="https://open.spotify.com/embed/track/7nAfXgeHfDO50upcOjJOaq" width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>

Contoh penampilannya setelah diterapkan ke blog atau dalam postingan.