AI WORLD HQIntégrez un mini-widget météo IA à votre blog grâce aux widgets Hugging Face
Ajoutez un widget météo interactif et sans code à votre blog en moins de 10 minutes grâce aux widgets prêts à l'emploi de Hugging Face.
Accroche : Imaginez que les visiteurs de votre blog voient la météo actuelle juste à l'endroit où vous parlez de voyages ou d'activités en plein air. Avec les widgets Hugging Face, vous pouvez insérer un petit assistant météo interactif sur n'importe quelle page — aucun codage n'est requis. À la fin de ce guide, vous aurez un widget fonctionnel qui se met à jour automatiquement et s'affiche parfaitement sur ordinateur de bureau et sur mobile.
💡 Astuce: appuie sur le numéro d’une étape quand tu l’as terminée — une coche verte apparaît et ton navigateur retient où tu en étais.
- Un blog ou un site web que vous pouvez modifier (WordPress, Wix, Squarespace, GitHub Pages, etc.)
- Un compte Hugging Face gratuit (inscription en 2 minutes)
- 10 minutes de votre temps et un éditeur de texte ou le tableau de bord de votre blog
- Aucun abonnement payant n'est nécessaire pour cette tâche
Connectez-vous à Hugging Face
Ouvrez n'importe quel navigateur web et allez sur https://huggingface.co. Dans le coin supérieur droit, cliquez sur Log in / Sign up. Choisissez Sign up et remplissez votre adresse e-mail, votre nom d'utilisateur et votre mot de passe. Vérifiez votre boîte de réception pour un e-mail de vérification et cliquez sur le lien qu'il contient. Vous arriverez sur votre nouvelle page de profil.
Vous saurez que cela a fonctionné lorsque vous verrez votre nom d'utilisateur dans le coin supérieur droit et que la page affichera « Welcome to Hugging Face, [votre nom] ».
Ouvrez la galerie de widgets
Une fois connecté, regardez la barre latérale gauche et cliquez sur Widgets (c'est près du bas, sous « Resources »). Une nouvelle page se charge, affichant une grille de widgets prêts à l'emploi. Chacun est un petit bloc interactif que vous pouvez coller dans votre blog.
Vous saurez que cela a fonctionné lorsque vous verrez un titre qui dit « Browse all widgets » et une liste de cartes colorées.
Choisissez le widget météo
Sur la page des widgets, utilisez la barre de recherche en haut et tapez weather. Vous verrez une carte intitulée « Weather widget » avec une petite icône de soleil et de nuage. Cliquez une fois sur la carte pour ouvrir sa page de détails. Cette page affiche un aperçu en direct, les paramètres et le code d'intégration dont vous avez besoin.
Vous saurez que cela a fonctionné lorsque vous verrez un affichage météo en direct et des options telles que « Location » et « Units ».
Choisissez vos paramètres
Sur la page du widget, vous pouvez définir la ville, l'unité de température (Celsius ou Fahrenheit) et le thème de couleur. Choisissez la ville qui intéresse le plus les lecteurs de votre blog. Laissez les autres options par défaut pour le moment. Au fur et à mesure que vous modifiez les paramètres, l'aperçu se met à jour instantanément afin que vous puissiez voir à quoi il ressemblera.
Si l'aperçu ne se met pas à jour, actualisez la page ou vérifiez votre connexion internet.
Vous saurez que cela a fonctionné lorsque l'aperçu affichera la ville et l'unité de température correctes.
Copiez le code d'intégration
Sous l'aperçu, vous trouverez une boîte intitulée Embed this widget. Cliquez à l'intérieur de la boîte pour sélectionner tout le code, puis appuyez sur Cmd+C (Mac) ou Ctrl+C (Windows) pour le copier. Le code commence par <iframe et se termine par </iframe>.
Si vous ne voyez pas la boîte d'intégration, cherchez un bouton intitulé Copy to clipboard ou Embed.
Vous saurez que cela a fonctionné lorsque vous aurez le code dans votre presse-papiers et que la boîte affichera une coche verte.
Collez le code dans votre blog
Ouvrez l'éditeur de votre blog (WordPress, Wix, Squarespace, etc.) et allez à la page ou au billet où vous voulez le widget. Basculez l'éditeur en mode HTML (parfois appelé « Code view »). Collez le code que vous avez copié exactement là où vous voulez que l'assistant météo apparaisse. Revenez au mode Visuel et enregistrez la page.
Si votre éditeur n'a pas de mode HTML, cherchez un bloc « Embed » ou « Custom HTML » et collez-y le code.
Vous saurez que cela a fonctionné lorsque vous verrez la boîte météo interactive apparaître sur la page et qu'elle affichera la température actuelle.