Comment ajouter des iFrames à votre site WordPress ?

Créer un site WordPress, Faire un site | 0 commentaires


Créer du bon contenu pour votre site Web signifie souvent intégrer du contenu provenant d’autres sites Web. Et avec toutes les ressources étonnantes disponibles sur Internet, il serait dommage de ne pas en fusionner une partie avec votre propre site.

L’ajout de médias provenant d’autres sites Web peut aller de l’ajout de vidéos YouTube à l’ajout d’une carte Google Map afin de préciser l’emplacement de votre boutique aux visiteurs de votre site Web.

Mais lorsque vous ajoutez du contenu tel que des médias à votre site Web, vous devez tenir compte de deux facteurs importants. Tout d’abord, si vous utilisez du contenu provenant de tiers, vous devez être conscient des lois sur le droit d’auteur. Le partage de médias provenant d’autres sites Web et d’autres auteurs est un exercice délicat. Si vous ne le faites pas correctement, vous risquez d’être confronté à des problèmes de droits d’auteur.

Ensuite, le téléchargement d’un trop grand nombre de fichiers multimédias sur votre site peut consommer une grande partie de l’espace de stockage de votre serveur (prends le temps d’apprendre comment optimiser les images pour le web et les performances). De plus, il y a une limite maximale de téléchargement pour les fichiers multimédias dans WordPress, et bien qu’il y ait des moyens de l’augmenter, cela ne suffira pas toujours pour les gros fichiers.

Heureusement, iFrames est une solution simple et élégante pour présenter le contenu d’autres auteurs. Elle vous permet de rester dans la légalité et de partager des médias sans utiliser votre espace de stockage.

Dans cet article, nous allons voir ce qu’est iFrames, pourquoi vous devez l’utiliser, et comment vous pouvez l’utiliser pour votre site WordPress !

 

Sommaire

Que sont les iFrames ?

Que sont les Iframes ?

 

Les iFrames sont un moyen simple d’ajouter, c’est-à-dire d’intégrer une autre page Web ou une partie d’une autre page Web dans votre propre page. Les iFrames vous permettent d’afficher le contenu d’un site Web externe sur une partie de votre page Web sans vous soucier de la violation des droits d’auteur ou des problèmes d’espace de stockage.

Vous pouvez utiliser des iFrames pour ajouter du contenu à votre site web en utilisant trois composants simples : des balises HTML, l’URL du site Web externe et vos spécifications sur la taille du contenu intégré, ou en d’autres termes, la taille de la fenêtre intégrée qui doit apparaître sur votre site Web.

Si vous lisez une critique de film, vous voulez probablement aussi voir la bande-annonce. Plutôt que d’ouvrir un onglet distinct pour trouver la bande-annonce sur YouTube, il est beaucoup plus convivial et intuitif d’avoir la bande-annonce disponible dans la critique.

 

Pourquoi vous devez utiliser les iFrames ?

Pourquoi tu dois utiliser les Iframes ?

 

Les iFrames sont incroyablement utiles.

Comme je l’ai déjà mentionné, chaque fois que vous téléchargez des médias sur votre propre site Web, vous devez tenir compte de deux éléments :

  • La propriété du contenu – à qui appartient le contenu ?
  • La taille du fichier – ce fichier multimédia consomme-t-il beaucoup d’espace sur votre serveur ?

 

Les iFrames résolvent ces deux problèmes.

En termes de propriété du contenu, lorsque le contenu encadré ne vous appartient pas, l’intégration de contenu à l’aide d’iFrames est généralement sûre et ne viole pas les lois sur le droit d’auteur (il faut toutefois se méfier de certains détails, comme l’encadrement d’un contenu externe sous votre propre marque). Le cadrage vous permet de partager du contenu externe d’une manière éthique et légale ! De plus, les iFrames empêchent l’accès direct au code, de sorte que les visiteurs du site ne pourront pas le copier et le partager sur d’autres sites Web.

L’autre facteur pour lequel les iFrames sont utiles est la taille du fichier des médias que vous partagez sur votre site Web. Certains types de médias, comme l’audio, la vidéo et les images haute résolution, peuvent occuper une grande partie de votre espace de stockage et ralentir la vitesse de chargement de votre site Web. Les visiteurs de votre site risquent d’être frustrés et votre classement dans les moteurs de recherche peut s’en trouver altéré.

Heureusement, les iFrames vous permettent d’afficher le contenu d’un fichier multimédia sur votre site Web sans qu’il soit hébergé dans votre médiathèque WordPress.

Cela signifie que le média n’utilisera pas votre WordPress ou le stockage de votre serveur, mais uniquement celui du site Web d’origine.

C’est un excellent moyen d’afficher une vidéo sur votre site Web WordPress sans l’héberger dans votre bibliothèque et sans vous soucier des lois sur le droit d’auteur.

 

Pourquoi utiliser les iFrames pour intégrer du contenu ? 

Pourquoi utiliser les iFrames pour intégrer du contenu ?

 

Vous pourriez aimer aussi :  Comment faire un site internet gratuit ?

Après tout, il existe d’autres méthodes comme AJAX ou HTML5 qui peuvent être utilisées dans le même but. Cependant, en général, je pense que l’intégration des iFrames est la meilleure solution.

Tout d’abord, elle est utilisée pour le contenu visuel inter-domaines. Vous pouvez donc demander la source d’un site Web externe et l’afficher sur le votre, mais le code lui-même ne peut pas être manipulé ou consulté par les visiteurs de votre site.

Deuxièmement, les iFrames sont un moyen efficace de placer plusieurs publicités sur votre page, ce qui permet de tirer profit de votre site Web en toute simplicité. Et enfin, c’est facile à utiliser !

Sans plus attendre, voyons comment utiliser les iFrames sur votre site WordPress, avec ou sans plugins.

 

Comment utiliser les iFrames pour intégrer du contenu sur votre site WordPress ?

Nous allons examiner trois méthodes que vous pouvez utiliser pour intégrer du contenu sur votre site Web. 

La première consiste à le faire manuellement, en écrivant vous-même le code d’intégration. 

La deuxième consiste à utiliser un code d’intégration préexistant, comme vous devrez le faire dans certains cas, par exemple pour YouTube. 

Enfin, nous allons voir comment vous pouvez utiliser les iFrames en utilisant des plugins WordPress.

 

Comment utiliser les iFrames pour intégrer du contenu manuellement ?

Comment utiliser les iFrames pour intégrer du contenu manuellement ?

 

Pour intégrer manuellement du contenu à l’aide d’iFrames, vous pouvez utiliser un code simple. Les balises HTML d’ouverture et de fermeture sont les mêmes pour chaque incorporation, la seule chose qui change est l’URL du contenu web que vous voulez afficher.

Le code de base est le suivant :

Deux choses que vous devez garder à l’esprit lorsqu’il s’agit d’intégrer une URL externe : tout d’abord, le site Web que vous affichez doit avoir le même protocole de transfert hypertexte que le votre. Ainsi, si vous utilisez le protocole HTTPS, seul le contenu d’autres sites HTTPS peut être intégré. À l’inverse, si votre site Web fonctionne en HTTP, seul le contenu d’autres sites HTTP peut être affiché.

La deuxième chose dont vous devez tenir compte est que certains sites Web, comme YouTube, ne permettent pas l’intégration manuelle. Si vous essayez d’utiliser cette méthode sur ces sites, la fenêtre sera cassée. Ne vous inquiétez pas : il existe un moyen d’intégrer le contenu de YouTube, et nous le verrons à l’étape suivante.

Donc, si le contenu du site Web que vous intégrez répond à ces critères, c’est-à-dire s’il utilise le même protocole HTTP que votre site Web et que l’intégration manuelle n’est pas désactivée, vous pouvez utiliser le code fourni ci-dessus.

Toutefois, pour afficher le contenu d’une manière personnalisée, vous devez modifier légèrement le code pour ajuster les différents attributs. Vous pouvez spécifier la taille, l’importance, la priorité de chargement, etc. du contenu intégré. Si vous n’ajustez pas ces attributs, les valeurs par défaut seront utilisées, ce qui n’est pas toujours optimal pour votre site Web.

Par exemple, disons que vous souhaitez spécifier la taille, les autorisations et l’importance de l’affichage du contenu intégré. Votre code peut ressembler à quelque chose comme ceci :

Dans cet exemple d’iFrame, src indique l’URL source. Width (default : 300) et height (default : 150) spécifient les dimensions (taille) en pixels dans lesquelles le contenu doit être affiché. Importance indique la priorité de téléchargement du contenu intégré. Si vous pensez que ce contenu a une priorité de téléchargement plus élevée que les autres ressources de la page Web, vous pouvez lui attribuer la valeur élevée. S’il a une priorité de téléchargement plus faible, vous pouvez lui attribuer la valeur faible (la valeur par défaut est auto, le navigateur décidant de la priorité en fonction de sa propre heuristique).

Enfin, l’option “allow” règle les différentes autorisations dont dispose le contenu. Dans ce cas, elle est réglée sur plein écran, de sorte que les visiteurs du site Web peuvent cliquer sur le contenu – disons une vidéo – et le regarder en mode plein écran.

Une autre option d’autorisation (allow) concerne les demandes de paiement. Si vous intégrez du contenu provenant de sites d’achat, vous pouvez choisir d’autoriser l’URL externe à effectuer des demandes de paiement. Là encore, vous pouvez consulter les différents paramètres pour personnaliser davantage le contenu intégré.

 

Comment utiliser un code d’incorporation existant pour ajouter un iFrame ?

Comment utiliser un code d'incorporation existant pour ajouter un iFrame ?

 

Comme je l’ai déjà mentionné, certains sites Web comme YouTube et Facebook ne permettent pas l’intégration manuelle. Au lieu de cela, ils vous fournissent un code d’intégration prêt à l’emploi que vous pouvez utiliser pour créer un iFrame sur votre site WordPress. En fait, c’est tout aussi simple !

Vous pourriez aimer aussi :  Les 5 pages indispensables à mettre sur ton site web

Prenons l’exemple de YouTube. Pour afficher une vidéo YouTube sur votre site Web, suivez les étapes suivantes :

  • Trouvez la vidéo que vous souhaitez intégrer sur YouTube.
  • Cliquez sur le bouton Partager situé sous la vidéo.
  • Cliquez sur Embed dans la fenêtre résultante
  • Copiez le code d’intégration qui s’affiche.
  • Copiez le code HTML pour créer un iFrame de la vidéo.

Comme vous pouvez le constater, le code est fourni avec des paramètres prédéfinis (comme la largeur et la hauteur) que vous pouvez ajuster à votre guise.

Lorsque vous utilisez le code d’intégration fourni, vous n’êtes pas confronté à une fenêtre d’erreur, comme ce serait le cas si si vous essayiez d’intégrer manuellement une vidéo YouTube.

Pour ajouter le code à votre page Web :

  • Utilisez un bloc HTML personnalisé si vous souhaitez ajouter l’iFrame à un article ou une page dans l’éditeur de blocs.
  • Collez le code d’intégration.

OU

Si vous utilisez l’éditeur classique, allez dans l’éditeur de texte et collez le code à n’importe quel endroit de la publication où vous souahitez que l’iFrame apparaisse.

Le processus d’intégration de contenu à partir de Facebook est plus ou moins le même que pour YouTube.

  • Accèdez à la publication Facebook que vous souhaitez afficher sur votre site Web, puis cliquez sur le bouton des options.
  • Cliquez sur Embed.
  • Copiez le lien d’intégration, puis suivez les mêmes étapes que celles décrites pour l’ajout d’une iFrame avec YouTube.

 

Comment utiliser les plugins pour ajouter une iFrame ?

Comment utiliser les plugins pour ajouter une iFrame ?

 

Si vous ne voulez pas vous occuper vous-même du codage, vous pouvez laisser un plugin faire le travail pour vous. Les deux plugins iFrame les plus utilisés et que je recommande également sont iFrame et Advanced iFrame.

Le plugin iFrame vous permet d’afficher du contenu externe sur votre site Web WordPress, et vous pouvez ajuster les attributs comme vous le feriez en intégrant manuellement du code (dans la première méthode que nous avons examinée). De cette façon, vous pouvez utiliser des shortcodes pour modifier les paramètres sans avoir à manipuler de code.

L’autre excellent plugin d’intégration, Advanced iFrame, vous permet également d’utiliser des shortcodes pour ajouter des iFrames à votre site Web. Cependant, ce plugin est livré avec quelques fonctionnalités supplémentaires, comme un code de sécurité, l’option de masquer des zones de la mise en page pour fournir plus d’espace pour l’iFrame, des outils supplémentaires de personnalisation de l’affichage, l’option de masquer le contenu jusqu’à ce qu’il soit entièrement chargé, et ainsi de suite. Vous pouvez consulter la liste complète des fonctionnalités sur la page du plugin.

 

Pour récapituler, l’utilisation des iFrames est une excellente idée car elle permet de :

  • Vous garder légalement en sécurité.
  • Garder votre charge de stockage légère.

De plus, comme vous pouvez le voir dans ce guide, ajouter des iFrames à votre site WordPress est assez facile !

Nous avons vu comment vous pouvez ajouter des iFrames manuellement, comment vous pouvez utiliser un code d’intégration existant pour les vidéos YouTube et les publications Facebook, et comment vous pouvez utiliser un plugin WordPress, si vous ne voulez pas vous embêter avec le moindre codage. Je vous ai également expliqué comment personnaliser l’iFrame pour qu’elle s’affiche de manière optimale sur votre page Web.

Avec un peu de chance, votre site Web sera bientôt doté d’un contenu externe impressionnant qui renforcera son apparence et ses ressources !

Comment ajouter des iFrames a votre site WordPress generated pin 285938
pinit fg en round red 32
Consultante SEO et Formatrice SEO - WordPress chez Reussir en Ligne
Geek depuis son plus jeune âge, Valérie a créé et référencé son premier site professionnel en 2000. Après plus de 12 ans d'expériences professionnelles dans les médias et le digital, Valérie Verpoest crée son agence digitale en 2018 et développe son organisme de formation certifié Qualiopi en 2020. Depuis le lancement de sa formation, Valérie Verpoest a accompagné plus de 200 entrepreneurs à créer leur site internet sur WordPress et être visible sur les moteurs de recherche.
Valérie passe son temps libre à partager ses connaissances sur les réseaux sociaux et sur ce blog.
Valérie Verpoest

0 commentaires

Prix promo : Toutes les formations sont à -60% avec le code REDUC60 jusqu'au 31 Décembre 2024 !

X