meteo-france ~ prévision Météo France

Le widget Météo France sur votre site

➠ meteo_france : affiche le widget de Météo France

Cliquer pour lire la documentation

Syntaxe : {up meteo-france=ville | orientation=sens}
le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-widget
author LOMART version UP-1.0 du 01-07-2017 license GNU/GPLv3 tags Widget
  • meteo_france: le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-widget
  • orientation = v: bloc horizontal (H) ou vertical (V)
  • block (bloc) = p: balise HTML autour du module météo
  • class: classe(s) pour bloc parent
  • style: style inline pour bloc parent

    IMPORTANT

    Le script de Météo France fonctionnant d'une manière "aléatoire" et "imprévisible", je vous déconseille d'utiliser cette action. Elle est conservée pour l'historique de UP et, ne désepéront pas, dans le cas où elle deviendrait fiable.

    En attendant, je vous propose des alternatives à la fin de cet article.

    ce script permet d'afficher le widget de Météo France.

    Basé sur une idée de Robert Gastaud (aka RobertG) - joomxtensions.com et une discussion sur le forum JOOMLA.FR. Merci à Yann Gomiero (aka Daneel) pour la correction du code

    {up meteo-france=771860}

    Dans sa forme la plus simple, il affiche le widget en vertical pour la ville dont le code insee (6 chiffres) est passé en paramètre.

    Avec quelques paramètres

    {up meteo=751010 | orientation=h | bloc=div | style=text-align:center}
    
    meteo
    le code commune insee à récupérer sur cette page : www.meteofrance.com/meteo-widget
    orientation
    horizontal ou vertical. Seule la première lettre est significative
    bloc
    balise HTML pour entourer le widget. P par défaut
    class
    classe(s) pour le bloc conteneur.
    style
    style personnalisé pour le bloc conteneur. Ici, on centre le widget

    Le code commune insee peut aussi être trouvé sur le site www.galichon.com/codesgeo. Il faut le compléter avec des zéros pour avoir 6 chiffres.

    Et le monde

    Version 1.8 

    Si le code de la commune est sur 5 chiffres, UP considère qu'il s'agit du code d'une ville non française. Le code est à récupérer sur cette page : www.meteofrance.com/meteo-widget

    Exemple pour New-York :

    LES ALTERNATIVES

    Vous trouverez ci-dessous différentes méthodes pour ajouter un widget météo sur votre site. N'hésitez pas à proposer vos solutions.

    Pour chacune des solutions, j'indique un exemple du code fourni par le site, sa traduction en shortcode UP (compatible wysiwyg)  et le rendu graphique.

    meteored

    Un widget météo pour une période de 1 à 7 jours facilement personnalisable (contenu, style, icônes et couleurs)

    Code original

    <div id="cont_9897f302cf88e664286d3616d2443d6f">
    <script type="text/javascript" async src="https://www.theweather.com/wid_loader/9897f302cf88e664286d3616d2443d6f"></script>
    </div>

    Equivalent UP

    {up div | id=cont_9897f302cf88e664286d3616d2443d6f}
    {up html=script
    | type=text/javascript
    | async src=https://www.theweather.com/wid_loader/9897f302cf88e664286d3616d2443d6f
    } {/up div}

    Il est possible de récupérer une image à la place du script.

    <img src="https://www.theweather.com/wimages/fotoa2608fbe777cb6903e87b4da747e0b67.png">
    {up html=img | src=https://www.theweather.com/wimages/fotoa2608fbe777cb6903e87b4da747e0b67.png}

    WeatherWidget.io

    Un widget sans publicité pour une météo sur 1 à 7 jours. Il dispose de plusieurs options pour le personnaliser.

    Code original

    <a class="weatherwidget-io" href="https://forecast7.com/fr/48d862d35/paris/" data-label_1="PARIS" data-label_2="Météo" data-theme="original" >PARIS Météo</a>
    <script>
    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');
    </script>

    Equivalent UP

    {up html=a
    | class=weatherwidget-io
    | href=https://forecast7.com/fr/48d862d35/paris/
    | data-label_1=PARIS
    | data-label_2=Météo
    | data-theme=original}
    PARIS Météo
    {/up html} {up addscript=body}!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src='https://weatherwidget.io/js/widget.min.js';fjs.parentNode.insertBefore(js,fjs);}}(document,'script','weatherwidget-io-js');{/up addscript}

    Attention à ne pas insérer de sauts de lignes dans le shortcode "addscript"


    PARIS Météo

    booked.net (version française)

    Des grands widgets, des petits, des complets et des minimalistes, personnalisables sont disponibles.

    Code original

    <!-- weather widget start -->
    <a target="_blank" href="https://hotelmix.fr/weather/paris-18145">
    <img src="https://w.bookcdn.com/weather/picture/3_18145_1_3_137AE9_250_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=2&domid=581&anc_id=55937" alt="booked.net"/>
    </a>
    <!-- weather widget end -->

    Equivalent UP

    {up html=a
     | target=_blank
     | href=https://hotelmix.fr/weather/paris-18145
    } {up html=img | src=https://w.bookcdn.com/weather/picture/3_18145_1_3_137AE9_250_ffffff_333333_08488D_1_ffffff_333333_0_6.png?scode=2&domid=581&anc_id=55937 | alt=booked.net} {up html} {up html}
    booked.net

    meteoblue

    Un widget météo avec des prévisions sur 4 à 7 jours pour un lieu choisi ou pour l'emplacement du visiteur.

    Beaucoup de possibilités à découvrir sur cette page : https://content.meteoblue.com/fr/modes-d-acces/widget

    Ce widget est disponible en version "Prévisions par tranche de 3 heures", "Prévisions par jour" ou "synthetique"

    Code original

    <iframe src="https://www.meteoblue.com/en/weather/widget/three/paris_france_2988507?geoloc=fixed&nocurrent=0&noforecast=0&days=4&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=image"  frameborder="0" scrolling="NO" allowtransparency="true" sandbox="allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox" style="width: 460px; height: 593px">
    </iframe>
    <div><!-- DO NOT REMOVE THIS LINK -->
    <a href="https://www.meteoblue.com/en/weather/week/paris_france_2988507?utm_source=weather_widget&utm_medium=linkus&utm_content=three&utm_campaign=Weather%2BWidget" target="_blank">
    meteoblue
    </a>
    </div>

    Equivalent UP

    {up iframe=https://www.meteoblue.com/en/weather/widget/three/paris_france_2988507?geoloc=fixed&nocurrent=0&noforecast=0&days=4&tempunit=CELSIUS&windunit=KILOMETER_PER_HOUR&layout=image
     |  frameborder=0
     | scrolling=NO
     | allowtransparency=1
     | sandbox=allow-same-origin allow-scripts allow-popups allow-popups-to-escape-sandbox
     | style=width: 460px; height: 593px
    } {up html=a | href=https://www.meteoblue.com/en/weather/week/paris_france_2988507?utm_source=weather_widget&utm_medium=linkus&utm_content=three&utm_campaign=Weather%2BWidget | target=_blank} meteoblue {/up html}

    M6 météo

    Code original

    <div id="cont_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx">
    <div id="spa_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx">
    <a id="a_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx" href="https://www.meteocity.com/france/paris_v75056/" target="_blank" style="color:#333;text-decoration:none;">
    Météo Paris
    </a> ©
    <a href="https://www.meteocity.com">meteocity.com</a>
    </div>
    <script type="text/javascript" src="//widget.meteocity.com/js/UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx">
    </script>
    </div>

    Equivalent UP

    {up div | id=cont_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx}
    {up div | id=spa_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx}
    {up html=a | id=a_UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx
     | href=https://www.meteocity.com/france/paris_v75056/
     | target=_blank
     | style=color:#333;text-decoration:none;}Météo Paris{/up html}©{up html=a | href=https://www.meteocity.com}meteocity.com
    {/up html}
    {/up div}
    {up html=script | type=text/javascript | src=//widget.meteocity.com/js/UGFyaXN8NXwxfDN8MXxGRkZGRkZ8M3xGRkZGRkZ8Y3wx}
    {/up div}

    Attention : on doit utiliser l'action html au lieu de addscript car il ne s'agit pas d'un fichier identifiable par son extension (.js)