Как добавить гороскоп на сайт с помощью API, парсинга и готовых виджетов

Гороскопы – популярный контент, который привлекает посетителей и повышает время нахождения на сайте. В этой статье мы подробно разберём, как добавить астрологический сервис на ваш веб‑ресурс, используя готовые API, собственный парсер или готовый виджет. Вы найдёте:

Обзор популярных API гороскопов (VGoroskope, AstroAPI, другие).
Пошаговую инструкцию по подключению API через JavaScript, PHP и WordPress.
Рекомендации по кэшированию, SEO и дизайну.

Выбор способа получения гороскопа

Существует три основных подхода:

Готовый публичный API – самый простой способ. Примеры: VGoroskope, AstroAPI. Обычно требуется регистрация и получение API‑key.
Парсинг открытых страниц – если публичного API нет, можно собрать данные с сайтов‑источников (например, https://74.ru/horoscope/daily/) при помощи BeautifulSoup + Flask или аналогов.

Почему лучше использовать API?

Легальная лицензия и отсутствие риска блокировки.
Структурированные данные (JSON) – удобно обрабатывать.
Поддержка разных периодов: дневные, недельные, месячные, годовые предсказания.
Возможность получать дополнительные данные: совместимость, лунный календарь, натальная карта.

Регистрация и получение доступа к API

Рассмотрим процесс на примере VGoroskope – одного из самых популярных сервисов.

Перейдите на страницу регистрации и заполните форму.
Подтвердите e‑mail и согласитесь с Политикой конфиденциальности и Договором оферты.
В личном кабинете получите API‑key и URL‑эндпоинт, например:
```
https://api.vgoroskope.ru/v1/horoscope?sign=aries&date=2026-07-20&key=YOUR_API_KEY
```
Обратите внимание на ограничения: количество запросов в минуту, типы доступных предсказаний и необходимость указания Referer (домена).

Аналогично работает AstroAPI – после регистрации вам будет доступен https://api.astroapi.com/horoscope/daily с параметрами sign и date.

Интеграция API в ваш сайт

Через JavaScript (fetch)

Подключение напрямую из браузера удобно, но требует CORS‑разрешения от сервера. Большинство сервисов уже включают нужные заголовки.

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Гороскоп дня</title>
<style>
.horoscope {font-family: Arial, sans-serif; margin: 20px; padding: 15px; border: 1px solid #ccc; border-radius: 8px;}
.horoscope h3 {margin-top:0;}
</style>
</head>
<body>
<div id=»horoscope-widget» class=»horoscope»>Загрузка…</div>

const url = `https://api.vgoroskope.ru/v1/horoscope?sign=${SIGN}&date=${TODAY}&key=${API_KEY}`;

fetch(url)
.then(response => {
if (!response.ok) throw new Error(‘Network response was not ok’);
return response.json;
}) .then(data => {
const widget = document.getElementById(‘horoscope-widget’); <h3>Гороскоп для ${data.sign}</h3>
<p>${data.text}</p>
<small>Дата: ${data.date}</small>
`;
})
.catch(err => {
console.error(‘Ошибка загрузки гороскопа:’, err);
document.getElementById(‘horoscope-widget’).innerText = ‘Не удалось загрузить гороскоп.’;
});
</script>
</body>

Что важно учитывать

Кеширование – храните полученный гороскоп в localStorage или на сервере минимум 1 час, чтобы сократить количество запросов.
Обработка ошибок – пользователь должен увидеть дружелюбное сообщение, если API недоступен.
Выбор знака – можно добавить выпадающий список и менять SIGN динамически.

Через PHP (серверный запрос)

Если ваш хостинг поддерживает PHP, лучше выполнять запросы на сервере – так вы скрываете API‑key от клиента.

<?php
// config.php
define('VGOROSKOPE_KEY', 'YOUR_API_KEY');
define('VGOROSKOPE_ENDPOINT', 'https://api.vgoroskope.ru/v1/horoscope');

/*
  Получить гороскоп из API
 
  @param string $sign Знак зодиака (aries, taurus, …)
 
 @param string $date Дата в формате YYYY-MM-DD
 @return array|null Массив с данными или null при ошибке
 
 */
function getHoroscope(string $sign, string $date): ?array {
 $url = VGOROSKOPE_ENDPOINT . "?sign={$sign}&date={$date}&key=" . VGOROSKOPE_KEY;

 $ch = curl_init($url);
 curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
 curl_setopt($ch, CURLOPT_TIMEOUT, 5);
 $response = curl_exec($ch);
 $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
 curl_close($ch);

 if ($httpCode !== 200) {
 error_log("VGoroskope API error: HTTP {$httpCode}");
 return null;
 }

 $data = json_decode($response, true);
 return $data ?: null;
}

// Пример использования:
$sign = $_GET['sign'] ?? 'aries';
$date = date('Y-m-d');
$horoscope = getHoroscope($sign, $date);
?>
<html lang="ru">
<head>
 <meta charset="UTF-8">
 <title>Гороскоп дня</title>
 <style>
 .horoscope {font-family: Verdana, sans-serif; background:#f9f9f9; padding:20px; border-radius:6px;}
 </style>
</head>
<body>
 <div class="horoscope">
 <?php if ($horoscope): ?> <p><?= nl2br(htmlspecialchars($horoscope['text'])) ?></p>
 <small>Дата: <?= $horoscope['date'] ?></small>
 <?php else: ?>
 <p>Не удалось загрузить гороскоп. Попробуйте позже.</p>
 <?php endif; ?>
 </div>
</body>

Плюсы серверного подхода

Ключ API не виден в браузере.
Можно реализовать кеширование в файлах или Redis (пример ниже).
Отсутствие проблем с CORS.

Кеширование на сервере (пример с файловым кешем)

<?php
function getHoroscopeCached(string $sign, string $date): ?array {
 $cacheFile = __DIR__ . "/cache/horoscope_{$sign}_{$date}.json";
 $cacheTTL = 3600; // 1 час

 // Если кеш существует и свежий – читаем из него
 if (file_exists($cacheFile) && (time ⏤ filemtime($cacheFile) < $cacheTTL)) {
 return json_decode(file_get_contents($cacheFile), true);
 }

 // Иначе делаем запрос к API
 $data = getHoroscope($sign, $date);
 if ($data) {
 // Сохраняем в кеш
 file_put_contents($cacheFile, json_encode($data));
 }
 return $data;
}
?>

Интеграция в популярные CMS

WordPress

Для WordPress существует два простых способа:

Создание собственного мини‑плагина – позволяет добавить отдельный шорткод [horoscope sign="aries"].

Пример мини‑плагина:

<?php
/*
Plugin Name: Гороскоп от VGoroskope
Version: 1.0
*/

function horoscope_shortcode($atts) {
 $atts = shortcode_atts([
 'sign' => 'aries',
 ], $atts, 'horoscope');

 $sign = sanitize_text_field($atts['sign']);
 $date = date('Y-m-d');

 // Запрос к API (можно вынести в отдельную функцию, как в примере выше)
 $url = "https://api.vgoroskope.ru/v1/horoscope?sign={$sign}&date={$date}&key=YOUR_API_KEY";
 $response = wp_remote_get($url);
 if (is_wp_error($response)) {
 return 'Не удалось загрузить гороскоп.';
 }

 $body = wp_remote_retrieve_body($response);
 $data = json_decode($body, true);
 if (empty($data['text'])) {
 return 'Гороскоп недоступен.';
 }

 $out = '<div class="horoscope-widget">'; $out .= '<p>' . esc_html($data['text']) . '</p>'; $out ;= '</div>';
 return $out;
}
add_shortcode('horoscope', 'horoscope_shortcode');
?>

После активации плагина используйте шорткод в любой части сайта:

[horoscope sign="leo"]

Joomla, Drupal, DLE

Дизайн и пользовательский опыт

Адаптивность – используйте max-width: 100% и flexbox, чтобы виджет выглядел хорошо на мобильных устройствах.
Тема сайта – подгоняйте цвета, шрифты и иконки под общий стиль.
Интерактивность – добавьте выпадающий список знаков, кнопку «Обновить» и анимацию появления текста.
SEO – если гороскоп важен для поисковой выдачи, выводите его в виде обычного текста (не только через JavaScript), а также добавляйте meta description с кратким предсказанием.

Пример стилизованного виджета

<style>
.horoscope-widget {
 background:#fff8e1;
 border:1px solid #ffcc80;
 border-radius:8px;
 padding:15px;
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 max-width:350px;
}
.horoscope-widget h3 {
 margin:0 0 8px;
 color:#d84315;
}
.horoscope-widget p {
 margin:0 0 10px;
 line-height:1.4;
}
.horoscope-widget small {
 color:#757575;
}
</style>

Часто задаваемые вопросы (FAQ)

Можно ли использовать бесплатный API?

Да, есть несколько бесплатных сервисов (например, Aztro), но у них обычно ограниченный набор функций и более строгие лимиты. Для коммерческих проектов рекомендуется платный план.

Что делать, если API закрыт?

Если сервис объявил, что доступ закрыт, ищите альтернативы (AstroAPI, open‑source проекты) или реализуйте парсер собственного источника, но учитывайте юридические аспекты.

Как обезопасить ключ API?

Храните ключ только на сервере, никогда не вставляйте его в клиентский JavaScript. Если нужен клиентский запрос, используйте прокси‑скрипт (PHP, Node.js), который добавит ключ и вернёт данные.

Можно ли кэшировать гороскоп в браузере?

Да, используйте localStorage или IndexedDB. Пример:

let cached = localStorage.getItem('horoscope_' + SIGN);
if (cached) {
 const data = JSON.parse(cached);
 if (new Date(data.date) >= new Date) {
 render(data);
 } else {
 fetchAndCache;
 }
} else {
 fetchAndCache;
}

<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Гороскоп дня</title>
<style>
.widget {max-width:320px; margin:auto; padding:15px; background:#f0f8ff; border:1px solid #b0c4de; border-radius:6px;}
.widget h3 {margin:0 0 10px; color:#4682b4;}
.widget select {margin-bottom:10px; width:100%;}
</style>
</head>
<body>
<div class="widget" id="horoscope">Загрузка...</div>

// При загрузке показываем гороскоп для первого знака
loadHoroscope('aries');
</script>
</body>

Встроить гороскоп на сайт – задача, которую можно решить за несколько минут, если воспользоваться готовым API. Главное помнить о:

Регистрации и защите API‑key.
Кешировании запросов (чтобы не превышать лимиты и ускорить загрузку).
Адаптивном дизайне и удобстве выбора знака.
Соблюдении юридических требований (политика конфиденциальности, условия использования API).

Следуя инструкциям из этой статьи, вы сможете добавить астрологический контент, который будет радовать ваших посетителей и повышать вовлечённость.

Автор: ваш помощник‑разработчик.
Дата публикации: 20 июля 2026 г.