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

1. 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).
2. 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).
3. 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).
4. 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

1. 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 »).
2. 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.
3. 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>

4. 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 ?