Создание веб виджета для сторонних сайтов

project author

Если Вам понравился данный материал, поделитесь им с вашими друзьями в соц сетях


Перед тем как продолжить ознакомление с данным материалом давайте немного поговорим о том, что такое виджет, где и для чего он используется.

Виджет - это небольшой независимый программный модуль, работающий в некоторой среде (напр. сайте, браузере, мобильном телефоне) и исполняющий, как правило, одну определённую функцию.

Вы наверное видели на страницах сайтов такие элементы, как:

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

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

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

  • установка виджетов не должна вызывает особых сложностей;
  • если дизайн виджета не подходит к общей стилистики сайта, то должна быть возможность его изменения.

Теперь давайте поставим для себя задачу.

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

На данном сайте мной реализован виджет, который формирует в правой колонке список ссылок на материалы раздела Яндекс.Карты. В качестве демонстрации результата работы виджета Вы можете разместить на своем сайте следующий код:

скопируйте и вставьте следующий код на своем сайте

<div id="wrgsv"></div>
<script src="//resource-gsv.ru/assets/widget/widget.js" type="text/javascript"></script>
<script type="text/javascript">wrgsv.init();</script>

 

Подготавливаем файлы, необходимые для создания веб виджета

При создании веб виджета для сторонних сайтов, в качестве примера я буду использовать сайт с доменным именем yoursite.loc. Для более полного понимания материала на момент создания нашего виджета, что бы не путаться в путях давайте создадим и разместим новые файлы прямо в корень сайта yoursite.loc, там где расположен индексный файл.

Создадим в корне сайта 3 файла:

  • yoursite.loc
    • .htaccess
    • index.php
    • widget.php
    • widget.css
    • widget.js

widget.php

<ul>
    <li><a href="#"> link 1 </a></li>
    <li><a href="#"> link 2 </a></li>
    <li><a href="#"> link 3 </a></li>
</ul>

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

widget.css

ul{
border: 1px solid RED;
}

внесем минимум стилей

widget.js

// ...

содержимое javascript файла на данные момент оставим пустым

Ознакомившись с механизмами работы веб виджетов мной было выявлено 2 метода встраивания их кода на страницы сайтов: используя элемент iframe и используя javascript.

 

Подключение виджета через iframe

Элемент iframe позволяет нам вставить один html-документ в другой html-документ, где в атрибуте src мы указываем путь к документу, который отобразиться во встроенном iframe. При этом css и js файлы, необходимо подключить в файле widget.php.

widget.php

<!--подключаем файл стилей-->
<link href="widget.css" rel="stylesheet">
<ul>
    <li><a href="#"> link 1 </a></li>
    <li><a href="#"> link 2 </a></li>
    <li><a href="#"> link 3 </a></li>
</ul>

Таким образом для размещения веб виджета на сторонних сайтах через iframe необходимо разместить в нужном месте на html-страницы iframe примерно следующего содержания:

<iframe src="http://yoursite.loc/widget.php" width="480" height="320" frameborder="0" allowfullscreen ></iframe>

 

Подключение виджета через javascript

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

Я приведу Вам пару примеров такого подключения виджетов:

Пример №1

<script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script>
<div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="link" data-yashareQuickServices="vkontakte,facebook,twitter,gplus"></div>

YandexLike (блок “Поделиться”) - простой виджет социальных сетей, позволяющий пользователям социальных сетей создавать репосты понравившихся страниц сайтов.

Пример №2

<script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script>
<!-- VK Widget -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group(
    "vk_groups",
    {mode: 0, width: "220", height: "400", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'},
    20003922
);
</script>

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

При подключении виджетов выполняются примерно следующие шаги:

  • добавление на страницу блока в который будет размещен виджет (в том случае, если виджет визуально отображается для посетителей сайта);
  • подключение javascript файла, с сайта предоставляющего подключение виджета
  • подключение css файла, с сайта предоставляющего подключение виджета (если это необходимо)
  • инициализация виджета

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

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

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

Код подключения нашего виджета

<div id="wrgsv"></div>
<script src="http://yoursite.loc/widget.js" type="text/javascript"></script>
<script type="text/javascript">wrgsv.init();</script>
  • 1 стр: добавляем на страницу HTML-элемент c идентификатором "wrgsv", в этот элемент будет размещен виджет после его инициализации
  • 2 стр: подключение javascript файла, в котором описан javascript объект виджета
  • 3 стр: инициализация виджета

 

Инициализация виджета через javascript

Пришло время поработать с нашим файлов widget.js. В нем мы создадим объект с свойствами и методами. Основным интересующим нас методом будет метод инициализации виджета init.

widget.js

var wrgsv = { 
    // идентификатор HTML элемента в который будет размещен виджет 
    idBox: 'wrgsv', 
    // путь до страницы возвращающей виджет 
    url_wiget: 'http://yoursite.loc/widget.php', 
    // путь до страницы стилей виджета 
    url_style: 'http://yoursite.loc/widget.css', 
    // метод инициализации виджета 
    init: function(id) { 
        // если идентификатор отсутствует, то будем использовать 
        // идентификатор HTML элемента для размещения виджета по умолчанию (т.е. "wrgsv") 
        if (!id) { id = this.idBox; } 
        if (document.getElementById(id)) { 
            // подключаем стили виджета 
            this.addStyle(); 
            try { 
                // для кросс-доменного запроса создаем один из ниже указанных объектов 
                var XHR = ("onload" in new XMLHttpRequest())?XMLHttpRequest:XDomainRequest; 
                // создаем экземпляр объекта 
                var xhr = new XHR(); 
                // запрос на другой домен (асинхронный) 
                xhr.open('GET', this.url_wiget, true); 
                // событие отслеживает, что запрос был успешно завершён 
                xhr.onload = function() { 
                    // если существует ответ 
                    if (this.response) { 
                        // добавляем полученный ответ в HTML элемент 
                        document.getElementById(id).innerHTML = this.response; 
                    } 
                } 
                xhr.onerror = function() { console.log('onerror '+this.status); } 
                // отсылаем запрос 
                xhr.send(); 
            } catch(e) {} 
        } 
        // если на странице не существует HTML элемента с указаным идентификатором 
        // выводим сообщение: блок с идентификатором id="id" отсутствует 
        else { console.log('The specified block id="'+id+'" is missing'); } 
    }, 
    // метод подключения стилей виджета 
    addStyle: function() { 
        style = document.createElement('link'); 
        style.rel = 'stylesheet'; 
        style.type = 'text/css'; 
        style.href = this.url_style; 
        document.head.appendChild(style); 
    }, 
}; 

Так как подключение css стилей виджета осуществляется, в методе "addStyle" объекта "wrgsv", то из файла http://yoursite.loc/widget.php необходимо удалить подключение файла стилей "widget.css", которое мы добавили ранее при подключении виджета через iframe.

Для базового расширения функционала виджета, мы можем добавить возможность во время его инициализации, указать в качестве параметра, идентификатор HTML-элемента, в который будет встроен виджет. Это видно в методе init: function(id) { ... }.

Код подключения нашего виджета с указанием нового идентификатора "new_id_box"

<div id="new_id_box"></div>
<script src="http://yoursite.loc/widget.js" type="text/javascript"></script>
<script type="text/javascript">wrgsv.init('new_id_box');</script>

 

Ошибки во время выполнения кросс-доменного скриптинга

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

В Chrome - XMLHttpRequest cannot load http://yoursite.loc/widget.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru' is therefore not allowed access

В Firefox - Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на http://yoursite.loc/widget.php. (Причина: отсутствует заголовок CORS 'Access-Control-Allow-Origin')

Обычно запрос XMLHttpRequest выполняет запрос только в рамках текущего сайта. При попытке использовать другой домен/порт/протокол – браузер выдаёт ошибку. Возникновение данной ошибки вполне "нормальное явление", так как разработчики данного стандарта побеспокоились о контроле безопасности.

Для исправления данной ошибки необходимо внести изменения в заголовки ответа сервера и тем самым разрешить такой запрос для стороннего сайта. Это можно сделать как минимум следующими способами:

  • Внести изменения в файл http://yoursite.loc/widget.php

    разрешение для отдельного домена (http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru)

    <?php
    header('Access-Control-Allow-Origin: http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru');
    // ...
    

    разрешение для всех доменов

    <?php
    header('Access-Control-Allow-Origin: *'); 
    // ...
    
  • Внести изменения в файл http://yoursite.loc/.htaccess

    разрешение для отдельного домена (http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru)

    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: http://САЙТ-ГДЕ-ПОДКЛЮЧАЕТСЯ-ВИДЖЕТ.ru
    </IfModule>
    

    разрешение для всех доменов

    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    

 


  Теги: javascript