Уважаемые коллеги!

Региональный оператор ВФСК ГТО в Пермском крае - ГБПОУ «Колледж олимпийского резерва Пермского края» проводит видеоконкурс «Я ВЫПОЛНЯЮ ГТО!» Голосование в рамках конкурса будет одновременно происходить на множестве площадках (СМИ, сайтах центров тестирования, в группах социальных сетей) с использованием открытой системы голосования Ярейтинг.

Условия конкурса и вся текущая информация находятся на сайте gto59.ru

http://gto59.ru/2017/10/12/%D1%81%D1%82%D0%B0%D0%BD%D1%8C-%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE%D0%B3%D0%B5%D1%80%D0%BE%D0%B5%D0%BC-%D1%83%D1%87%D0%B0%D1%81%D1%82%D0%B2%D1%83%D0%B9-%D0%B2-%D0%BA%D0%BE%D0%BD%D0%BA%D1%83%D1%80%D1%81/

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

Пример работы модуля на страницах интернет-издания «Пермь МК» приводится ниже

http://perm.mk.ru/articles/2017/10/24/stat-geroem-mozhet-kazhdyy-otkrytoe-golosovanie.html

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

Инструкция

Как же установить единый модуль голосования (виджет) «Ярейтинг» на ваш сайт? Это очень простая операция.

Шаг 1. Необходимо зайти на страничку опроса, который вы хотите разместить на своём сайте.

В нашем случае это http://yarating.ru/polls/1233

Шаг 2.

В нижней части страницы можно увидеть кнопки, позволяющие поделиться опросом («расшарить» его) в соответствующих социальных сетях, а также интересующую нас кнопку «Виджет», выдающую HTML-код для размещения его на вашем сайте. Если нажать на неё, появится окошко с текстом кода.

Скопировать код можно стандартно – выделив весь кусок текста мышкой (или же нажав “Ctrl+A”, английскую “A”, разумеется) скопировать его в буфер обмена, нажав комбинацию клавиш “Ctrl+C” или “Ctrl+Ins”, или же нажав правую кнопку мыши и выбрав в появившемся меню «Скопировать» (или “Copy” в английском варианте), а затем вставить (опять же через правую кнопку мыши и пункт меню «вставить» или комбинацию клавиш “Ctrl+V” или же “Shift+Ins”) этот фрагмент в окно, где вы редактируете код той страницы вашего сайта, где вы планируете разместить виджет.

Кусок HTML-кода для вставки виджета из примера будет выглядеть так:

<script>

window.yrResize = function () {

window.addEventListener('message', function(event) {

var height = event.data[1]

if (event.origin.match('^https?://yarating\.ru') &&

!isNaN(event.data[0]) && !isNaN(height)) {

document.querySelector('#yarating_1233').height = (parseInt(height) + 32) + 'px'

}

}, false)

}

</script>

<iframe id="yarating_1233" src="http://yarating.ru/rbk_iframe/polls/1233" onload="window.yrResize && window.yrResize()" width="100%" height="318px" frameborder="0" ></iframe>

Обратите внимание, что собственно код кадра, подзагружающего наш виджет, находится в нижней части кода – между тэгами <iframe> и </iframe>. А верхняя часть кода, между тэгами <script> и </script> - это скрипт на языке JavaScript, необходимый для автоматической подгонки высоты кадра виджета внутри вашего сайта. К сожалению, в некоторых системах управления сайтами размещение джава-скрипта может быть отключено и этот скрипт не будет работать (и, возможно, просто вырежется из кода после размещения).

Тем не менее, высоту кадра можно всё равно будет задать вручную в параметре height=”318px”, где вместо числа 318 необходимо задать необходимое число пикселей (элементов экрана). Придётся подбирать это число и смотреть на результат, так как итоговый вид будет зависеть от вёрстки вашего сайта, размера шрифтов и т.п.

Также следует обратить внимание на параметр, задающий ширину кадра – “width=100%”. В данном примере это означает, что виджет займёт по ширине всё место, которое будет предоставлено ему вёрсткой сайта. Если окажется, что виджет получился слишком широкий, можно сократить это число, например, поставив 70%, 50%, 30% и так далее.

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

Кроме того, при желании можно сделать рамку вокруг кадра виджета – в параметре frameborder=”0” поменять “0” на “1”.

(Параметры высоты, ширины и рамки - в последней строчке кода, это параметры кадра <iframe>)

Шаг 3.

Код виджета (HTML-код с голосованием) встраивается в свой веб-сайт.

Виджет не требует перехода по ссылке и позволяет голосовать посетителям вашего сайта прямо на ваших страницах. Но не все системы управления сайтами позволяют его размещать. Например, если вы не можете вставлять на сайт HTML-код вообще или конкретно тэг <IFRAME>, то и виджет встроить не получится. В таком случае придётся ограничиться простой ссылкой.

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