27/10/2014 à 00h52
Mon widget météo pour votre site web

Les prévisions météo sur votre site internet, ça vous dit ?

Évidemment, il existe des widgets à installer très vite, comme sur le site Weather Widget. Mais vous ne pouvez pas changer tout ce que vous souhaitez, ni ajouter les options graphiques qui vous conviennent. Sans compter que tout dépend de la charge du serveur du site qui doit envoyer les images, les feuilles de style,... Par conséquent, on peut ralentir le chargement de sa page web.

Je vous propose un concept complètement différent: tous les fichiers sont sur votre serveur, et le seul élément à télécharger est le résultat d'une requête sur le site Yahoo!*. Le site vous permet de faire des requêtes gratuitement. (Mise à jour 2019: il faut déclarer votre appli et demander une clé pour autoriser l'accès à l'API. La procédure est expliquée ici)
On obtient donc la météo actuelle (situation, température, vent et humidité), ainsi que les tendances de la journée et des 5 jours qui suivent. L'affichage alterne automatiquement toutes les 5 secondes.

Voici les fichiers source à installer. Il vous reste à insérer les valeurs fournies par Yahoo! entre les guillemets pour:
$app_id = '';
$consumer_key = '';
$consumer_secret = '';
J'ai minimisé la taille des images et des fichiers, sans renoncer à la qualité du résultat. Un effet de "Carrousel" est obtenu grâce à Owl Carrousel, un module jquery créé par Bartosz Wojciechowski, et que je trouve très pratique.

Ensuite, il suffit d'envoyer l'ensemble des fichiers sur votre serveur (avec PHP v5.2 minimum donc pas sur une page de chez free.fr !). Il est alors possible de placer le widget sur votre site en adaptant le code, ou en faisant tout simplement un "iframe" de 230 pixels de large et 130 pixels de haut.
Pour choisir la ville dont vous souhaitez les prévisions météo, ajoutez simplement le paramètre "ville" dans l'url, par exemple: "file_weather.php?ville=New York".
Démonstration:

C'est très simple, et une fois que vous avez choisi de personnaliser le widget, vous ne pourrez plus vous en passer !
*[UPDATE 21/06/2021]: Malheureusement, le site de Yahoo ne propose plus l'API de météo... vous pouvez toutefois utiliser n'importe quel API gratuite, par exemple "Open Weather API" pour adapter le code du widget.
Commentez [0]