Добавление на Турбо‑страницу контента сети Одноклассники

Вы можете разместить на Турбо‑странице встраиваемый контент сети Одноклассники:
  • Кнопку «Класс» («Поделиться»). Она позволит пользователям отметить содержимое Турбо‑страницы и поделиться им на в Одноклассниках.
  • Виджет группы. Он поможет пользователям быстро присоединиться к вашей группе.
  • Видео. Вы можете добавлять в текст видеоматериалы, размещенные в сети Одноклассники.

После добавления кода встраивания в RSS-канал, посмотрите, как контент отображается на Турбо‑странице. Сделать это можно в Вебмастере на странице Турбо‑страницы для контентных сайтов → Отладка. Подробнее об отладке.

Кнопка «Класс» («Поделиться»)

Вы можете добавлять на одну Турбо‑страницу несколько встраиваемых блоков. Для этого используйте пример кода, приведенный в инструкции Одноклассников.
Внимание. Турбо‑страницы не поддерживают JavaScript-код для отслеживания событий.
  1. Выберите страницу-источник сайта, для которой формируется Турбо‑страница и на которой вы хотите разместить кнопку. Например, https://example.com/page/.
  2. Добавьте URL выбранной страницы в конструктор кнопки Одноклассников и настройте отображение кнопки.

  3. Из кода для встраивания скопируйте элемент script и его содержимое. Вы можете использовать несколько вариантов кода:

    Полный код вызова API и виджета
    <script>
    !function (d, id, did, st, title, description, image) {
        var js = d.createElement("script");
        js.src = "https://connect.ok.ru/connect.js";
        js.onload = js.onreadystatechange = function () {
        if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
            if (!this.executed) {
                this.executed = true;
                setTimeout(function () {
                    OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
                }, 0);
            }
        }};
        d.documentElement.appendChild(js);
    }(document,"ok_shareWidget","https://ya.ru",'{"sz":30,"st":"oval","ck":1}',,,);
</script>
    Короткий код вызова виджета
    Такой код необходимо сформировать самостоятельно:
    <script type="text/javascript">
    OK.CONNECT.insertShareWidget("mineShareWidgetDivId","https://ya.ru",'{"sz":30,"st":"oval","ck":1}',,,);
</script>
  4. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
...
<turbo:content>
    <![CDATA[
        <script type="text/javascript">
           OK.CONNECT.insertShareWidget("mineShareWidgetDivId","https://ya.ru",'{"sz":30,"st":"oval","ck":1}',,,);
        </script>
    ]]>
</turbo:content>
...

Виджет группы

Вы можете добавлять на одну Турбо‑страницу несколько встраиваемых блоков. Для этого используйте пример кода, приведенный в инструкции Одноклассников.
Внимание. Турбо‑страницы не поддерживают JavaScript-код для отслеживания событий.
  1. В Одноклассниках настройте отображение виджета и сформируйте код для встраивания.

  2. Из кода для встраивания скопируйте элемент script и его содержимое. Вы можете использовать несколько вариантов кода:

    Полный код вызова API и виджета
    <script>
    !function (d, id, did, st) {
    var js = d.createElement("script");
    js.src = "https://connect.ok.ru/connect.js";
    js.onload = js.onreadystatechange = function () {
    if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
        if (!this.executed) {
            this.executed = true;
            setTimeout(function () {
                OK.CONNECT.insertGroupWidget(id,did,st);
            }, 0);
        }
    }}
    d.documentElement.appendChild(js);
}(document,"ok_group_widget","48235937660955",'{"width":250,"height":285}');
</script>
    Короткий код вызова виджета
    Такой код необходимо сформировать самостоятельно:
    <script type="text/javascript">
    OK.CONNECT.insertGroupWidget("widget", 48235937660955, '{width: "250", height: "285"}');
</script>
  3. Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.
...
<turbo:content>
    <![CDATA[
        <script type="text/javascript">
            OK.CONNECT.insertGroupWidget("widget", 48235937660955, '{width: "250", height: "285"}');
        </script>
    ]]>
</turbo:content>
...

Видео

Видеоролики можно встраивать на Турбо‑страницу с помощью HTML-элементов:
  • a (в виде ссылки). В этом случае видеоролик откроется поверх контента Турбо‑страницы.
  • iframe.

Добавьте код в тег <![CDATA[ ]]> внутри элемента turbo:content.

...
<turbo:content>
    <![CDATA[
        <a href="https://ok.ru/video/771913157349"/a>
    ]]>
</turbo:content>
...
Примечание.

При конфигурации виджета настраивайте ссылки с открытием в новой вкладке (target="_blank"), иначе есть риск, что пользователь не сможет открыть ссылку.

Пример проблемы в Chromium