Plugin oEmbed : insérer le contenu d'une page web dans une autre page (photo, vidéo, URL ou extrait HTML)

François Daniel Giezendanner — 2017-04-01T15:24:54Z

Sommaire

C'est quoi ce truc ?

oEmbed est un protocole ouvert qui permet d'insérer le contenu d'une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML.

L'échange d'information a lieu entre un site client et un site serveur. Par exemple, le site client peut afficher une représentation d'une page web telle qu'une image ou une vidéo. Le serveur doit disposer d'un service utilisant l'API oEmbed pour permettre aux clients de récupérer les informations de la représentation à afficher.

Comment ça marche ?

Du côté client, l'utilisation du plugin est simple. Par défaut le plugin transforme automatiquement :

les URL entre < et > n'importe où dans le texte :
les URL toutes seules dans un paragraphe : deux retours à la ligne, URL, puis deux retours à la ligne.

Si le site vers lequel pointe l'URL implémente l'API oEmbed, celle-ci est complétée par un extrait du contenu fourni par le site. Par exemple, si on insère l'URL suivante dans le texte d'un article :

https://www.flickr.com/photos/designer/6776063267/

Celle-ci sera automatiquement remplacée par le contenu suivant :

https://www.flickr.com/photos/designer/6776063267/

Ou encore si on insère l'URL suivante dans le texte d'un article :

https://www.flickr.com/photos/33352764@N03/3108750487/

Celle-ci sera automatiquement remplacée par le contenu suivant :

https://www.flickr.com/photos/33352764@N03/3108750487/

Avec SPIP 3, le plugin insère aussi ces traitements dans le formulaire d'ajout de documents de SPIP (dans la partie documents distants). Il suffit d'ajouter un document distant dont l'URL est celle de la page où se trouve le contenu à récupérer.

Et je peux faire ça avec n'importe quel site ?

Non, pour des raisons de sécurité le plugin utilise une liste blanche de sites autorisés. Par défaut, cette liste contient les sites suivants : youtube, blip.tv, vimeo, dailymotion, flickr, soundcloud, slideshare, yfrog, instagram, rdio, huffduffer, nfb, dotsub, clikthrough, kinomap, photobucket, smugmug, meetup, wordpress, blogs.cnn, techcrunch, my.opera, viddler et collegehumor (consulter la liste complète).

Lorsqu'une image, un son, une vidéo est hébergée par l'un des sites susmentionnés, indiquez simplement l'URL de la page qui contient ce document et SPIP le récupérera automatiquement.

Exemple 1

Le plugin oEmbed transforme automatiquement l'URL entre < et > ci-dessous dans le texte :

ce qui donne :

<https://www.youtube.com/watch?v=pMf...>

Exemple 2

Nous sommes avec SPIP 3, le plugin oEmbed insère aussi ces traitements dans le formulaire d'ajout de documents de SPIP (dans la partie documents distants). Il suffit d'ajouter un document distant dont l'URL est celle de la page où se trouve le contenu à récupérer, ici l'URL est https://www.youtube.com/watch?v=pMf8DhEea1w ce qui nous fournit le modèle :

Et en affichant ce modèle on obtient :


Introduction au livre

Sources SPIP

oEmbed
4 décembre 2013 – par b_b, Cerdic
oEmbed est un protocole ouvert qui permet d'insérer le contenu d'une page web dans une autre page. Le contenu inséré peut être de plusieurs types : photo, vidéo, URL ou extrait HTML.
https://contrib.spip.net/oEmbed-4407

Les sites qui supportent oEmbed
14 décembre 2014 – par Cerdic
Une liste indicative des sites qui supportent oEmbed et permettent d'insérer dans SPIP le document en indiquant simplement l'URL de la page qui le contient.
https://contrib.spip.net/Les-sites-qui-supportent-oEmbed

OEMBED
Utilisé dans 984 sites. Mis à jour le 26 mars 2017
1.6.12 - stable. Compatible : SPIP 3.2 SPIP 3.1 SPIP 3.0
http://plugins.spip.net/oembed.html

Liste blanche oEmbed « complète » de sites autorisés (SPIP php)
http://zone.spip.org/trac/spip-zone/browser/_plugins_/oembed/inc/oembed.php?rev=#L23

Sources générales

oEmbed
http://oembed.com/

Using oEmbed for Dynamic, Futureproof Embedded Videos and Photos
by Jeffrey Donenfeld, 2011/09/27
https://www.jeffreydonenfeld.com/blog/2011/09/using-oembed-for-dynamic-futureproof-embedded-videos-and-photos/

golang oEmbed package
http://log.widnyana.web.id/

oEmbed
https://fr.wikipedia.org/wiki/OEmbed
https://en.wikipedia.org/wiki/OEmbed

oEmbed et Oohembed : Embed de vidéo Web pour les nuls
http://zelaurent.com/technologie/oembed-et-oohembed-embed-de-video-web-pour-les-nuls

OEmbedPlugin
Supported providers, Usage, Examples, Installation Instructions, Dependencies, Change History
17 Nov 2016, MichaelDaum
https://foswiki.org/Extensions/OEmbedPlugin

The Ultimate Guide to Embedding Content in WordPress with oEmbed
Jenni McKinnon, Last updated February 28, 2017
https://premium.wpmudev.org/blog/embedding-wordpress-oembed/?utm_expid=3606929-101.yRvM9BqCTnWwtfcczEfOmg.0

Bannières, logos et images en GIF animées pour votre site

François Daniel Giezendanner — 2017-02-13T13:53:06Z

Trois logiciels Freewares gratuits très simples, intuitifs et performants qui se maîtrisent en quelques clics et qui permettent de créer aisément de belles animations sous la forme d'un fichier .GIF