Rilevamento del codice di condivisione a livello di codice con oEmbed

Il Web è pieno di servizi che ospitano contenuti ricchi come video, immagini, musica e podcast, mappe e grafici e ogni sorta di delizie diverse. È probabile che quando aggiungi i tuoi contenuti a un sito, ti offrirà un modo per incorporare quel contenuto in una pagina web da qualche altra parte.

Siti come YouTube hanno il proprio lettore incorporabile che è popolare da utilizzare nei post del blog e persino nelle pagine dei prodotti. Soundcloud ha un codice per incorporare il loro lettore musicale nel sito web della tua band. Le raccolte fondi di beneficenza potrebbero caricare il percorso della loro grande corsa su un sito come Strava e volerlo condividere sul loro sito di raccolta fondi per mostrare i loro sponsor.

Tutto ciò viene fatto trovando l'opzione Condividi sul sito di hosting e copiando del codice che normalmente è un mix di HTML e JavaScript. Quel codice può quindi essere solitamente incollato nella pagina di destinazione e il sito di hosting presenterà una ricca rappresentazione del contenuto che tutti i tuoi amici, clienti e contatti possono vedere.

Fin qui tutto bene, e questo copre abbastanza bene l'opzione per l'incorporamento manuale dei contenuti. Esiste tuttavia un secondo caso d'uso distinto, in cui il risultato è lo stesso ma il percorso per raggiungerlo è molto diverso.

Condivisione a livello di programmazione

Immaginiamo che tu stia creando un'app o un sito che accetta contenuti da un utente. Potrebbe essere qualcosa di semplice come una pagina intranet di base in cui il personale può condividere notizie con i colleghi o qualcosa di enorme come un intero social network in cui le persone possono registrarsi e iniziare a pubblicare.

In entrambi i casi, devi capire cosa fare se l'utente aggiunge un URL come parte di quel contenuto. Potete immaginare lo scenario:

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

A questo punto, come sistema editoriale, devi capire cosa fare. La prima opzione è non fare nulla e lasciare l'URL come testo normale. Non è un'idea brillante, poiché gli utenti generalmente vorranno fare clic sull'URL e il testo normale non li aiuterà a raggiungere la pagina dall'altra parte.

La seconda opzione è trasformarlo in un collegamento. Questo è un buon passo successivo, poiché gli utenti possono seguire il collegamento e accedere al contenuto. Ma così facendo, lasciano il tuo sito e potrebbero non tornare in fretta.

La migliore esperienza utente potrebbe essere quella di essere in grado di recuperare il lettore per quel contenuto e incorporarlo proprio lì invece del solo URL. Ciò consentirebbe agli utenti di sperimentare il contenuto direttamente all'interno del tuo sito, proprio come farebbero su Facebook, ad esempio.

Questo pone il problema. Dato un URL, come posso trasformarlo nel codice di incorporamento HTML/JavaScript necessario per mostrare un rich player sulla pagina?

Se è un sito noto come YouTube, potrei scrivere del codice che utilizza l'API di YouTube per recuperare le informazioni sul video e ottenere o creare il codice di incorporamento in questo modo. Potrei fare lo stesso per altri servizi video come Vimeo e VIVO. Posso scrivere codice per riconoscere gli URL di Flickr e Instagram e utilizzare le loro API per recuperare belle versioni incorporabili di fotografie. E lo stesso per Twitter e tweet. Ma questo suona come un sacco di lavoro!

L'ideale sarebbe se esistesse un modo standardizzato per passare da un URL di un contenuto a un blocco di codice di incorporamento per mostrare quel contenuto su una pagina. Se hai prestato attenzione, ti renderai conto che la risposta è oEmbed.

L'origine di oEmbed

Questo era esattamente il problema che Leah Culver ha avuto mentre lavorava su Pownce (un sito di social networking davvero innovativo che era il Betamax del VHS di Twitter). Pownce voleva incorporare ricche rappresentazioni del contenuto nel flusso di aggiornamento di un utente, ma non voleva limitare il supporto ai soli servizi con cui avevano scritto codice specifico per integrarsi. A cena con il collega Mike Malone, così come Cal Henderson (che guidava l'ingegneria di Flickr, uno dei maggiori fornitori di tali contenuti all'epoca) e Richard Crowley, hanno elaborato insieme un'idea per uno standard aperto per ottenere il codice di incorporamento da un URL. Henderson è andato via e ha redatto qualcosa in base alla discussione, ed è nato oEmbed.

Utilizzo di oEmbed

Ecco come funziona.

Inizia con l'URL che punta a un singolo elemento di contenuto. Potrebbe essere un video di YouTube, un'immagine o altro. In genere questo sarà stato fornito da un utente del tuo sito o app come parte di alcuni contenuti che desidera pubblicare. Il primo passo è recuperare il contenuto della pagina in quell'URL, che dovrebbe essere una pagina HTML.

Se il sito che ospita il contenuto supporta oEmbed, nella sezione <head> di quella pagina dovrebbe essere presente un elemento di link con un tipo di contenuto 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" />

Una nota su XML: oEmbed supporta le risposte sia in formato XML che JSON. Per questo articolo, sto solo considerando JSON, perché non siamo selvaggi. Se ti trovi nella sfortunata posizione di dover lavorare con XML, tieni presente che si tratta di un formato supportato con le specifiche oEmbed, anche se potresti scoprire che alcuni provider offrono solo risposte JSON.

Questo tag di collegamento come attributo rel è impostato su alternate e un type impostato su application/json+oembed o text/xml+oembed . È questo attributo che ci suggerisce il fatto che l'URL fornito in href è in realtà un endpoint dell'API oEmbed per recuperare i dettagli del contenuto.

Quell'URL avrà solitamente due parametri: url e format .

Parametri URL comuni per la richiesta del consumatore iniziale

Le specifiche complete entrano molto più in dettaglio qui (e dovresti fare riferimento a questo se crei la tua implementazione) ma questi sono i due parametri che probabilmente vedrai di più.

Quindi, abbiamo un URL, abbiamo recuperato la pagina, trovato un tag di collegamento oEmbed con un altro URL per un endpoint API. Successivamente, richiediamo quel nuovo URL e questo restituisce tutte le informazioni che il servizio deve fornire su quel contenuto.

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

Ora stiamo parlando! La risposta ci fornisce molte informazioni sul contenuto. La version dovrebbe essere per il prossimo futuro 1.0 , che è la versione corrente delle specifiche oEmbed. Le altre informazioni restituite dipendono in gran parte dal valore di type .

Tipi di risposta

Il valore della chiave di type nella risposta ti dice che tipo di media incorporerai.

A parte i contenuti video dedicati, il tipo più comune che probabilmente vedrai in natura è rich . Anche Flickr stesso, pur inviando una photo di risposta, fornisce anche html per un ricco "lettore" incorporabile per l'immagine.

Il più delle volte, l'incorporamento del contenuto nel tuo sito è solo un caso di utilizzo del codice fornito come valore html .

Una nota sulla sicurezza

Una cosa di cui potresti essere giustamente cauto è prendere una risposta HTML e incorporarla a livello di codice in una pagina che ospiti. Senza il passaggio umano per ricontrollare il codice che stai incollando, c'è sempre la possibilità che quel codice sia dannoso. Pertanto, dovresti adottare le misure appropriate per mitigare il rischio.

Ciò potrebbe includere il filtraggio degli URL per assicurarsi che gli schemi e i domini corrispondano a quelli previsti e il codice sandboxing in un iframe su un dominio diverso senza cookie. Dovresti accedere alla situazione in cui stai utilizzando il codice e assicurarti di non esporre te stesso a rischi indebiti.

Iniziare

Per quanto importante sia comprendere il processo quando si utilizza oEmbed, la realtà è che i linguaggi più comuni hanno librerie disponibili che astraggono il processo e lo rendono relativamente semplice.

Ad esempio, il pacchetto oembed npm fornisce un'interfaccia molto semplice per effettuare una richiesta basata sull'URL del contenuto e ottenere in cambio la risposta oEmbed.

Per prima cosa installa il pacchetto nel tuo progetto:

 npm i oembed

E quindi richiedere l'URL. Qui sto usando l'URL di una presentazione su Notist che ho fornito su oEmbed. Come molto 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); });

E la risposta:

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

Se volevi fare lo stesso in PHP, un pratico pacchetto chiamato embed/embed è disponibile per l'installazione tramite Composer.

 composer require embed/embed

E poi nel tuo progetto PHP:

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

Come puoi vedere, con l'uso di una libreria il processo diventa molto semplice e puoi passare rapidamente da un URL al codice di incorporamento, pronto per mostrare una ricca rappresentazione del contenuto dell'utente.

Conclusione

oEmbed è una soluzione molto elegante per un problema molto specifico. Saresti perdonato se pensi che solo pochi ingegneri che lavorano su grandi social network ne trarrebbero vantaggio, ma in realtà i sistemi di pubblicazione in cui un utente potrebbe inserire un URL sono sorprendentemente comuni. Trovami un ingegnere di back-end che a un certo punto non ha avuto bisogno di costruire una sorta di CMS. Potremmo non pensarlo negli stessi termini, ma se accetti l'input dell'utente, dovresti pensare a cosa fare se quell'input contiene URL.

Ora che conosci oEmbed (scusate) non avete scuse per non prendere in seria considerazione il modo in cui gestite gli URL nei vostri progetti futuri.

• oIncorpora specifica
• oembed per NodeJS
• incorporare/incorporare per PHP
• "Annunciando OEmbed: uno standard aperto per i contenuti incorporati", Leah Culver