oEmbed ile Paylaşım Kodunu Programlı Olarak Keşfetme

Yayınlanan: 2022-03-10

Kısa özet ↬ Birçok site, bazı HTML yerleştirme kodlarının kullanılmasıyla başka bir yerde paylaşılabilen medya ve içerik barındırmıştır. Yalnızca öğenin URL'sine sahipseniz ve insan müdahalesi olmadan ortamın yerleştirilebilir bir sürümünü bulmanız gerekiyorsa ne olur? OEmbed'in devreye girdiği yer burasıdır.

Web, videolar, resimler, müzik ve podcast'ler, haritalar ve grafikler gibi zengin içeriği ve her türlü farklı zevki barındıran hizmetlerle doludur. Büyük olasılıkla, içeriğinizi bir siteye eklediğinizde, o içeriği başka bir web sayfasına gömmek için size bir yol sunacaktır.

YouTube gibi sitelerin, blog gönderilerinde ve hatta ürün sayfalarında kullanımı popüler olan kendi gömülü oynatıcıları vardır. Soundcloud, müzik çalarınızı grubunuzun web sitesine yerleştirmek için koda sahiptir. Hayır kurumları, büyük yarışlarının rotasını Strava gibi bir siteye yükleyebilir ve sponsorlarını göstermek için bağış toplama sitelerinde paylaşmak isteyebilir.

Tüm bunlar, barındırma sitesindeki Paylaş seçeneğini bularak ve normalde HTML ve JavaScript karışımı olan bazı kodları kopyalayarak yapılır. Bu kod daha sonra genellikle hedef sayfaya yapıştırılabilir ve barındırma sitesi, tüm arkadaşlarınız, müşterileriniz ve kişilerinizin görmesi için içeriğin zengin bir sunumunu sunar.

Şimdiye kadar, çok iyi ve bu, içeriğin manuel olarak gömme seçeneğini oldukça iyi kapsıyor. Bununla birlikte, sonucun aynı olduğu ancak buna giden yolun çok farklı olduğu belirgin bir ikinci kullanım durumu vardır.

Atlamadan sonra daha fazlası! Aşağıdan okumaya devam edin ↓

Programlı Olarak Paylaşma

Bir kullanıcıdan içerik kabul eden bir uygulama veya site oluşturduğunuzu düşünelim. Bu, personelin iş arkadaşlarıyla haber paylaşması için basit bir intranet sayfası kadar basit bir şey veya insanların kaydolup gönderi göndermeye başlayabileceği tüm bir sosyal ağ gibi devasa bir şey olabilir.

Her iki durumda da, kullanıcı bu içeriğin bir parçası olarak bir URL eklerse ne yapacağınızı bulmanız gerekir. Senaryoyu hayal edebilirsiniz:

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

Bu noktada bir yayıncılık sistemi olarak ne yapmanız gerektiğini bulmanız gerekiyor. İlk seçenek hiçbir şey yapmamak ve URL'yi düz metin olarak bırakmaktır. Kullanıcılar genellikle URL'yi tıklamak isteyeceklerinden ve düz metin diğer uçtaki sayfaya ulaşmalarına yardımcı olmayacağından bu harika bir fikir değil.

İkinci seçenek, onu bir bağlantıya dönüştürmektir. Kullanıcılar bağlantıyı takip edip içeriğe ulaşabileceğinden, bu iyi bir sonraki adımdır. Ancak bunu yaparken sitenizden ayrılırlar ve aceleyle geri dönmeyebilirler.

En iyi kullanıcı deneyimi, söz konusu içerik için oynatıcıyı getirebilmek ve onu yalnızca URL yerine tam olarak oraya yerleştirebilmek olabilir. Bu, kullanıcıların, örneğin Facebook'ta olduğu gibi, içeriği doğrudan sitenizin içinde deneyimlemelerini sağlar.

Bu sorun teşkil etmektedir. Bir URL verildiğinde, bunu sayfada zengin bir oynatıcıyı göstermek için gereken HTML/JavaScript yerleştirme koduna nasıl dönüştürebilirim?

YouTube gibi bilinen bir siteyse, video bilgilerini almak ve yerleştirme kodunu bu şekilde almak veya oluşturmak için YouTube API'sini kullanan bir kod yazabilirim. Aynı şeyi Vimeo ve VIVO gibi diğer video hizmetleri için de yapabilirim. Flickr ve Instagram URL'lerini tanımak için kod yazabilir ve fotoğrafların güzel gömülebilir sürümlerini getirmek için API'lerini kullanabilirim. Aynı şey Twitter ve tweetler için de geçerli. Ama bu kulağa çok iş gibi geliyor!

İdeal olan, bir içeriğin URL'sinden o içeriği bir sayfada göstermek için bir yerleştirme kodu bloğuna almanın standart bir yolu olsaydı. Dikkat ettiyseniz, bunun cevabının oEmbed olduğunu anlayacaksınız.

oEmbed'in Kökeni

Bu tam olarak Leah Culver'ın Pownce (Twitter'ın VHS'sinin Betamax'ı olan gerçekten yenilikçi bir sosyal ağ sitesi) üzerinde çalışırken yaşadığı sorundu. Pownce, zengin içerik temsillerini bir kullanıcının güncelleme akışına yerleştirmek istedi, ancak desteği yalnızca entegre etmek için özel olarak kod yazdıkları hizmetlerle sınırlamak istemedi. Meslektaşları Mike Malone, Cal Henderson (o zamanlar bu tür içeriğin en büyük sağlayıcılarından biri olan Flickr'da mühendislik lideriydi) ve Richard Crowley ile birlikte, gömme kodu almak için açık bir standart için bir fikir geliştirdiler. bir URL. Henderson gitti ve tartışmaya dayanarak bir şeyler hazırladı ve oEmbed doğdu.

oEmbed'i kullanma

İşte nasıl çalıştığı.

Tek bir içerik öğesine işaret eden URL ile başlar. Bu bir YouTube videosu, bir resim veya herhangi bir şey olabilir. Genellikle bu, sitenizin veya uygulamanızın bir kullanıcısı tarafından yayınlamak istedikleri bazı içeriğin bir parçası olarak sağlanır. İlk adım, bir HTML sayfası olması gereken o URL'deki sayfanın içeriğini getirmektir.

İçeriği barındıran site oEmbed'i destekliyorsa, o sayfanın <head> bölümünde oembed içerik türüne sahip bir link öğesi bulunmalıdır:

 <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" />

XML hakkında bir not: oEmbed, hem XML hem de JSON biçimindeki yanıtları destekler. Bu makale için sadece JSON'u düşünüyorum çünkü vahşi değiliz. Şanssız bir konumdaysanız, XML ile çalışmanız gerekecekse, bazı sağlayıcıların yalnızca JSON yanıtları sunduğunu görseniz de, bunun oEmbed özelliğiyle desteklenen bir biçim olduğunu unutmayın.

Bu bağlantı etiketi, rel özniteliği olarak alternate olarak ayarlanmıştır ve bir type , application/json+oembed veya text/xml+oembed . href verilen URL'nin aslında içeriğin ayrıntılarını almak için bir oEmbed API uç noktası olduğu konusunda bize ipucu veren bu özelliktir.

Bu URL'nin genellikle iki parametresi olacaktır: url ve format .

Parametre	Değer
`url` (gerekli)	İçerik öğesinin URL kodlu web adresi
`format`	Yanıtın olmasını istediğiniz biçim. `xml` `json`

İlk tüketici isteği için ortak URL parametreleri

Tam belirtim burada çok daha fazla ayrıntıya giriyor (ve kendi uygulamanızı oluşturuyorsanız buna atıfta bulunmalısınız), ancak bunlar muhtemelen en çok göreceğiniz iki parametredir.

Böylece, bir URL'miz var, sayfayı getirdik, bir API uç noktası için başka bir URL'ye sahip bir oEmbed bağlantı etiketi bulduk. Ardından, yeni URL'yi talep ediyoruz ve bu, hizmetin bu içerik parçası hakkında sağlaması gereken tüm bilgileri döndürüyor.

 { "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 }

Şimdi konuşuyoruz! Yanıt bize içerik hakkında birçok bilgi verir. version , öngörülebilir gelecek için oEmbed spesifikasyonunun mevcut sürümü olan 1.0 olmalıdır. Döndürülen diğer bilgiler büyük ölçüde type değerine bağlıdır.

Yanıt Türleri

Yanıttaki type anahtarının değeri, ne tür medya gömeceğinizi söyler.

`type` değeri	Ne bekleyebileceğinizi
`photo`	Temel bir `img` etiketi için kullanılabilecek bir `url` , `width` ve `height` sunan statik bir fotoğraf
`video`	`width` ve `height` olmasına rağmen, bir oynatıcıyı bir sayfaya yerleştirmek için gereken kodu belirten `html` içeren bir video oynatıcı
`link`	Bu içerikle başa çıkmanın en iyi yolu, sonuçta sadece bir bağlantı sağlamaktır. Yanıt, başlık gibi başka yararlı bilgilere sahip olabilir, ancak yalnızca bağlantılı olması gerekir.
`rich`	Video türü gibi `html` , `width` ve `height` döndüren bir tür zengin içerik oynatıcı

Özel video içeriğinin yanı sıra, vahşi doğada görmeniz muhtemel olan daha yaygın tür rich . Flickr'ın kendisi bile bir photo yanıtı gönderirken, görüntü için de zengin bir gömülebilir 'oynatıcı' için html sağlar.

Çoğu zaman, içeriği sitenize gömmek, html değeri olarak sağlanan kodu kullanmaktan başka bir şey değildir.

Güvenlik Üzerine Bir Not

Haklı olarak dikkatli olabileceğiniz bir şey, bir HTML yanıtı almak ve onu programlı olarak barındırdığınız bir sayfaya gömmektir. Yapıştırdığınız kodu tekrar kontrol etmek için insan adımı olmadan, bu kodun kötü niyetli olma olasılığı her zaman vardır. Bu nedenle, riski azaltmak için uygun adımları atmalısınız.

Bu, şemaların ve etki alanlarının beklenenlerle eşleştiğinden emin olmak için URL'leri filtrelemeyi ve kodu farklı, çerezsiz bir etki alanındaki bir iframe'e koruma altına almayı içerebilir. Kodu kullandığınız duruma erişmeli ve kendinizi gereksiz risklere maruz bırakmadığınızdan emin olmalısınız.

Başlarken

oEmbed kullanırken süreci anlamak kadar önemli olan gerçek şu ki, çoğu yaygın dilde, süreci soyutlayan ve nispeten basitleştiren kütüphaneler bulunur.

Örneğin, npm paketlenmiş oembed, içerik URL'sine dayalı bir istek yapmak ve karşılığında oEmbed yanıtını geri almak için çok basit bir arayüz sağlar.

İlk önce paketi projenize kurun:

 npm i oembed

Ve sonra URL'yi isteyin. Burada oEmbed hakkında verdiğim Notist sunumunun URL'sini kullanıyorum. Ne çok 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); });

Ve cevap:

 { 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 }

Aynısını PHP'de yapmak istiyorsanız, Composer aracılığıyla yüklemek için embed/embed adlı kullanışlı bir paket mevcuttur.

 composer require embed/embed

Ve sonra PHP projenizde:

 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>"

Gördüğünüz gibi, bir kitaplığın kullanılmasıyla süreç çok basitleşir ve bir URL'den gömme koduna hızlı bir şekilde ulaşabilirsiniz, kullanıcının içeriğinin zengin bir temsilini göstermeye hazırsınız.

Çözüm

oEmbed, çok özel bir soruna çok zarif bir çözümdür. Büyük sosyal ağlarda çalışan sadece birkaç mühendisin bundan faydalanacağını düşündüğünüz için affedilirsiniz, ancak gerçekte, bir kullanıcının bir URL girebileceği yayınlama sistemleri şaşırtıcı derecede yaygındır. Bana bir noktada bir tür CMS oluşturmaya ihtiyaç duymayan bir arka uç mühendisi bulun. Bunu aynı terimlerle düşünmeyebiliriz, ancak kullanıcı girişini kabul ederseniz, bu giriş URL'ler içeriyorsa ne yapacağınızı düşünmelisiniz.

Artık oEmbed hakkında bilgi sahibi olduğunuza göre (üzgünüm), gelecekteki projelerinizde URL'leri nasıl ele alacağınızı ciddi olarak düşünmemek için hiçbir mazeretiniz yok.

o Gömme özelliği
NodeJS için oembed
PHP için gömme/gömme
“OEmbed: Gömülü İçerik için Açık Bir Standart Duyurusu,” Leah Culver