Mettre la météo sur son site web avec le widget de Météo-France (Tuto)
En consultant le site de Météo-France avant de partir en week-end, j’ai pensé à vous ! Je me suis demandé si par hasard il ne proposait pas un petit service web qui permettrait d’intégrer facilement la météo sur son site web… et c’est le cas !
Vous avez un site internet sur lequel afficher les prévisions météo serait une information utile pour vos visiteurs, je pense en particulier aux sites dans la thématique du tourisme, alors voici comment intégrer simplement une vignette météo sur votre site web en utilisant gratuitement les services de Météo-France grâce à ce court tutoriel.
Générer la vignette météo sur le site meteofrance.com
Paramètres de la vignette de Météo-France
- Tout d’abord il faut se rendre sur le site de Météo-France depuis votre navigateur à l’adresse : http://www.meteofrance.com/vignette-partenaire. Il vous est alors proposé 2 formulaires de génération de vignette météo à savoir pour une ville française (à gauche) et pour une ville mondiale (à droite).
- Saisissez puis sélectionnez dans la liste des propositions le nom de la ville de votre choix dans le champ « nom de la ville » associé à sa localisation (France ou monde).
- Sélectionnez ensuite la dimension de la vignette souhaitée. Vous avez le choix entre le format portrait (par défaut) qui fait 150 pixels de large et 300 pixels de hauteur (150 x 300 px) ou le format paysage avec ces dimensions inversées (300 x 150 px).
- Cliquez enfin sur OK. Vous obtiendrez alors l’aperçu des vignettes ainsi que le code HTML à copier-coller sur votre site internet.
Insérer la vignette de Météo-France sur son site internet
Code HTML de la vignette de Météo-France
- Sélectionnez entièrement « le code à insérer dans votre page web » qui commence par « <script… » et se termine par « </script> » (double clic dans la zone puis clic droit « copier »).
- Rendez-vous ensuite dans l’éditeur de votre page internet dans laquelle vous souhaitez mettre le widget de la météo ; si vous utilisez un CMS comme WordPress, ouvrez la page ou l’article où insérer la météo en mode « texte » ou « source » pour afficher le code HTML.
- Parcourez le code source de votre page et collez à l’endroit souhaité le code copié depuis le site de Météo-France (clic droit « coller »). Exemple de code pour Paris 1er Arrondissement (75001) :
<script charset='UTF-8' src='http://www.meteofrance.com/mf3-rpc-portlet/rest/vignettepartenaire/751010/type/VILLE_FRANCE/size/PORTRAIT_VIGNETTE' type='text/javascript'></script>
- Enregistrez et testez le rendu dans votre navigateur. Si besoin, déplacez le code juste inséré pour mieux positionner la vignette météo dans votre mise en page. Si vous souhaitez changer le format de la vignette, reproduisez les étapes précédentes pour regénérer un nouveau code HTML à remplacer dans votre code source de votre page web. Si cela ne marche pas, il se peut que vous deviez préciser un arrondissement lors du choix de la ville dans le formulaire de Météo-France ; c’est ce que j’ai constaté en sélectionnant Paris tout court, ça ne marchait pas, en sélectionnant le 1er arrondissement, la vignette s’est correctement affichée.
Exemple de vignette de Météo-France
Voici pour l’exemple la vignette météo au format portrait de la ville de Paris 1er Arrondissement (75001), sympa non ?!
Voilà vous avez maintenant la météo de votre ville des prochaines 24 heures sur votre site internet. Pour accéder aux prévisions au-delà, il faudra à vos visiteurs cliquer sur le lien « les prévisions à 10 jours » ; ils seront alors redirigés sur le site de meteofrance.com à la page détaillant la météo de la ville.
Il existe d’autres solutions pour afficher la météo sur son site, j’essaierai de les développer dans des prochains articles. Et vous, allez-vous proposer la météo sur votre site internet, et quelle solution avez-vous choisie ?
14 commentaires
Jules de Strasbourg Pratique
29 décembre, 2014C’est vrai que le widget de Meteo France est pratique, après il existe des sites qui propose des widgets personnalisables plus simples et directement intégrable sur n’importe quel site web !
Sébastien
23 juin, 2015Bonjour Jules, aurais-tu des sites à nous recommander ?
Louben | Presto Infos
13 juin, 2015Bonjour !
J’ai trouvé ce service, effectivement mais je cherche un site qui permet d’installer une carte de France en entier et non juste une ville. Est-ce que ça existe ? Merci.
Sébastien
23 juin, 2015Bonjour Louben, j’ai vu que le site de la chaîne météo proposait la météo pour la France entière. A tester à l’adresse http://meteodirect.lachainemeteo.com/meteo-direct/la-meteo-sur-votre-site-ou-votre-blog.php
Laurent G
20 février, 2021Malheureusement ça donne du 404 sur météo France donc plus disponible.
Sébastien
24 février, 2021Merci Laurent, merci de votre retour.
Les widgets Météo France sont désormais disponibles depuis la page : http://services.meteofrance.com/offre-numerique.html
Bien à vous.
Laurent G
24 février, 2021Merci pour ta recherche, tu m’aides bien sur ce coup là Sébastien.
Sébastien
25 février, 2021Avec plaisir Laurent 😉
vernot
12 avril, 2021https://www.prevision-meteo.ch/services/json/
si tu met le nom de ta ville après tu obtiens directement le service en JSON et tu pourra faire ce que tu souhaite avec et personnalisé ton affichage
Bonne journée
Sébastien
13 avril, 2021Merci pour l’info, réservée à des initiés du code quand même 😉
vincent
13 avril, 2021Oui je suis d’accord, mais pour quelqu’un qui cherche à faire un site entièrement à la main, ça peux lui servir.
Pour l’utilisation il faut connaître : Javascript et HTML. Mais on peux obtenir beaucoup d’informations. 😉
Ps: je peux mettre un petit script si ça aide.
Sébastien
13 avril, 2021Avec plaisir, n’hésitez pas à partager votre script 🙂
vincent
13 avril, 2021D’accord, je vous laisse un script qui marche en Javascript pour ma commune :
var request = new XMLHttpRequest();
var result = document.getElementById (‘temps’);
var ville = document.getElementById (‘ville’);
var idToken =’TOKEN’; //code token, mdp site
var adresse = « https://api.meteo-concept.com/api/forecast/daily/0?token= »+idToken; //concaténation pour acces météo 14jour (sans /0) ou avec 1seul jour ( avec /0)
adresse = adresse + « &insee=26106 »; // code insee de la commune, possibilité de faire des recherche à voir le site
/*console.log(adresse); */ // contrôle de la bonne adresse de requête
request.onreadystatechange = function() {
if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
var response = JSON.parse(this.responseText);
console.log(response.forecast.wind10m); // vitesse du vent moyen à 10m
console.log(response.forecast.gust10m); // rafale de vent à 10m
console.log(response.forecast.dirwind10m); // direction du vent 0 à 360
console.log(response.forecast.weather); //indice donnant le temps, se référer à la liste des correspondances
}
};
request.open(« GET », adresse);
request.send();
//https://api.meteo-concept.com/api/forecast/daily/0?token=TOKEN&insee=26106
Pour que ça marche pour vous :
– rechercher le code insee de la ville concernée
– s’enregistrer sur le site http://www.meteo-concept (accés gratuit pour 500 connexions / jours)
– Créer un TOKEN (sort de mot de passe) pour pouvoir avoir accès
– lire la documentation pour la création des liens.
– pour toute infos complémentaire n’hésitez pas, je tacherais de vous répondre.
Ceci est un petit exemple des possibilité, amusez vous bien !!
😉
Sébastien
14 avril, 2021Super, merci beaucoup pour ce partage 🙂