Comment intégrer du code iFrame sur votre site WordPress (manuellement et avec des plugins)

Le partage de contenu est une pratique assez courante. Cependant, le fait de présenter le contenu d’un autre créateur sur votre site peut avoir des ramifications juridiques, en hébergeant de gros volumes de contenu des fichiers tels que des vidéos peuvent affecter la performance de votre site. Heureusement, les iFrames apportent une solution simple à ces problèmes.

Dans cet article, nous vous expliquerons ce que sont les iFrames et comment les utiliser avec votre site WordPress.

Prêt à plonger ? Allons-y !

Que sont les iFrames (et pourquoi elles sont utiles) ?

Une iFrame est un moyen d’intégrer une page Web dans le contenu d’une autre page. Cela se fait à l’aide de balises HTML, de l’URL de la page externe et des spécifications concernant la façon dont la fenêtre doit apparaître sur votre site.

Il y a deux situations dans lesquelles les iFrames sont généralement utiles.

La première est lorsque vous souhaitez partager du contenu qui ne vous appartient pas. Dans la plupart des cas, l’intégration de contenu via une iFrame n’est pas considérée comme une violation du droit d’auteur (voir aussi la décision de l’UE). Par conséquent, il s’agit généralement d’une méthode de partage légale et plus éthique que la plupart des autres options. De plus, le code d’une iFrame n’est pas directement accessible. Cela signifie qu’un visiteur de votre site ne peut pas copier le contenu intégré et le partager ailleurs.

La deuxième raison pour laquelle vous voudrez peut-être incorporer des iFrames est pour le partage de fichiers volumineux, comme de la vidéo, de l’audio, ou même des images. YouTube en est l’exemple parfait.

Avec une iFrame, vous pouvez afficher le contenu d’un fichier sur votre site sans avoir à l’héberger dans votre bibliothèque WordPress. C’est important parce que ces types de fichiers multimédias occupent souvent beaucoup d’espace de stockage, et pourraient même ralentir votre site.

En hébergeant vos vidéos sur une plateforme telle que YouTube et en les intégrant ensuite sur votre site WordPress avec des iFrames, vous pouvez éviter les inconvénients de les téléverser directement sur votre site. Cette technique vous aidera à devenir un membre plus éthique de la communauté en ligne et à garder votre site rapide et facile à utiliser.

Comment utiliser des iFrames avec WordPress (3 méthodes)

Tout comme il existe différents scénarios dans lesquels vous pouvez vouloir utiliser une iFrame, il existe de multiples méthodes pour en implémenter. Ci-dessous, nous allons explorer trois des façons les plus courantes d’ajouter des iFrames à votre site WordPress.

1. Ajouter manuellement des iFrames dans WordPress

Le code de base pour ajouter une iFrame à une page est assez simple. Tout ce dont vous avez besoin sont les balises HTML d’ouverture et de fermeture, et l’URL de la page Web que vous souhaitez intégrer :

<iframe src="exemple.com"></iframe>

Il y a quelques limitations à noter concernant l’URL source. Tout d’abord, iFrames ne peut afficher que le contenu des sites qui utilisent le même protocole de transfert d’hypertexte que le vôtre. En d’autres termes, si votre site utilise HTTPS, vous ne pouvez intégrer que du contenu provenant d’autres sites HTTPS. De même, si vous utilisez HTTP, vous ne pouvez intégrer que des URL qui utilisent également HTTP.

De plus, certains sites populaires – tels que Facebook et YouTube – désactivent l’intégration manuelle d’iFrame. Essayer d’afficher une page d’un site qui ne permet pas l’intégration d’iFrame affichera une erreur dans votre fenêtre :

Si vous êtes capable d’utiliser cette méthode, il est important de savoir que vous pouvez également personnaliser vos iFrames pour répondre aux besoins de votre site. C’est là que les paramètres iFrame entrent en jeu. Quelques-uns des plus courants sont les suivants :

• Width : Ce paramètre vous permet de définir une largeur spécifique en pixels pour l’iFrame.
• Height : Comme le paramètre largeur, la hauteur détermine la taille en pixels de la fenêtre iFrame de votre page Web.
• Allow : Avec ce paramètre, vous pouvez définir certains comportements ou fonctionnalités par défaut pour votre iFrame, tels que l’affichage plein écran ou le traitement des paiements.
• Importance : Vous pouvez utiliser ce paramètre pour spécifier quand une iFrame doit être chargée.

Par exemple, voici à quoi ressemblerait le code pour une iFrame avec une taille de fenêtre de 900 pixels par 700 pixels, avec l’affichage en plein écran activé, et qui est réglée pour télécharger après le reste de la page Web :

<iframe src="exemple.com" width="900" height="700" allow="fullscreen"></iframe>

Sur l’interface publique, voici à quoi pourrait ressembler cette iFrame :

Il y a d’autres paramètres que vous pouvez également envisager d’utiliser. Cependant, ceux énumérées ci-dessus devraient vous permettre de créer des iFrames basiques pour partager des vidéos YouTube ou d’autres contenus sur votre site.

2. Utilisez les codes d’intégration pour créer des iFrames

Certains sites ont des restrictions quant à la possibilité d’intégrer manuellement leur contenu dans des iFrames. Cela peut rendre difficile l’affichage de certains types de contenu, tels que les messages Facebook ou les vidéos YouTube. Cependant, cela ne signifie pas que vous ne pouvez pas afficher le contenu de ces sources dans des iFrames.

Pour ce faire, il vous suffit simplement d’accéder aux codes d’intégration nécessaires. Voyons comment cela fonctionne dans YouTube par exemple. Rendez-vous sur la vidéo que vous souhaitez intégrer, que ce soit la vôtre ou celle d’un autre créateur. Sous le lecteur vidéo, vous devriez voir un bouton Partager :

Cliquez sur ce bouton, et une fenêtre s’ouvrira affichant les différentes options de partage disponibles. L’une d’elles est Intégrer :

Lorsque vous sélectionnez l’option Intégrer, YouTube affiche un extrait HTML que vous pouvez utiliser pour ajouter la vidéo dans une iFrame. Il inclut certains paramètres iFrame, que vous pouvez copier et utiliser si vous le souhaitez. Sinon, vous pouvez également choisir de simplement copier l’URL source à la place :

Lorsque vous utilisez le code d’intégration, la vidéo s’affiche dans votre iFrame au lieu de l’erreur que vous verriez si vous essayez d’utiliser l’URL standard.

Pour l’ajouter à une page ou à un article dans l’éditeur de bloc, vous pouvez utiliser un bloc HTML personnalisé :

Dans l’éditeur classique, vous devrez passer dans l’éditeur de texte et ajouter votre code à l’endroit correspondant :

Le résultat devrait être une iFrame fonctionnelle :

Vous pouvez suivre un processus similaire pour intégrer un article Facebook sur votre site. Naviguez jusqu’à l’article que vous voulez partager, et cliquez sur l’icône à trois points dans le coin supérieur droit de l’article :

Ensuite, sélectionnez l’option Intégrer :

Ceci affichera un extrait HTML semblable à celui de la vidéo YouTube que nous avons regardée plus tôt. Encore une fois, l’URL source est la partie la plus importante de ce code, bien que vous puissiez également utiliser les paramètres prédéterminés :

Ajoutez ce code à votre page web et l’article devrait s’afficher sans problème :

De nombreux sites populaires de réseaux sociaux, dont LinkedIn, Instagram et Twitter, offrent également des codes d’intégration pour leurs articles. Vous trouverez généralement cette option dans les réglages de chaque article.

3. Ajouter des iFrames à WordPress à l’aide d’une extension

Bien sûr, les développeurs WordPress travaillent toujours à simplifier des tâches telles que l’intégration d’iFrames à l’aide d’extensions. Il y a deux options que vous pourriez envisager si vous prévoyez d’intégrer fréquemment du contenu externe sur votre site. La solution la plus populaire est l’extension iFrame :

Cette extension vous permet d’ajouter des iFrames à votre site WordPress en utilisant des codes courts. Vous pouvez spécifier les mêmes paramètres que si vous ajoutiez manuellement un iFrame via HTML. Cependant, vous n’avez pas à vous soucier de traiter directement le code de vos pages.

Vous pouvez également essayer l’extension Advanced iFrame :

Encore une fois, cette extension vous permet d’ajouter des iFrames à votre site en utilisant des codes courts. Cependant, elle inclut également plusieurs fonctionnalités supplémentaires, telles que des codes de sécurité pour empêcher d’autres utilisateurs d’intégrer des iFrames sans votre permission, des options de style personnalisé, et plus encore.

Pour 20$, vous pouvez passer à une licence Advanced iFrame Pro de six mois. Cette version produit des iFrames réactives, et permet des fonctions telles que le zoom et le chargement paresseux (Lazy Loading). Selon la fréquence à laquelle vous prévoyez d’utiliser des iFrames sur votre site, ces options pourraient valoir le coup.

Résumé

Maintenir votre site performant et conforme à la loi est vital. Les iFrames vous aideront non seulement à partager le contenu des autres d’une manière éthique, mais peut également vous permettre d’afficher des fichiers vidéo et audio sans avoir à les héberger sur votre site. Dans cet article, nous avons examiné trois méthodes pour utiliser des iFrames avec WordPress :

1. Incorporer les sites WordPress et les iFrames manuellement.
2. Utilisez des codes d’intégration pour créer des iFrames.
3. Ajouter des iFrames à l’aide d’une extension WordPress, telle que iFrame ou Advanced iFrame.

Avez-vous des questions sur les iFrames ou la façon de les utiliser sur votre site WordPress ? Faites-le nous savoir dans la section des commentaires ci-dessous !

Matteo Duò Kinsta

Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.

• Site Web
• LinkedIn
• Twitter