Mengakali Tampilan Tautan dengan Auto Social Media Previewer
Diterbitkan untuk mempermudah hidup para kreator web.
Pernahkah kamu mengirimkan tautan tulisan epik terbaru di Layar Kosong ke grup obrolan atau *timeline*, tapi yang muncul cuma URL mentah tanpa gambar? **Sangat menyebalkan**, bukan?
Inilah alasan kenapa setiap pembuat konten web dan pegiat media sosial butuh yang namanya alat pembuat *preview* otomatis. Pada dasarnya, platform seperti X, Facebook, dan Mastodon akan memindai *meta tags* tersembunyi (khususnya *Open Graph* dan *Twitter Cards*) yang bersarang di dalam struktur HTML. Jika metadata ini absen atau salah letak, algoritma mereka akan buta.
Namun, mengecek *tag* satu per satu di server sungguh merepotkan. Oleh karena itu, kita memindahkan proses investigasi URL ini langsung ke *frontend* menggunakan API pihak ketiga (seperti Microlink). API ini bertugas menyusup ke URL target, membongkar gambar utama beserta deskripsinya, lalu menyuapkannya kembali ke layar kita dalam hitungan detik.
Uji Coba Langsung di Sini
Daripada sekadar berteori, ~~mari kita rebahan~~ mari kita tes langsung. Masukkan URL artikel apa saja di kotak bawah ini. Skrip yang berjalan di latar akan merender tampilannya menjadi *card* yang sejajar di layar *desktop*, namun otomatis menumpuk rapi kalau kamu membukanya dari HP.
✨ URL Inspector & Share
Tempelkan link, biar skrip yang bekerja.
Kode di Balik Layar
Bagi yang penasaran bagaimana cara gambar-gambar tersebut bisa diklik (*zoom-in* ke ukuran asli) dan tombol berbaginya otomatis terisi, rahasianya ada di cuplikan JavaScript ringkas ini:
// Mengubah gambar menjadi link interaktif
const encodedLink = encodeURIComponent(targetUrl);
document.getElementById('xImg').src = imgUrl;
// Format Pop-up Window untuk Sharing
const shareBtn = `<a href="https://mastodon.social/share?text=${encodedText}%0A%0A${encodedLink}" onclick="window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=600,height=400');return false;"><i class="fa-brands fa-mastodon"></i></a>`;
Desainnya sengaja dibuat *mobile-first* dengan CSS Flexbox (menggunakan `flex-direction: column` sebagai bawaan standar, dan di-*override* menjadi `row` via media query untuk layar lebar). Tanpa perlu *framework* gemuk, performa halaman tetap mulus layaknya jalan tol.