Comment intégrer facilement du code iFrame dans WordPress (3 méthodes)

Lors de la création de sites web, nous rencontrons souvent le besoin d'afficher du contenu provenant de sources externes sans l'héberger nous-mêmes. C'est là que les iFrames excellent.

Que vous intégriez une vidéo, une carte ou une application tierce, les iFrames offrent un moyen transparent d'intégrer du contenu externe sur votre site WordPress.

Dans cet article, nous vous guiderons à travers trois méthodes simples pour ajouter du code iFrame dans les articles ou les pages WordPress. De l'utilisation de codes d'intégration préfabriqués à la création manuelle de vos propres iFrames, nous avons ce qu'il vous faut. 

Qu'est-ce qu'un iFrame ?

Un iFrame (abréviation de inline frame) vous permet d'intégrer des vidéos ou d'autres contenus sur votre site sans avoir à héberger réellement cette vidéo. Cela peut vous faire économiser de la bande passante et de l'espace de stockage, c'est pourquoi vous ne devriez jamais télécharger une vidéo directement sur WordPress.

En plus d'améliorer la vitesse et les performances de votre WordPress, l'iFrame se mettra à jour automatiquement si le contenu original change. Cela signifie que les visiteurs verront toujours la dernière version du contenu.

L'intégration de contenu protégé par copyright via un iFrame ne viole pas non plus le copyright, ce qui peut vous protéger contre les poursuites judiciaires.

Cela dit, voyons comment vous pouvez facilement intégrer du code iFrame dans WordPress. Utilisez simplement les liens rapides pour accéder directement à la méthode que vous souhaitez utiliser :

1. Intégrer un iFrame WordPress en utilisant le code de la source (rapide et facile)
2. Intégrer avec un plugin iFrame WordPress (fonctionne avec tous les sites Web)
3. Embed iFrames in WordPress Manually (No Plugin Required)

Méthode 1 : Intégrer un iFrame WordPress en utilisant le code de la source (rapide et facile)

De nombreux grands sites d'hébergement vidéo ont une option « Intégrer » qui vous donne accès au code iFrame dont vous avez besoin pour ajouter à votre site.

Si le site Web a des paramètres de « Partage » ou « Intégrer », c'est souvent le moyen le plus rapide et le plus simple d'intégrer du contenu.

Les étapes exactes varieront en fonction de la plateforme, mais prenons YouTube comme exemple. Pour intégrer des vidéos YouTube dans WordPress, cliquez simplement sur le bouton « Partager » sous la vidéo que vous souhaitez utiliser.

Après cela, vous verrez une fenêtre contextuelle avec différentes options de partage.

Allez-y et cliquez sur le bouton « Intégrer ».

YouTube vous montrera maintenant le code iFrame.

Par défaut, YouTube cochera la case « Afficher les contrôles du lecteur », mais nous vous recommandons également d'activer le mode de confidentialité améliorée. Ce mode permet aux visiteurs de regarder le contenu intégré sur votre site Web WordPress sans qu'il n'influence leur expérience de navigation sur YouTube.

Après cela, allez-y et cliquez sur le bouton « Copier ».

Maintenant, vous pouvez coller ce code dans n'importe quel article ou page de votre site. Dans ce guide, nous l'ajouterons à une nouvelle page dans l'éditeur de blocs WordPress.

Ouvrez simplement la page, puis cliquez sur le bouton ‘+’. Dans la fenêtre contextuelle qui apparaît, commencez à taper ‘HTML’ pour trouver le bloc HTML personnalisé.

Lorsque le bon bloc apparaît, cliquez dessus pour l'ajouter à votre page.

Ensuite, collez simplement le code iFrame de YouTube dans le bloc.

Vous pouvez maintenant publier votre page pour voir la vidéo YouTube en direct sur votre blog WordPress.

Méthode 2 : Intégrer avec un plugin WordPress iFrame (fonctionne avec tous les sites Web)

Tous les sites Web tiers ne fournissent pas de code d'intégration prêt à l'emploi. Si vous ne trouvez aucun paramètre ‘Partager’ ou ‘Intégrer’, vous pouvez facilement créer votre propre code iFrame en utilisant le plugin iFrame.

Tout d'abord, vous devez installer et activer le plugin iFrame. Pour plus de détails, consultez notre guide étape par étape sur la façon d'installer un plugin WordPress.

Après activation, le plugin commencera à fonctionner immédiatement sans aucune configuration nécessaire. Allez simplement sur la page ou l'article où vous souhaitez intégrer du contenu et ajoutez un bloc Shortcode.

Après cela, ajoutez le shortcode suivant :

[iframe src="URL goes here"]

Remplacez simplement « URL goes here » par l'URL du contenu que vous souhaitez intégrer sur votre site.

Par exemple, ajoutons une carte Google dans WordPress, car c'est un moyen facile pour les magasins, restaurants et autres lieux d'ajouter des indications sur leur formulaire de contact.

Après cela, prévisualisez ou publiez simplement l'article.

Vous devriez maintenant voir le contenu intégré sur votre site Web.

Pour voir tous les paramètres disponibles, vous pouvez consulter la page du plugin iFrame.

Méthode 3 : Intégrer manuellement des iFrames dans WordPress (aucun plugin requis)

Si vous ne souhaitez pas utiliser un plugin WordPress spécial, vous pouvez créer le code iFrame manuellement. Pour ce faire, vous devez ouvrir la page ou l'article, puis ajouter un bloc HTML dans l'éditeur de contenu WordPress.

Tout d'abord, collez le code suivant dans votre bloc HTML :

<iframe src="URL goes here"></iframe>

Remplacez simplement « URL goes here » par l'URL directe du contenu que vous souhaitez intégrer.

Ici, nous intégrons une carte Google :

Vous pouvez ajouter des paramètres supplémentaires pour modifier l'apparence du contenu sur votre site Web. Par exemple, nous définissons la largeur à 600 pixels et la hauteur à 200 pixels :

<iframe src="URL goes here" width="600" height="300"></iframe>

Ceci est utile si vous avez besoin d'afficher le contenu intégré dans un espace plus petit. Par exemple, vous pourriez vouloir redimensionner le contenu après avoir testé la version mobile de votre site WordPress.

Quelles sont les alternatives aux iFrames ?

L'intégration d'iFrames présente certains inconvénients.

Tous les sites Web ne vous permettent pas d'intégrer leur contenu dans un iFrame, et vous devrez peut-être ajuster manuellement le contenu pour qu'il s'affiche correctement dans l'espace disponible.

Un autre problème est que les sites HTTPS ne peuvent utiliser des iFrames que pour du contenu provenant d'autres sites HTTPS. De même, les sites HTTP ne peuvent utiliser des iFrames que pour du contenu provenant d'autres sites HTTP.

C'est pourquoi de nombreuses plateformes comme WordPress préfèrent oEmbed.

Souvent, vous pouvez utiliser oEmbed pour intégrer des vidéos et d'autres contenus en collant simplement une URL dans l'article WordPress. WordPress redimensionnera automatiquement l'oEmbed pour qu'il s'adapte à l'espace disponible, il sera donc toujours parfait sur les ordinateurs de bureau, les smartphones et les tablettes.

Si vous souhaitez afficher des flux sociaux sur votre site Web, nous vous recommandons d'utiliser un plugin de médias sociaux plutôt que des iFrames.

Par exemple, Smash Balloon permet d'intégrer facilement du contenu de Facebook, Instagram, Twitter et YouTube.

Voici quelques tutoriels sur l'ajout de flux de réseaux sociaux avec Smash Balloon :

• Comment intégrer de vrais tweets dans les articles de blog WordPress
• Comment intégrer des vidéos TikTok dans WordPress
• Comment intégrer une playlist YouTube dans WordPress (Meilleure méthode)

Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement des iFrames dans WordPress. Vous voudrez peut-être aussi consulter nos guides sur comment intégrer SoundCloud dans WordPress et comment désactiver les intégrations dans WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.