Découvrir par programmation le partage de code avec oEmbed

Publié: 2022-03-10

Résumé rapide ↬ De nombreux sites hébergent des médias et du contenu qui peuvent être partagés ailleurs grâce à l'utilisation de code d'intégration HTML. Que se passe-t-il si vous n'avez que l'URL de l'élément et que vous avez besoin de trouver une version intégrable du média sans intervention humaine ? C'est là qu'oEmbed entre en jeu.

Le Web regorge de services qui hébergent des contenus riches tels que des vidéos, des images, de la musique et des podcasts, des cartes et des graphiques, et toutes sortes de plaisirs différents. Il y a de fortes chances que lorsque vous ajoutez votre contenu à un site, il vous offre un moyen d'intégrer ce contenu dans une page Web ailleurs.

Des sites comme YouTube ont leur propre lecteur intégrable qui est populaire à utiliser dans les articles de blog et même les pages de produits. Soundcloud a un code pour intégrer leur lecteur de musique dans le site Web de votre groupe. Les collecteurs de fonds caritatifs peuvent télécharger le parcours de leur grande course sur un site comme Strava et vouloir le partager sur leur site de collecte de fonds pour le montrer à leurs sponsors.

Tout cela est fait en trouvant cette option de partage sur le site d'hébergement et en copiant du code qui est normalement un mélange de HTML et de JavaScript. Ce code peut ensuite être collé dans la page de destination, et le site d'hébergement présentera une représentation riche du contenu pour tous vos amis, clients et contacts.

Jusqu'ici, tout va bien, et cela couvre assez bien l'option d'intégration manuelle du contenu. Il existe cependant un deuxième cas d'utilisation distinct, où le résultat est le même mais la voie qui y mène est très différente.

Plus après saut! Continuez à lire ci-dessous ↓

Partage par programme

Imaginons que vous créez une application ou un site qui accepte le contenu d'un utilisateur. Cela pourrait être quelque chose d'aussi simple qu'une page intranet de base permettant au personnel de partager des nouvelles avec des collègues, ou quelque chose d'énorme comme un réseau social complet où les gens peuvent s'inscrire et commencer à publier.

Dans les deux cas, vous devez déterminer ce qu'il faut faire si l'utilisateur ajoute une URL dans le cadre de ce contenu. Vous pouvez imaginer le scénario :

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

À ce stade, en tant que système de publication, vous devez déterminer quoi faire. La première option consiste à ne rien faire et à laisser l'URL en texte brut. Ce n'est pas une idée brillante, car les utilisateurs voudront généralement cliquer sur l'URL et le texte brut ne les aidera pas à accéder à la page à l'autre bout.

La deuxième option est de le transformer en lien. C'est une bonne étape suivante, car les utilisateurs peuvent suivre le lien et accéder au contenu. Mais ce faisant, ils quittent votre site et pourraient ne pas revenir rapidement.

La meilleure expérience utilisateur pourrait être de pouvoir récupérer le lecteur pour ce contenu et de l'intégrer directement au lieu de simplement l'URL. Cela permettrait aux utilisateurs de découvrir le contenu directement sur votre site, un peu comme ils le feraient sur Facebook, par exemple.

Cela pose le problème. Étant donné une URL, comment puis-je la transformer en code d'intégration HTML/JavaScript nécessaire pour afficher un lecteur enrichi sur la page ?

S'il s'agit d'un site connu comme YouTube, je pourrais écrire du code qui utilise l'API YouTube pour récupérer les informations vidéo et obtenir ou créer le code d'intégration de cette façon. Je pourrais faire la même chose pour d'autres services vidéo comme Vimeo et VIVO. Je peux écrire du code pour reconnaître les URL Flickr et Instagram et utiliser leurs API pour récupérer de belles versions intégrables de photographies. Et pareil pour Twitter et les tweets. Mais cela ressemble à beaucoup de travail!

Ce qui serait idéal, c'est s'il existait un moyen standardisé de passer d'une URL d'un élément de contenu à un bloc de code intégré pour afficher ce contenu sur une page. Si vous avez été attentif, vous vous rendrez compte que la réponse à cela est oEmbed.

L'origine d'oEmbed

C'était exactement le problème que Leah Culver avait lorsqu'elle travaillait sur Pownce (un site de réseautage social vraiment innovant qui était le Betamax de la VHS de Twitter). Pownce voulait intégrer des représentations riches de contenu dans le flux de mise à jour d'un utilisateur, mais ne voulait pas limiter la prise en charge aux seuls services pour lesquels ils avaient spécifiquement écrit du code à intégrer. Lors d'un dîner avec son collègue Mike Malone, ainsi que Cal Henderson (qui dirigeait l'ingénierie chez Flickr - l'un des principaux fournisseurs de ce contenu à l'époque) et Richard Crowley, ils ont élaboré ensemble une idée de norme ouverte pour obtenir le code intégré de une URL. Henderson est parti et a rédigé quelque chose sur la base de la discussion, et oEmbed est né.

Utiliser oEmbed

Voici comment cela fonctionne.

Cela commence par l'URL qui pointe vers un seul élément de contenu. Cela peut être une vidéo YouTube, une image ou autre. Généralement, cela aura été fourni par un utilisateur de votre site ou de votre application dans le cadre d'un contenu qu'il souhaite publier. La première étape consiste à récupérer le contenu de la page à cette URL, qui doit être une page HTML.

Si le site hébergeant le contenu prend en charge oEmbed, dans la section <head> de cette page, il devrait y avoir un élément de link avec un type de contenu 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" />

Remarque à propos de XML : oEmbed prend en charge les réponses aux formats XML et JSON. Pour cet article, je ne considère que JSON, car nous ne sommes pas des sauvages. Si vous êtes dans la position malheureuse de devoir travailler avec XML, sachez qu'il s'agit d'un format pris en charge avec la spécification oEmbed, bien que vous puissiez constater que certains fournisseurs n'offrent que des réponses JSON.

Cette balise de lien en tant qu'attribut rel défini sur alternate et un type défini sur application/json+oembed ou text/xml+oembed . C'est cet attribut qui nous indique que l'URL donnée dans le href est en fait un point de terminaison de l'API oEmbed pour récupérer les détails du contenu.

Cette URL aura généralement deux paramètres : url et format .

Paramètre	Évaluer
`url` (obligatoire)	L'adresse Web encodée en URL de l'élément de contenu
`format`	Le format dans lequel vous souhaitez recevoir la réponse. Un des formats `json` ou `xml`

Paramètres d'URL communs pour la demande initiale du consommateur

La spécification complète va beaucoup plus en détail ici (et vous devriez vous y référer si vous créez votre propre implémentation), mais ce sont les deux paramètres que vous verrez probablement le plus.

Nous avons donc une URL, récupéré la page, trouvé une balise de lien oEmbed avec une autre URL pour un point de terminaison API. Ensuite, nous demandons cette nouvelle URL, et cela renvoie toutes les informations que le service doit fournir sur ce contenu.

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

Nous parlons maintenant! La réponse nous donne beaucoup d'informations sur le contenu. La version devrait dans un avenir prévisible être 1.0 , qui est la version actuelle de la spécification oEmbed. Les autres informations renvoyées dépendent largement de la valeur de type .

Types de réponse

La valeur de la clé de type dans la réponse vous indique le type de média que vous allez intégrer.

Valeur du `type`	À quoi s'attendre
`photo`	Une photo statique qui offre une `url` , une `width` et une `height` pouvant être utilisées pour une balise `img` de base
`video`	Un lecteur vidéo, avec `html` spécifiant le code requis pour intégrer un lecteur sur une page, bien qu'avec une `width` et une `height`
`link`	La meilleure façon de gérer ce contenu est simplement de fournir un lien après tout. La réponse peut contenir d'autres informations utiles comme un titre, mais elle doit simplement être liée.
`rich`	Une sorte de lecteur de contenu riche, qui, tout comme le type de vidéo, renvoie `html` , `width` et `height`

Outre le contenu vidéo dédié, le type le plus courant que vous êtes susceptible de voir dans la nature est rich . Même Flickr lui-même, tout en envoyant une réponse photo , fournit également du code html pour un « lecteur » intégrable riche pour l'image.

La plupart du temps, l'intégration du contenu dans votre site consiste simplement à utiliser le code fourni comme valeur html .

Une note sur la sécurité

Une chose dont vous pourriez être prudent à juste titre est de prendre une réponse HTML et de l'intégrer par programme dans une page que vous hébergez. Sans l'étape humaine pour revérifier le code que vous collez, il est toujours possible que ce code soit malveillant. En tant que tel, vous devez prendre les mesures appropriées pour atténuer le risque.

Cela peut inclure le filtrage des URL pour s'assurer que les schémas et les domaines correspondent à ceux attendus, et le code de bac à sable dans une iframe sur un domaine différent et sans cookie. Vous devez accéder à la situation dans laquelle vous utilisez le code et vous assurer que vous ne vous exposez pas à des risques indus.

Commencer

Aussi important qu'il soit de comprendre le processus lors de l'utilisation d'oEmbed, la réalité est que la plupart des langages courants disposent de bibliothèques qui résument le processus et le rendent relativement simple.

Par exemple, le package oembed fourni par npm fournit une interface très simple pour effectuer une requête basée sur l'URL du contenu et obtenir la réponse oEmbed en retour.

Installez d'abord le package dans votre projet :

 npm i oembed

Et puis demandez l'URL. Ici, j'utilise l'URL d'une présentation sur Notist que j'ai donnée sur oEmbed. Comment très méta.

 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); });

Et la réponse :

 { 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 vous vouliez faire la même chose en PHP, un package pratique appelé embed/embed est disponible pour être installé via Composer.

 composer require embed/embed

Et puis dans votre projet 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>"

Comme vous pouvez le constater, avec l'utilisation d'une bibliothèque, le processus devient très simple et vous pouvez rapidement passer d'une URL au code d'intégration, prêt à afficher une représentation riche du contenu de l'utilisateur.

Conclusion

oEmbed est une solution très élégante à un problème très spécifique. Vous seriez pardonné de penser que seuls quelques ingénieurs travaillant sur de grands réseaux sociaux en bénéficieraient, mais en réalité, les systèmes de publication où un utilisateur peut saisir une URL sont étonnamment courants. Trouvez-moi un ingénieur back-end qui, à un moment donné, n'a pas eu besoin de créer une sorte de CMS. Nous n'y pensons peut-être pas dans les mêmes termes, mais si vous acceptez l'entrée de l'utilisateur, vous devriez réfléchir à ce qu'il faut faire si cette entrée contient des URL.

Maintenant que vous connaissez oEmbed (désolé), vous n'avez aucune excuse pour ne pas réfléchir sérieusement à la façon dont vous gérez les URL dans vos futurs projets.

Spécification d'intégration
Embed pour NodeJS
intégrer/intégrer pour PHP
"Annonce d'OEmbed : une norme ouverte pour le contenu intégré", Leah Culver