Descubrir código compartido programáticamente con oEmbed

La web está llena de servicios que alojan contenido enriquecido, como videos, imágenes, música y podcasts, mapas y gráficos, y todo tipo de delicias diferentes. Lo más probable es que, cuando agregue su contenido a un sitio, le ofrezca una forma de incrustar ese contenido en una página web en otro lugar.

Los sitios como YouTube tienen su propio reproductor integrado que es popular para usar en publicaciones de blog e incluso en páginas de productos. Soundcloud tiene un código para incrustar su reproductor de música en el sitio web de tu banda. Los recaudadores de fondos de caridad pueden subir la ruta de su gran carrera a un sitio como Strava y querer compartirla en su sitio de recaudación de fondos para mostrársela a sus patrocinadores.

Todo esto se hace encontrando la opción Compartir en el sitio de alojamiento y copiando un código que normalmente es una mezcla de HTML y JavaScript. Ese código generalmente se puede pegar en la página de destino, y el sitio de alojamiento presentará una rica representación del contenido para que la vean todos sus amigos, clientes y contactos.

Hasta ahora, todo bien, y esto cubre bastante bien la opción para la incrustación manual de contenido. Sin embargo, hay un segundo caso de uso distinto, donde el resultado es el mismo pero la ruta hacia él es muy diferente.

Compartir programáticamente

Imaginemos que está creando una aplicación o un sitio que acepta contenido de un usuario. Eso podría ser algo tan simple como una página de intranet básica para que el personal comparta noticias con sus compañeros de trabajo, o algo masivo como una red social completa donde las personas pueden registrarse y comenzar a publicar.

En ambos casos, debe averiguar qué hacer si el usuario agrega una URL como parte de ese contenido. Puedes imaginar el escenario:

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

En este punto, como sistema de publicación, debe averiguar qué hacer. La primera opción es no hacer nada y simplemente dejar la URL como texto sin formato. Esa no es una idea brillante, ya que los usuarios generalmente querrán hacer clic en la URL y el texto sin formato no los ayudará a llegar a la página en el otro extremo.

La segunda opción es convertirlo en un enlace. Ese es un buen paso siguiente sólido, ya que los usuarios pueden seguir el enlace y acceder al contenido. Pero al hacerlo, abandonan su sitio y es posible que no regresen rápidamente.

La mejor experiencia de usuario podría ser poder buscar el reproductor para ese contenido e incrustarlo allí mismo en lugar de solo la URL. Eso permitiría a los usuarios experimentar el contenido dentro de su sitio, como lo harían en Facebook, por ejemplo.

Esto plantea el problema. Dada una URL, ¿cómo puedo convertirla en el código de incrustación HTML/JavaScript necesario para mostrar un reproductor enriquecido en la página?

Si se trata de un sitio conocido como YouTube, podría escribir un código que use la API de YouTube para obtener la información del video y obtener o crear el código de inserción de esa manera. Podría hacer lo mismo con otros servicios de video como Vimeo y VIVO. Puedo escribir código para reconocer las URL de Flickr e Instagram y usar sus API para obtener bonitas versiones incrustables de fotografías. Y lo mismo para Twitter y los tweets. ¡Pero esto suena como mucho trabajo!

Lo ideal sería si hubiera una forma estandarizada de pasar de una URL de un contenido a un bloque de código incrustado para mostrar ese contenido en una página. Si ha estado prestando atención, se dará cuenta de que la respuesta es oEmbed.

El origen de oEmbed

Este fue exactamente el problema que tuvo Leah Culver mientras trabajaba en Pownce (un sitio de redes sociales verdaderamente innovador que fue el Betamax del VHS de Twitter). Pownce quería incorporar representaciones ricas de contenido en el flujo de actualización de un usuario, pero no quería limitar el soporte solo a los servicios con los que habían escrito código específicamente para integrarse. En una cena con su colega Mike Malone, Cal Henderson (que dirigía ingeniería en Flickr, uno de los principales proveedores de este tipo de contenido en ese momento) y Richard Crowley, analizaron juntos una idea para un estándar abierto para obtener el código de inserción de una dirección URL Henderson se fue y redactó algo basado en la discusión, y nació oEmbed.

Usando oEmbed

Así es como funciona.

Comienza con la URL que apunta a un único elemento de contenido. Eso podría ser un video de YouTube, una imagen o lo que sea. Por lo general, esto lo habrá proporcionado un usuario de su sitio o aplicación como parte de algún contenido que desea publicar. El primer paso es buscar el contenido de la página en esa URL, que debería ser una página HTML.

Si el sitio que aloja el contenido es compatible con oEmbed, en la sección <head> de esa página debe haber un elemento de link con un tipo de contenido 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 sobre XML: oEmbed admite respuestas en formato XML y JSON. Para este artículo, solo estoy considerando JSON, porque no somos salvajes. Si se encuentra en la desafortunada posición de necesitar trabajar con XML, tenga en cuenta que es un formato compatible con la especificación oEmbed, aunque es posible que algunos proveedores solo ofrezcan respuestas JSON.

Esta etiqueta de enlace como el atributo rel establecido en alternate y un type establecido en application/json+oembed o text/xml+oembed . Es este atributo el que nos da pistas sobre el hecho de que la URL proporcionada en el href es en realidad un punto final de la API oEmbed para recuperar los detalles del contenido.

Esa URL tendrá generalmente dos parámetros: url y format .

Parámetros de URL comunes para la solicitud inicial del consumidor

La especificación completa entra en mucho más detalle aquí (y debe hacer referencia a eso si crea su propia implementación), pero estos son los dos parámetros que probablemente verá más.

Entonces, obtuvimos una URL, buscamos la página, encontramos una etiqueta de enlace oEmbed con otra URL para un punto final de API. Luego, solicitamos esa nueva URL, y eso devuelve toda la información que el servicio tiene que proporcionar sobre ese contenido.

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

¡Ahora estamos hablando! La respuesta nos da mucha información sobre el contenido. En el futuro previsible, la version debería ser 1.0 , que es la versión actual de la especificación oEmbed. La otra información devuelta depende en gran medida del valor de type .

Tipos de respuesta

El valor de la clave de type en la respuesta le indica qué tipo de medios va a incorporar.

Aparte del contenido de video dedicado, el tipo más común que probablemente verá en la naturaleza es rich . Incluso el propio Flickr, mientras sigue enviando una photo de respuesta, también proporciona html para un 'reproductor' integrable enriquecido para la imagen.

La mayoría de las veces, incrustar el contenido en su sitio es solo un caso de usar el código proporcionado como valor html .

Una nota sobre la seguridad

Una cosa de la que debería ser cauteloso es tomar una respuesta HTML e incrustarla mediante programación en una página que aloja. Sin el paso humano para verificar dos veces el código que está pegando, siempre existe la posibilidad de que ese código sea malicioso. Como tal, debe tomar las medidas adecuadas para mitigar el riesgo.

Eso podría incluir el filtrado de las URL para asegurarse de que los esquemas y los dominios coincidan con los esperados, y el código de espacio aislado en un iframe en un dominio diferente sin cookies. Debe acceder a la situación en la que está utilizando el código y asegurarse de no exponerse a un riesgo indebido.

Empezando

Tan importante como es comprender el proceso cuando se usa oEmbed, la realidad es que la mayoría de los lenguajes comunes tienen bibliotecas disponibles que abstraen el proceso y lo hacen relativamente simple.

Por ejemplo, el oembed empaquetado de npm proporciona una interfaz muy simple para realizar una solicitud basada en la URL del contenido y obtener a cambio la respuesta de oEmbed.

Primero instale el paquete en su proyecto:

 npm i oembed

Y luego solicita la URL. Aquí estoy usando la URL de una presentación en Notist que di sobre oEmbed. Que 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); });

Y la respuesta:

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

Si desea hacer lo mismo en PHP, hay un práctico paquete llamado incrustar/incrustar disponible para instalar a través de Composer.

 composer require embed/embed

Y luego en tu proyecto 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>"

Como puede ver, con el uso de una biblioteca, el proceso se vuelve muy simple y puede pasar rápidamente de una URL al código de inserción, listo para mostrar una representación rica del contenido del usuario.

Conclusión

oEmbed es una solución muy elegante para un problema muy específico. Se le perdonaría pensar que solo unos pocos ingenieros que trabajan en grandes redes sociales se beneficiarían de esto, pero en realidad, los sistemas de publicación en los que un usuario puede ingresar una URL son sorprendentemente comunes. Encuéntrame un ingeniero de back-end que en algún momento no haya necesitado construir algún tipo de CMS. Es posible que no lo pensemos en los mismos términos, pero si acepta la entrada del usuario, debería pensar qué hacer si esa entrada contiene direcciones URL.

Ahora que conoce oEmbed (lo siento), no tiene excusa para no considerar seriamente cómo manejar las URL en sus proyectos futuros.

• oIncrustar especificación
• oembed para NodeJS
• incrustar/incrustar para PHP
• “Anunciando OEmbed: un estándar abierto para contenido incrustado”, Leah Culver