Descoperirea programatică a codului de partajare cu oEmbed

Web-ul este plin de servicii care găzduiesc conținut bogat, cum ar fi videoclipuri, imagini, muzică și podcasturi, hărți și grafice și tot felul de delicii diferite. Sunt șanse ca atunci când adăugați conținutul dvs. pe un site, acesta vă va oferi o modalitate de a încorpora acel conținut într-o pagină web în altă parte.

Site-uri precum YouTube au propriul player încorporabil, care este popular de utilizat în postările de blog și chiar în paginile de produse. Soundcloud are cod pentru a-și încorpora playerul muzical pe site-ul web al trupei tale. Strângerii de fonduri de caritate ar putea să încarce traseul cursei lor mari pe un site precum Strava și să-l distribuie pe site-ul lor de strângere de fonduri pentru a-și arăta sponsorii.

Toate acestea se realizează prin găsirea acelei opțiuni de Partajare pe site-ul de găzduire și copierea unui cod care este în mod normal un amestec de HTML și JavaScript. Acest cod poate fi apoi inserat de obicei în pagina de destinație, iar site-ul de găzduire va prezenta o reprezentare bogată a conținutului pentru ca toți prietenii, clienții și contactele să o vadă.

Până acum, foarte bine, iar aceasta acoperă destul de bine opțiunea pentru încorporarea manuală a conținutului. Există totuși un al doilea caz de utilizare distinct, în care rezultatul este același, dar calea către acesta este foarte diferită.

Partajare programatică

Să ne imaginăm că construiți o aplicație sau un site care acceptă conținut de la un utilizator. Ar putea fi ceva la fel de simplu ca o pagină intranet de bază pentru ca personalul să împărtășească știri colegilor sau ceva masiv, cum ar fi o întreagă rețea socială în care oamenii se pot înscrie și începe să posteze.

În ambele cazuri, trebuie să aflați ce să faceți dacă utilizatorul adaugă o adresă URL ca parte a conținutului respectiv. Vă puteți imagina scenariul:

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

În acest moment, ca sistem de publicare, trebuie să vă dați seama ce să faceți. Prima opțiune este să nu faceți nimic și să lăsați adresa URL ca text simplu. Aceasta nu este o idee genială, deoarece utilizatorii vor dori, în general, să facă clic pe URL, iar textul simplu nu îi va ajuta să ajungă la pagina de la celălalt capăt.

A doua opțiune este să o transformi într-un link. Acesta este un pas următor bun și solid, deoarece utilizatorii pot urma linkul și pot ajunge la conținut. Dar, făcând acest lucru, părăsesc site-ul dvs. și s-ar putea să nu se întoarcă în grabă.

Cea mai bună experiență de utilizator ar putea fi să puteți prelua playerul pentru acel conținut și să-l încorporați chiar acolo în loc de doar adresa URL. Acest lucru le-ar permite utilizatorilor să experimenteze conținutul chiar pe site-ul dvs., la fel ca pe Facebook, de exemplu.

Aceasta pune problema. Având o adresă URL, cum pot transforma aceasta în codul de încorporare HTML/JavaScript necesar pentru a afișa un player bogat pe pagină?

Dacă este un site cunoscut precum YouTube, aș putea scrie un cod care utilizează API-ul YouTube pentru a prelua informațiile video și pentru a obține sau a construi codul de încorporare în acest fel. Aș putea face același lucru pentru alte servicii video precum Vimeo și VIVO. Pot scrie cod pentru a recunoaște URL-urile Flickr și Instagram și pot folosi API-urile lor pentru a obține versiuni frumoase încorporabile ale fotografiilor. Și același lucru pentru Twitter și tweet-uri. Dar asta sună a multă muncă!

Ceea ce ar fi ideal este dacă ar exista o modalitate standardizată de a ajunge de la o adresă URL a unei piese de conținut la un bloc de cod încorporat pentru a afișa acel conținut pe o pagină. Dacă ai fost atent, vei realiza că răspunsul la asta este oEmbed.

Originea lui oEmbed

Aceasta a fost exact problema pe care a avut-o Leah Culver în timp ce lucra la Pownce (un site de rețea socială cu adevărat inovator, care a fost Betamax la VHS de pe Twitter). Pownce a vrut să încorporeze reprezentări bogate ale conținutului în fluxul de actualizare al unui utilizator, dar nu a vrut să limiteze suportul doar la serviciile cu care au scris cod în mod special pentru a se integra. La cina cu colegul Mike Malone, precum și cu Cal Henderson (care a condus inginerie la Flickr - unul dintre furnizorii majori de astfel de conținut la acea vreme) și Richard Crowley, au pus la punct o idee pentru un standard deschis pentru obținerea codului de încorporare de la un URL. Henderson a plecat și a elaborat ceva pe baza discuției și s-a născut oEmbed.

Folosind oEmbed

Iată cum funcționează.

Începe cu adresa URL care indică un singur element de conținut. Acesta ar putea fi un videoclip YouTube, o imagine sau orice altceva. De obicei, acesta va fi furnizat de un utilizator al site-ului sau al aplicației dvs. ca parte a conținutului pe care doresc să îl publice. Primul pas este să preluați conținutul paginii la acea adresă URL, care ar trebui să fie o pagină HTML.

Dacă site-ul care găzduiește conținutul acceptă oEmbed, în secțiunea <head> a acelei pagini ar trebui să existe un element de link cu un tip de conținut 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" />

O notă despre XML: oEmbed acceptă răspunsuri atât în ​​format XML, cât și în format JSON. Pentru acest articol, mă gândesc doar la JSON, pentru că nu suntem sălbatici. Dacă vă aflați în situația nefericită de a trebui să lucrați cu XML, rețineți că este un format acceptat cu specificația oEmbed, deși este posibil să descoperiți că unii furnizori oferă doar răspunsuri JSON.

Această etichetă de legătură ca atribut rel setat la alternate și un type setat la application/json+oembed sau text/xml+oembed . Acest atribut este cel care ne indică faptul că adresa URL dată în href este de fapt un punct final API oEmbed pentru preluarea detaliilor conținutului.

Adresa URL va avea de obicei doi parametri: url și format .

Parametri URL comuni pentru solicitarea inițială a consumatorului

Specificația completă intră în mult mai multe detalii aici (și ar trebui să faceți referire la asta dacă vă creați propria implementare), dar aceștia sunt cei doi parametri pe care probabil îi veți vedea cel mai mult.

Deci, avem o adresă URL, am preluat pagina, am găsit o etichetă de link oEmbed cu o altă adresă URL pentru un punct final API. Apoi, solicităm acea nouă adresă URL și care returnează toate informațiile pe care serviciul trebuie să le furnizeze despre acel conținut.

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

Acum noi vorbim! Răspunsul ne oferă o mulțime de informații despre conținut. version ar trebui să fie, în viitorul apropiat, 1.0 , care este versiunea actuală a specificației oEmbed. Celelalte informații returnate depind în mare măsură de valoarea type .

Tipuri de răspuns

Valoarea cheii de type din răspuns vă spune ce fel de media veți încorpora.

Pe lângă conținutul video dedicat, tipul cel mai obișnuit pe care probabil îl veți vedea în sălbăticie este rich . Chiar și Flickr însuși, deși încă trimite un răspuns photo , furnizează și html pentru un „player” bogat încorporabil pentru imagine.

De cele mai multe ori, încorporarea conținutului în site-ul dvs. este doar un caz de utilizare a codului furnizat ca valoare html .

O notă despre securitate

Un lucru la care s-ar putea să fiți atenți pe bună dreptate este să luați un răspuns HTML și să îl încorporați programatic într-o pagină pe care o găzduiți. Fără pasul uman de a verifica codul pe care îl inserați, există întotdeauna potențialul ca acel cod să fie rău intenționat. Ca atare, ar trebui să luați măsurile adecvate pentru a reduce riscul.

Aceasta ar putea include filtrarea adreselor URL pentru a vă asigura că schemele și domeniile se potrivesc cu cele așteptate și codul sandbox într-un iframe pe un alt domeniu, fără cookie-uri. Ar trebui să accesați situația în care utilizați codul și să vă asigurați că nu vă expuneți la riscuri nejustificate.

Noțiuni de bază

Pe cât de important este să înțelegeți procesul atunci când utilizați oEmbed, realitatea este că majoritatea limbilor comune au biblioteci disponibile care abstrag procesul și îl fac relativ simplu.

De exemplu, pachetul oembed npm oferă o interfață foarte simplă pentru a face o solicitare pe baza URL-ului de conținut și a primi răspunsul oEmbed înapoi.

Mai întâi instalați pachetul în proiectul dvs.:

 npm i oembed

Și apoi solicitați adresa URL. Aici folosesc adresa URL a unei prezentări pe Notist pe care am dat-o despre oEmbed. Cât de 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); });

Si raspunsul:

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

Dacă doriți să faceți același lucru în PHP, un pachet la îndemână numit embed/embed este disponibil pentru a fi instalat prin Composer.

 composer require embed/embed

Și apoi în proiectul dvs. 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>"

După cum puteți vedea, odată cu utilizarea unei biblioteci, procesul devine foarte simplu și puteți trece rapid de la o adresă URL la codul de încorporare, gata să arate o reprezentare bogată a conținutului utilizatorului.

Concluzie

oEmbed este o soluție foarte elegantă pentru o problemă foarte specifică. Ai fi iertat să te gândești că doar câțiva ingineri care lucrează pe rețelele sociale mari ar beneficia de acest lucru, dar, în realitate, sistemele de publicare în care un utilizator ar putea introduce o adresă URL sunt surprinzător de comune. Găsiți-mi un inginer back-end care la un moment dat nu a avut nevoie să construiască un fel de CMS. S-ar putea să nu ne gândim la asta în aceiași termeni, dar dacă acceptați introducerea utilizatorului, ar trebui să vă gândiți ce să faceți dacă acea intrare conține adrese URL.

Acum că știți despre oEmbed (îmi pare rău), nu aveți nicio scuză să nu luați în considerare modul în care gestionați URL-urile în proiectele dvs. viitoare.

• o Specificație de încorporare
• oembed pentru NodeJS
• embed/embed pentru PHP
• „Se anunță OEmbed: un standard deschis pentru conținutul încorporat”, Leah Culver