Menemukan Kode Berbagi Secara Terprogram Dengan oEmbed

Web penuh dengan layanan yang menampung konten kaya seperti video, gambar, musik dan podcast, peta dan grafik, dan segala macam kesenangan yang berbeda. Kemungkinannya adalah, ketika Anda menambahkan konten Anda ke situs, itu akan menawarkan Anda cara untuk menyematkan konten itu di halaman web di tempat lain.

Situs seperti YouTube memiliki pemutar yang dapat disematkan sendiri yang populer digunakan di postingan blog dan bahkan halaman produk. Soundcloud memiliki kode untuk menyematkan pemutar musik mereka di situs web band Anda. Penggalang dana amal mungkin mengunggah rute balapan besar mereka ke situs seperti Strava, dan ingin membagikannya di situs penggalangan dana mereka untuk menunjukkan kepada sponsor mereka.

Semua ini dilakukan dengan menemukan opsi Bagikan di situs hosting dan menyalin beberapa kode yang biasanya merupakan campuran HTML dan JavaScript. Kode tersebut biasanya dapat ditempelkan ke halaman tujuan, dan situs hosting akan menyajikan representasi konten yang kaya untuk dilihat semua teman, pelanggan, dan kontak Anda.

Sejauh ini, sangat bagus, dan ini mencakup opsi untuk menyematkan konten secara manual dengan cukup baik. Namun, ada kasus penggunaan kedua yang berbeda, di mana hasilnya sama tetapi rutenya sangat berbeda.

Berbagi Secara Terprogram

Bayangkan Anda sedang membangun aplikasi atau situs yang menerima konten dari pengguna. Itu bisa menjadi sesuatu yang sederhana seperti halaman intranet dasar bagi staf untuk berbagi berita dengan rekan kerja, atau sesuatu yang besar seperti seluruh jaringan sosial di mana orang dapat mendaftar dan mulai memposting.

Dalam kedua kasus tersebut, Anda perlu mencari tahu apa yang harus dilakukan jika pengguna menambahkan URL sebagai bagian dari konten tersebut. Anda dapat membayangkan skenarionya:

 Check out this video! https://youtu.be/jw7bRnFbwAI

Pada titik ini, sebagai sistem penerbitan, Anda perlu mencari tahu apa yang harus dilakukan. Opsi pertama adalah tidak melakukan apa-apa, dan membiarkan URL sebagai teks biasa. Itu bukan ide yang brilian, karena pengguna umumnya ingin mengklik URL dan teks biasa tidak akan membantu mereka membuka halaman di ujung yang lain.

Opsi kedua adalah mengubahnya menjadi tautan. Itu langkah selanjutnya yang bagus, karena pengguna dapat mengikuti tautan dan membuka konten. Namun dengan melakukan itu, mereka meninggalkan situs Anda dan mungkin tidak kembali dengan tergesa-gesa.

Pengalaman pengguna terbaik mungkin dapat mengambil pemutar untuk konten itu dan menyematkannya di sana, bukan hanya URL. Itu akan memungkinkan pengguna untuk merasakan konten langsung di dalam situs Anda, seperti yang mereka lakukan di Facebook, misalnya.

Ini menimbulkan masalah. Diberikan URL, bagaimana saya bisa mengubahnya menjadi kode sematan HTML/JavaScript yang diperlukan untuk menampilkan pemutar kaya di halaman?

Jika itu adalah situs yang dikenal seperti YouTube, saya dapat menulis beberapa kode yang menggunakan API YouTube untuk mengambil informasi video dan mendapatkan atau membuat kode semat seperti itu. Saya dapat melakukan hal yang sama untuk layanan video lain seperti Vimeo dan VIVO. Saya dapat menulis kode untuk mengenali URL Flickr dan Instagram dan menggunakan API mereka untuk mengambil versi foto yang dapat disematkan. Dan hal yang sama untuk Twitter dan tweet. Tapi ini terdengar seperti banyak pekerjaan!

Apa yang ideal adalah jika ada cara standar untuk mendapatkan dari URL bagian konten ke blok kode sematan untuk menampilkan konten itu di halaman. Jika Anda telah memperhatikan, Anda akan menyadari bahwa jawabannya adalah oEmbed.

Asal Usul oEmbed

Ini persis masalah yang dimiliki Leah Culver saat mengerjakan Pownce (situs jejaring sosial yang benar-benar inovatif yang merupakan Betamax untuk VHS Twitter). Pownce ingin menyematkan representasi konten yang kaya ke dalam aliran pembaruan pengguna, tetapi tidak ingin membatasi dukungan hanya pada layanan yang secara khusus mereka tulis kodenya untuk diintegrasikan. Saat makan malam dengan kolega Mike Malone, serta Cal Henderson (yang memimpin teknik di Flickr — salah satu penyedia utama konten semacam itu pada saat itu) dan Richard Crowley, mereka bersama-sama menyusun ide untuk standar terbuka untuk mendapatkan kode sematan dari sebuah URL. Henderson pergi dan menyusun sesuatu berdasarkan diskusi, dan oEmbed lahir.

Menggunakan oEmbed

Berikut cara kerjanya.

Itu dimulai dengan URL yang menunjuk ke satu item konten. Itu mungkin video YouTube, gambar, atau apa pun. Biasanya ini akan disediakan oleh pengguna situs atau aplikasi Anda sebagai bagian dari beberapa konten yang ingin mereka publikasikan. Langkah pertama adalah mengambil konten halaman di URL tersebut, yang seharusnya merupakan halaman HTML.

Jika situs yang menghosting konten mendukung oEmbed, di bagian <head> halaman itu harus ada elemen link dengan jenis konten oembed :

 <link rel="alternate" type="application/json+oembed" href="https://youtube.com/oembed?url=https%3A%2F%2Fyoutu.be%2Fjw7bRnFbwAI&format=json" title="Inclusive Components with Heydon Pickering" />

Catatan tentang XML: oEmbed mendukung respons dalam format XML dan JSON. Untuk artikel ini, saya hanya mempertimbangkan JSON, karena kami bukan orang liar. Jika Anda berada dalam posisi yang tidak menguntungkan untuk bekerja dengan XML, ketahuilah bahwa ini adalah format yang didukung dengan spesifikasi oEmbed, meskipun Anda mungkin menemukan bahwa beberapa penyedia hanya menawarkan respons JSON.

Tag tautan ini sebagai atribut rel disetel ke alternate dan type disetel ke application/json+oembed atau text/xml+oembed . Atribut inilah yang memberi petunjuk kepada kita tentang fakta bahwa URL yang diberikan dalam href sebenarnya adalah titik akhir API oEmbed untuk mengambil detail konten.

URL itu biasanya memiliki dua parameter: url dan format .

Parameter URL umum untuk permintaan konsumen awal

Spesifikasi lengkap membahas lebih detail di sini (dan Anda harus merujuknya jika membuat implementasi Anda sendiri) tetapi ini adalah dua parameter yang mungkin paling sering Anda lihat.

Jadi, kami memiliki URL, mengambil halaman, menemukan tag tautan oEmbed dengan URL lain untuk titik akhir API. Selanjutnya, kami meminta URL baru itu, dan itu mengembalikan semua informasi yang harus disediakan layanan tentang konten itu.

 { "author_name": "Smashing Magazine", "width": 480, "title": "Smashing TV: Inclusive Components with Heydon Pickering (Nov 7th 2019)", "provider_name": "YouTube", "height": 270, "html": "<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/jw7bRnFbwAI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>", "provider_url": "https://www.youtube.com/", "thumbnail_url": "https://i.ytimg.com/vi/jw7bRnFbwAI/hqdefault.jpg", "type": "video", "thumbnail_height": 360, "author_url": "https://www.youtube.com/channel/UCSDtqcJ8ZXviPrEcj1vuLiQ", "version": "1.0", "thumbnail_width": 480 }

Sekarang kita sedang berbicara! Tanggapannya memberi kami banyak informasi tentang kontennya. version untuk masa mendatang harus 1.0 , yang merupakan versi saat ini dari spesifikasi oEmbed. Informasi lain yang dikembalikan sangat bergantung pada nilai type .

Tipe Respons

Nilai kunci type dalam respons memberi tahu Anda jenis media apa yang akan Anda sematkan.

Selain konten video khusus, jenis yang lebih umum yang mungkin Anda lihat di alam liar adalah rich . Bahkan Flickr sendiri, saat masih mengirimkan respons photo , juga menyediakan html untuk 'pemutar' yang dapat disematkan untuk gambar juga.

Sebagian besar waktu, menyematkan konten di situs Anda hanyalah kasus penggunaan kode yang diberikan sebagai nilai html .

Catatan Tentang Keamanan

Satu hal yang mungkin perlu Anda waspadai adalah mengambil respons HTML dan menyematkannya secara terprogram ke halaman yang Anda host. Tanpa langkah manusia untuk memeriksa ulang kode yang Anda tempel, selalu ada potensi kode itu berbahaya. Karena itu, Anda harus mengambil langkah-langkah yang tepat untuk mengurangi risiko.

Itu mungkin termasuk memfilter URL untuk memastikan skema dan domain cocok dengan yang diharapkan, dan memasukkan kode ke dalam iframe pada domain tanpa cookie yang berbeda. Anda harus mengakses situasi di mana Anda menggunakan kode dan memastikan bahwa Anda tidak mengekspos diri Anda pada risiko yang tidak semestinya.

Mulai

Sama pentingnya dengan memahami proses saat menggunakan oEmbed, kenyataannya adalah bahwa sebagian besar bahasa umum memiliki perpustakaan yang tersedia yang mengabstraksikan proses dan membuatnya relatif sederhana.

Misalnya, oembed yang dikemas dalam npm menyediakan antarmuka yang sangat sederhana untuk membuat permintaan berdasarkan URL konten dan mendapatkan respons oEmbed sebagai balasannya.

Pertama-tama instal paket ke dalam proyek Anda:

 npm i oembed

Dan kemudian meminta URL. Di sini saya menggunakan URL presentasi di Notist yang saya berikan tentang oEmbed. Betapa sangat meta.

 const oembed = require('oembed'); const url = 'https://noti.st/drewm/ZOFFfI'; oembed.fetch(url, { maxwidth: 1920 }, function(error, result) { if (error) console.error(error); else console.log("oEmbed result", result); });

Dan tanggapannya:

 { type: 'rich', version: '1.0', title: 'Understanding oEmbed', author_name: 'Drew McLellan', author_url: 'https://noti.st/drewm', provider_name: 'Notist', provider_url: 'https://noti.st', cache_age: 604800, thumbnail_url: 'https://on.notist.cloud/slides/deck4179/large-0.png', thumbnail_width: 1600, thumbnail_height: 900, html: '<p data-notist="drewm/ZOFFfI">View <a href="https://noti.st/drewm/ZOFFfI">Understanding oEmbed</a> on Notist.</p><script async src="https://on.notist.cloud/embed/002.js"></script>', width: 960, height: 540 }

Jika Anda ingin melakukan hal yang sama di PHP, paket praktis bernama embed/embed tersedia untuk diinstal melalui Composer.

 composer require embed/embed

Dan kemudian di proyek PHP Anda:

 use Embed\Embed; $info = Embed::create('https://noti.st/drewm/ZOFFfI'); $info->title; // "Understanding oEmbed" $info->authorName; // "Drew McLellan $info->code; // "<p data-notist="drewm/ZOFFfI"> ... </script>"

Seperti yang Anda lihat, dengan penggunaan pustaka, prosesnya menjadi sangat sederhana dan Anda bisa dengan cepat mendapatkan dari URL ke kode sematan, siap untuk menampilkan representasi konten pengguna yang kaya.

Kesimpulan

oEmbed adalah solusi yang sangat elegan untuk masalah yang sangat spesifik. Anda akan dimaafkan jika berpikir bahwa hanya beberapa insinyur yang bekerja di jejaring sosial besar yang akan mendapat manfaat dari ini, tetapi pada kenyataannya, sistem penerbitan di mana pengguna dapat memasukkan URL secara mengejutkan umum terjadi. Temukan saya satu back-end engineer yang pada titik tertentu tidak perlu membangun semacam CMS. Kami mungkin tidak memikirkannya dalam istilah yang sama, tetapi jika Anda menerima masukan pengguna, Anda harus memikirkan apa yang harus dilakukan jika masukan itu berisi URL.

Sekarang Anda tahu tentang oEmbed (maaf) Anda tidak punya alasan untuk tidak memberikan pertimbangan serius tentang bagaimana Anda menangani URL di proyek masa depan Anda.

• oSematkan spesifikasi
• oembed untuk NodeJS
• sematkan/sematkan untuk PHP
• “Mengumumkan OEmbed: Standar Terbuka untuk Konten Tersemat,” Leah Culver