Le widget Météo France sur votre site
{up meteo-france=ville | orientation=sens}le code commune de la ville à récupérer sur http://www.meteofrance.com/meteo-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
Style CSS
- id: Identifiant
- 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"
booked.net (version française)
Des grands widgets, des petits, des complets et des minimalistes, personnalisables sont disponibles. Plus d'info ICI
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}
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)
upactionslist (1) div (4) meteo-france (3) flexbox (7) html (12) addscript (1) jcontent-info (1)