Как встроить гороскоп на сайт

Гороскоп — это отличный способ удержать посетителей на сайте и регулярно возвращать их за новой порцией контента. Ниже вы найдёте подробную пошаговую инструкцию: от выбора источника до публикации кода на вашей странице.

Выбираем источник данных

Готовые RSS/XML-каналы

• astrostar.ru — бесплатный RSS для 12 знаков;
• horoscope.ru, платное API с расширенными текстами.

Бесплатные API

Вручную создаём гороскопы

Если вы не доверяете сторонним сервисам, можно хранить собственные тексты в JSON-файле и обновлять их по расписанию.

Пример минимального блока

<section id="horoscope">
 <h3>Гороскоп на сегодня</h3>
 <select id="zodiac">
 <option value="aries">Овен</option>
 <option value="taurus">Телец</option>
 <!-- и т.д. -->
 </select>
 <div id="horo-text">Выберите знак</div>
</section>

Получаем данные через JavaScript

Ниже приведён пример на чистом fetch для Aztro API:

async function getHoro(sign) {
 const url = `https://aztro.sameerkumar.website/?sign=${sign}&day=today`;
 const res = await fetch(url, {method: 'POST'});
 const data = await res.json; <p><b>${data.description}</b></p>
 <ul>
 <li>Совместимость: ${data.compatibility}</li>
 <li>Настроение: ${data.mood}</li>
 <li>Цвет: ${data.color}</li>
 <li>Удачное число: ${data.lucky_number}</li>
 </ul>
 `;
}

Подключаем стили

/* styles.css */
#horoscope {
 max-width: 320px;
 margin: 0 auto;
 padding: 1rem;
 border: 1px solid #ddd;
 border-radius: 8px;
 font-family: 'Segoe UI', sans-serif;
 background: #fdfdfd;
}
#horoscope h3 {margin-top:0; color:#8e44ad;}
#horoscope select {width:100%; margin-bottom:0.5rem;}
#horo-text li {margin:0.25rem 0;}

Кеширование и оптимизация

1. Кешируйте запросы. Храните ответ в localStorage на 24 ч, чтобы не превысить лимит API.
2. Ленивая загрузка. Загружайте гороскоп только при прокрутке до блока.
3. CDN fallback. Если API недоступен, показывайте запасной текст или старые данные.

SEO и юридические моменты

• Добавьте rel="nofollow" на внешние ссылки API, если они присутствуют;
• Укажите авторство или источник в подвале блока;
• Убедитесь, что контент не нарушает авторских прав (при использовании платных API всегда читайте лицензию).

Полный пример на одной странице

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Гороскоп онлайн</title>
<link rel=»stylesheet» href=»styles.css»>
</head>
<body>
<section id=»horoscope»>
<h3>Гороскоп на </h3>
<select id=»zodiac» onchange=»getHoro(this.value)»>
<option value=»»>— выберите знак —</option>

<option value=»aries»>Овен</option>
<!— остальные знаки —>
</select>
<div id=»horo-text»>Выберите знак зодиака</div>
</section>
<script src=»horo.js»></script>
</body>

Встроив гороскоп всего за 30 минут, вы получите:

• ежедневно обновляемый контент без ручных правок;
• увеличение времени на сайте и повторных визитов;
• дополнительный канайл для монетизации (рекламные баннеры или партнёрские ссылки под блоком).

Главное — не забывайте следить за лимитами API и своевременно продлевать ключи. Удачи в космических экспериментах на вашем сайте!