Intégrer une adresse web (oEmbed)

Avec les adresses web intégrées (oEmbed), une adresse web saisie dans l’éditeur WordPress est remplacée automatiquement par un aperçu de la page HTML correspondante.

Ceci ne fonctionne qu’avec les sites capables de gérer les adresses web intégrées.

Intégrer un article ou une page WordPress

Dans la zone d’édition, saisir l’adresse web d’un article ou d’une page d’un site WordPress, par exemple : « https://dfarnier.fr/modifier-images-wp/ » :

Un lien vers un sité gérant les adresses "embeded" est saisi dans un artilce
Saisie d’une adresse web intégrée

WordPress reconnaît que l’adresse web correspond à un site capable de gérer les adresses web intégrées. Il remplace automatiquement l’affichage du lien par un aperçu de la page :

Affichage de la présentation d'un article WordPress par lien inséré
Affichage d’un article WordPress intégré

Dans l’aperçu, s’affichent :

  1. le titre de l’article,
  2. l’image à la une de l’article intégré,
  3. l’extrait de l’article,
  4. un lien pour accéder au site,
  5. un lien pour que les visiteurs puissent partager l’article.

Bien évidemment, vous pouvez remplacer « article » par « page WordPress ».

Afficher l’adresse web intégrée

Une fois l’article publié, un visiteur du site qui clique sur le titre dans l’aperçu lance l’affichage de l’article intégré :

Une fois l'aperçcu affiché côté visiteurs, cliquer sur le titre en haut de l'aperçu déclenche l'affichage de l'article
Cliquer sur le titre de l’aperçu pour afficher l’article intégré

Une fois l’article publié, un visiteur du site qui clique sur l’image dans l’aperçu lance l’affichage de l’article intégré :

Une fois l'aperçcu affiché côté visiteurs, cliquer sur l'image dans l'aperçu déclenche l'affichage de l'article
Cliquer sur l’image dans l’aperçu pour afficher l’article intégré

Afficher le site

Une fois l’article publié, un visiteur du site qui clique sur l’icône et l’adresse du site en bas de l’aperçu lance l’affichage de la page d’accueil du site :

Une fois l'aperçcu affiché côté visiteurs, cliquer sur l'icône ou le titre du site dans l'aperçu déclenche l'affichage de la page d'accueil du site
Cliquer sur l’icône ou l’adresse du site dans l’aperçu pour afficher la page d’accueil du site

Récupérer les adresses de partage

Une fois l’article publié, un visiteur du site qui clique sur l’icône de partage en bas de l’aperçu récupère des informations permettant d’intégrer l’article dans un site web.

Récupérer l’adresse de l’article

Côté visiteur, cliquer sur l’icône de partage ( ), puis sur le bouton « Intégration WordPress » :

L'adresse de l'article apparaît pour recopie dans un article WordPress
Code à recopier pour intégrer dans un site WordPress

Pour utiliser l’adresse web:

  • cliquer dans la zone où l’adresse s’affiche,
  • taper simultanément sur les touches « CTRL » et « c » pour copier ce qui est sélectionné,
  • taper simultanément sur les touches « CTRL » et « v » à l’endroit où l’adresse web de l’article doit être insérée dans le site cible.

Récupérer du code pour afficher l’article

Côté visiteur, cliquer sur l’icône de partage ( ), puis sur le bouton « Inclusion HTML » :

En cliquant sur l'option "Inclusion HTML", on récupère du code à recopier dans une page HTML
Récupérer du code HTML à inclure dans un site web

Pour utiliser le code HTML:

  • cliquer dans la zone où le code s’affiche,
  • taper simultanément sur les touches « CTRL » et « c » pour copier ce qui est sélectionné,
  • taper simultanément sur les touches « CTRL » et « v » à l’endroit où le code doit être inséré dans le site cible.
Haut de page

Tester l’intégration d’un article WordPress

Si on ajoute « embed » à l’adresse web d’un article WordPress on peut visualiser comment se présentera l’affichage intégré (oEmbed) :

Affichage d'un article intégré en ajoutant "embed" en fin d'adresse web de l'article
Affichage article intégrée (oEmbed)
Haut de page

Intégrer une vidéo d’un service de partage ou un réseau social

Récupérer dans dailymotion

Certains fournisseurs de vidéo (dailymotion, youtube…) permettent d’intégrer leur vidéo dans un site WordPress.
Il suffit de coller l’adresse web de la page présentant la vidéo dans l’éditeur WordPress, pour que WordPress fasse apparaître la vidéo que les visiteurs du site pourront regarder sur votre site.

Se rendre sur le site du fournisseur de vidéos, dailymotion par exemple, et copier l’adresse web d’une vidéo en la sélectionnant dans la barre d’adresse du navigateur ( « CTRL +a » pour sélectionner toute l’adresse puis « CTRL + c » pour la copier) :

Afficher la age d'une vidéo trouvée sur dailymotion et copier l'adresse dans la barre du navigateur
Copier l’adresse web de la vidéo depuis le site de dailymotion

La plupart des services de partage possèdent une option permettant d’obtenir l’adresse sous forme longue ou réduite ; dans le cas de dailymotion,  l’option est disponible sous l’image :

L'option "Partage" affiche l'adresse longue de la vidéo
Récupérer l’adresse longue
Cliquer sur l'option "Mini url" fait apparaître l'adresse courte
Récupérer l’adresse courte

Retourner dans l’éditeur WordPress et copier l’adresse (« CTRL + v »); WordPress remplace automatiquement l’adresse web par une photo de la vidéo :

L'image de la vidéo s'affiche à la place de l'adresse web
Affichage de l’image de la vidéo dans l’éditeur

Les visiteurs du site n’auront qu’à cliquer sur l’image pour lancer la vidéo :

Affichage de la vidéo dans l'article visible par les visiteurs
vidéo intégrée côté visiteur

Récupérer dans Twitter

Dans Twitter, il est possible de récupérer une adresse intégrée pour chaque Tweet en cliquant sur les points de suspension puis sur « Copier le lien du Tweet » :

En dessous du tweet, cliquer sur les points horizontux puis sur l'option "Copier le lien du Tweet"
Récupérer l’adresse d’un Tweet

Voici ce qui s’affiche si on recopie l’adresse dans un article (ou une page) WordPress :

Copier l'adresse du Tweet dans un article édité le fait apparaître
Tweet édité dans un article WordPress
Haut de page

Modifier une adresse web intégrée (oEmbed)

Dans la zone d’édition de WordPress, cliquer dans un aperçu d’adresse intégrée puis sur l’icône en forme de crayon qui apparaît :

Après avoir cliqué sur un aperçu, une zone apparaît avec une icône en forme de crayon
Cliquer sur l’icône de modification d’adresse intégrée

WordPress affiche une fenêtre dans laquelle :

  1. on peut modifier l’adresse web intégrée,
  2. le titre avec un lien vers l’adresse de l’article intégré se modifie automatiquement pour correspondre à l’adresse saisie,
  3. le nouvel article peut être intégré dans la zone d’édition en cliquant sur le bouton
Dans la fenêtre qui s'affiche, il est possible de modifier l'adresse web intégrée
Modifier l’adresse web intégrée
Haut de page

Retirer une adresse web intégrée (oEmbed)

Dans la zone d’édition de WordPress, cliquer dans un aperçu d’adresse intégrée puis sur l’icône en forme de croix qui apparaît :

Une icône en forme de croix permet de retirer une adresse intégrée
Retirer une adresse web intégrée

L’aperçu disparaît.

Haut de page

Le coin des développeurs

L’intégration des adresses web a été améliorée dans la version 4.5 de WordPress. On trouvera des précisions dans l’article ci-dessous :

Embeds Changes in WordPress 4.5

Haut de page

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.