Как передавать информер на другие сайты

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

С помощью JavaScript и JSONP (JSON with Padding)

Этот метод позволяет обойти политику безопасности браузера (Same Origin Policy), которая препятствует обмену данными между доменами.

Пример:
Информер на сайте (HTML):

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Инфомер</title>
</head>
<body>
    <div id="infomer"></div>
    <script src="https://example.com/informer.js"></script>
</body>
</html>

Сторонний сайт (informer.js):

// informer.js
(function() {
    var infomerDiv = document.getElementById('infomer');
    var scriptEl = document.createElement('script');
    scriptEl.src = 'https://example.com/get-data.php?callback=updateInfomer';
    document.head.appendChild(scriptEl);

    function updateInfomer(response) {
        infomerDiv.innerHTML = `
            <h2>${response.title}</h2>
            <p>${response.description}</p>
        `;
    }
})();

Скрипт отправки данных (get-data.php):

<?php
header('Content-Type: application/javascript');
$data = [
    'title' => 'Новости!',
    'description' => 'Свежие новости на сайте.'
];

echo $_GET['callback'].'('.json_encode($data).');';

С помощью iframe

Еще один способ разместить информер — это использование iframe. Этот метод не нарушает политику Same Origin Policy, так как iframe воспринимается как отдельная страница.

Пример:
Информер на сайте (HTML):

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Информер</title>
</head>
<body>
    <iframe src="https://example.com/inform-frame.html" style="width: 300px; height: 200px; border: none;"></iframe>
</body>
</html>

Информер (inform-frame.html):

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Информер</title>
</head>
<body>
    <h2>Новости!</h2>
    <p>Свежие новости на сайте.</p>
</body>
</html>

С помощью Cross-Origin Resource Sharing (CORS)

CORS позволяет разрешить кроссдоменные запросы с серверной стороны, что позволяет сайтам запрашивать данные напрямую через AJAX.

Пример:
Информер на сайте (HTML):

<!-- index.html -->
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Инфомер</title>
</head>
<body>
    <div id="infomer"></div>
    <script>
        fetch('https://example.com/api/v1/news')
            .then(response => response.json())
            .then(data => {
                document.getElementById('infomer').innerHTML = `
                    <h2>${data.title}</h2>
                    <p>${data.description}</p>
                `;
            })
            .catch(error => console.error('Ошибка:', error));
    </script>
</body>
</html>

Сервер (API endpoint):

<?php
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

$data = [
    'title' => 'Новости!',
    'description' => 'Свежие новости на сайте.'
];

echo json_encode($data);

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