Как добавить виджет погоды к себе на сайт?

И швец, и жнец, и дождя провидец

Создайте гостевую книгу, установите чат и используйте хостинг народ.ру. Именно так начиналась бы книга «Вредные советы» Григория Остера, если бы он писал про то, как добавить интерактивности на сайт. Сейчас огромное количество сервисов публикует свои API для разработчиков, которые можно использовать на своих ресурсах в качестве источника информации. Один из таких элементов — виджет погоды. И это идеальный пример для интеграции в новостной региональный сайт или местный административный ресурс. Мы написали небольшой туториал как быстро и без проблем встроить такой на свой сайт.

Виджет на сайт

Чтобы встроить виджеты погоды для сайта необходимо минимум знаний по структуре сайта. Ребята из Meteolabs запили несколько бесплатных виджетов с максимально точной погодой по всем крупным городам и регионам России. На сайте можно выбрать несколько видов дизайна, которые, в свою очередь, можно тоже кастомизировать.  Некоторые информеры (например, G) позволяют отображать погоду в реальном времени сразу в нескольких городах

Как добавить виджет погоды к себе на сайт?

Можно выбрать не только язык внутри виджета, но и цвет, шрифт, ширину и даже сглаживание углов

Как добавить виджет погоды к себе на сайт?

Когда вы закончили адаптацию оформление под стиль вашего сайта, в правом углу будет код виджета, который необходимо встроить в нужное место на сайте

Как добавить виджет погоды к себе на сайт?

Если у вас WordPress, то самое очевидное место для установки — это правый или левый сайдбар. Здесь даже не потребуется лезть в код. Откройте раздел «Внешний вид» -> «Виджеты» и вставьте плашку «HTML-код» в название вашего сайдбара и вставляем туда код с сайта

Как добавить виджет погоды к себе на сайт?

Сохраняем код и наблюдаем результат. Для привлечения внимания можно закрепить этот элемент как фиксированный («липкий сайдбар»)

Как добавить виджет погоды к себе на сайт?

Отцентировать виджет в сайдбаре можно с помощью конструкции <div align=center>, либо прописать параметр justify-content: center в код виджета. Как вариант, можно использовать один из классов, которые уже есть у вас на сайте и добавить соответствующее выравнивание в стиль CSS через «Внешний вид» -> «Редактор тем» (для редактирования необходимо выставить права на необходимый файл 777).

Читайте также:  Ищем хороший онлайн-переводчик с украинского на русский

Не получается установить. Что делать?

Meteolabs предоставляет бесплатный саппорт всем, кто захочет использовать их виджеты погоды на своих сайтах. Можно написать им на электронную почту: informer@meteolabs.ru, либо постучаться в скайп alexbaluc (только текстовые сообщения). Так же вы можете попросить помощи у нас в комментариях. Будет здорово, если к описанию проблемы вы приложите скриншот.

Как вам статья?

Рейтинг
( Пока оценок нет )
Диджитал на минималках