Cet article s’adresse aux entreprises qui cherchent une solution simple et peu coûteuse pour améliorer un site web existant sans passer par l’étape douloureuse de la refonte totale. Que ce soit pour présenter vos dernières réalisations ou mettre en avant votre entreprise, la publication de vos photos les plus récentes sur votre site est le moyen le plus efficace de transformer un site statique en site dynamique.

Grâce aux iframes, vous avez désormais la possibilité d’intégrer facilement vos photos sur votre site internet, directement depuis votre téléphone. Suivez le guide !

Qu'est-ce qu'une iframe ?

Une iframe, ou "cadre en ligne", est un élément informatique (html) qui vous permet d'intégrer un contenu externe dans un site web existant. Cela peut être une page web externe, une vidéo, une carte interactive, ou, plus pertinent pour les petites entreprises, une galerie de photos. Cette intégration se fait sans modifier la structure globale de votre site, simplement en collant une ligne de code dans votre site.

Pourquoi utiliser les iframes ?

Rappelons tout d’abord l’objectif d’un site internet : présenter votre offre et véhiculer votre image de marque auprès de prospects, clients, partenaires, prescripteurs ou salariés (on parle alors de "marque employeur").

La présence de photos mises à jour régulièrement sur votre site améliorera immédiatement votre image en faisant de vous une entreprise active et connectée. L’affichage de contenu récent et pertinent permettra en outre à vos visiteurs de quitter votre site avec :
- une confiance accrue dans votre entreprise,
- le souhait de collaborer avec vous plus tard, que ce soit comme client ou salarié,
- l'envie de recommander votre entreprise.

Revenons aux iframes : en quoi sont-elles particulièrement adaptées pour rafraichir votre site actuel ?

1. Pour leur facilité de mise en place : avec les iframes, vous transformez votre site web statique en site dynamique en quelques clics, sans besoin de connaissances techniques avancées.

2. Pour leur mise à jour automatique :  l’encart généré sur votre site grâce à l’utilisation de l’iframe se met à jour automatiquement sans que vous n’ayez rien à faire une fois l’iframe ajoutée dans le code de votre site.
Si par exemple vous choisissez d’afficher sur votre page d’accueil une iframe générée et mise à jour par Letmo - l'application de gestion de photos pour les pros – votre site internet affichera automatiquement toutes vos dernières photos, dès que celles-ci seront ajoutées dans la galerie de l’application depuis votre téléphone.

3. Pour leur économie de temps et d'argent : pas de refonte de site complexe et coûteuse, vous utilisez une méthode simple qui fait un lien direct entre le contenu de votre téléphone et l’affichage de votre site.

Comment intégrer une iframe sur votre site, étape par étape.

Nous détaillons ici l’intégration d’une iframe générée par l’application Letmo depuis votre téléphone.

Après avoir créé un compte sur l’application Letmo, rendez-vous dans le menu "Publication" puis dans la rubrique "Mon site actuel", où vous allez choisir le contenu que vous souhaitez publier sur votre site.

1. Choisir le contenu :
Letmo vous permet de publier 3 types de contenu :
- la galerie de vos plus belles photos, c’est-à-dire les photos que vous avez ajoutées et likées sur l’application Letmo,
- la liste de tous vos dossiers publics créés sur l’application (vos visiteurs accéderont à une liste de vos dossiers et pourront visionner leur contenu)
- le contenu d’un seul dossier que vous choisissez directement dans l’application.

Vous pouvez combiner ces contenus et afficher par exemple votre galerie sur la page d’accueil de votre site et vos dossiers publics dans votre page « nos réalisations ».
‍
Attention tout de même à surveiller la vitesse de chargement de votre site, si vous le     surchargez avec de trop nombreuses iframes, cela risque d’être pénalisant.

2. Générer le code iframe :  
une fois le contenu choisi sur l’application, Letmo génère une ligne de code iframe que vous pouvez soit copier, soit partager/envoyer par email, sms, whatsapp,… à l’aide des boutons dédiés.

3. Insérer le code dans votre site :
si vous maintenez votre site vous-même, il vous suffit de coller le code iframe à l'endroit souhaité sur votre site. Cela peut souvent être fait via l'interface d'édition de votre site web, sans besoin de toucher au code source.
Si un prestataire s’en occupe, il vous suffit de lui envoyer le code iframe directement depuis l’application Letmo afin qu’il l’intègre lui-même sur votre site. C’est une manipulation très simple qui ne prendra que quelques minutes à un professionnel expérimenté.

Une fois ces étapes réalisées et la nouvelle version de votre site publiée, vous pouvez immédiatement vérifier que l’iframe fonctionne en allant sur votre site internet en tant que visiteur. L’encart créé par l’iframe est immédiatement visible et doit présenter le contenu de l’application choisi par vos soins. Si ce n’est pas le cas, vérifiez bien le code html de l’iframe pour vous assurer qu’une erreur ne s’est pas glissée lors du copier/coller ou du partage.

Comment améliorer le rendu de votre iframe

2 éléments sont importants à prendre en compte lorsqu’on intègre une iframe dans un site :
‍
- la taille et le positionnement de l’encart généré par l’iframe : la taille doit s'adapter à la mise en page de votre site. Trop grande, elle peut submerger le reste de votre contenu ; trop petite, elle peut être négligée par les visiteurs ou n’être pas du tout agréable à consulter pour eux.

- son affichage sur mobile et smartphone, c’est-à-dire ce qu’on appelle le « Responsive design » : assurez-vous que l'iframe est visible et fonctionne correctement sur les appareils mobiles car ce sont désormais 3 visiteurs sur 4 qui consultent internet depuis leur téléphone.

Lorsque vous utilisez Letmo pour générer un code iframe pour votre site, vous avez la possibilité de modifier le style de l'iframe après l’avoir copié dans votre site, afin qu'elle s'intègre parfaitement dans le design global du site. Voici une explication des paramètres de style par défaut et comment vous pouvez les ajuster :

1. Width: 100% : Ce style définit la largeur de l'iframe pour qu'elle occupe 100% de la largeur de l'élément (parent) dans lequel elle est intégrée. Cela garantit que l'iframe s'étend horizontalement sur toute la largeur disponible, ce qui est idéal pour un affichage complet sur différentes tailles d'écran.

Modification : vous pouvez ajuster ce paramètre à une valeur spécifique en pixels ou en      pourcentage pour réduire la largeur de l'iframe. Par exemple, width: 50%; réduira la largeur à la moitié de l'élément parent.

2. Min-height: 400px : Ce style définit la hauteur minimale de l'iframe à 400 pixels. Cela assure que l'iframe aura une hauteur suffisante pour afficher le contenu sans que les utilisateurs aient besoin de trop le faire défiler.

Modification : pour ajuster la hauteur, changez la valeur min-height. Par exemple, min-height: 800px; augmentera la hauteur minimale, ce qui pourrait être utile pour des contenus plus longs.

3. Overflow: scroll : Ce paramètre permet à l'utilisateur de faire défiler le contenu à l'intérieur de l'iframe si le contenu dépasse la hauteur ou la largeur de l'iframe grâce à une barre de scroll.

Modification : nous recommandons de conserver ce paramètre, sinon une partie des photos ou dossiers restera invisible par vos visiteurs, notamment sur les écrans de smartphones.

Conseil et exemple de mise en oeuvre :
Nous vous conseillons de tester le rendu sur votre site et de ne pas hésiter pas à modifier ces paramètres afin que vos iframes s'intègrent du mieux possible dans votre site.
Par exemple si vous avez peu de place disponible et que vous souhaitez une iframe compacte, vous pouvez modifier le style ainsi :
width: 80%; min-height: 400px; border: 1px solid grey; overflow: scroll;  
Cette configuration crée une iframe plus petite avec une bordure grise, adaptée pour des sections spécifiques de votre page.

En conclusion, les iframes représentent une solution simple et économique pour les petites entreprises afin de dynamiser et actualiser leur site web. En combinant l'utilisation pratique des iframes avec des outils comme Letmo, les petites entreprises peuvent désormais gérer et mettre en valeur leur contenu visuel. Cela leur permet de renforcer leur présence en ligne et leur engagement auprès des clients avec un minimum d'effort et de coûts, sans nécessiter de compétence technique pointue. Dans ce contexte, Letmo s'illustre comme un outil particulièrement efficace, offrant à la fois une gestion simplifiée des photos et la facilité de les publier directement sur son site internet, le tout depuis son téléphone.

Source : https://www.francenum.gouv.fr/guides-et-conseils/strategie-numerique/comprendre-le-numerique/barometre-france-num-2023-ou-en-sont