Подключение комментариев

Примечание. Если ваш сайт создан на CMS Wordpress, ознакомьтесь с примером подключения комментариев.
Для Турбо‑страниц можно подключить:
  • Авторизация и выход пользователя.
  • Отображение списка комментариев, который возвращается вашим API.
  • Добавление комментария.

Добавить новый комментарий может только авторизованный пользователь. Чтобы такая возможность поддерживалась, подключите авторизацию.

Обучающее видео. Подключение авторизации и комментариев на Турбо‑страницах.
Посмотреть видео

00:00 Введение

00:33 Особенности комментариев на Турбо‑страницах

01:16 Пример работы комментариев и авторизации

03:17 Как работает авторизация

04:34 Особенности, которые нужно учесть при создании ресурсов

05:24 Создание формы входа

08:38 Создание ресурса проверки авторизации

10:34 Создание ресурса для выхода

11:31 Подключение ресурсов авторизации в Вебмастере

13:15 Как работает ресурс списка комментариев

14:45 Создание ресурса списка комментариев

16:00 Как работает ресурс добавления комментария

17:08 Создание ресурса добавления комментария

18:58 Подключение ресурсов комментариев в Вебмастере

20:13 Заключение

Обучающее видео. Подключение авторизации и комментариев на Турбо‑страницах.
Посмотреть видео

00:00 Введение

00:33 Особенности комментариев на Турбо‑страницах

01:16 Пример работы комментариев и авторизации

03:17 Как работает авторизация

04:34 Особенности, которые нужно учесть при создании ресурсов

05:24 Создание формы входа

08:38 Создание ресурса проверки авторизации

10:34 Создание ресурса для выхода

11:31 Подключение ресурсов авторизации в Вебмастере

13:15 Как работает ресурс списка комментариев

14:45 Создание ресурса списка комментариев

16:00 Как работает ресурс добавления комментария

17:08 Создание ресурса добавления комментария

18:58 Подключение ресурсов комментариев в Вебмастере

20:13 Заключение

Ниже описаны этапы подключения комментариев:

  1. Шаг 1. Создайте ресурс, который возвращает список комментариев
  2. Шаг 2. Создайте ресурс, который добавляет комментарий
  3. Шаг 3. Подключите комментарии

Шаг 1. Создайте ресурс, который возвращает список комментариев

Внимание. Чтобы Турбо‑страницы могли взаимодействовать с API комментариев, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org.
Как работает
Турбо‑страница отправляет GET-запрос к вашему ресурсу, чтобы получить список комментариев. URL страницы передается в query-параметре ORIGINAL_URL. Ресурс должен обработать полученный URL и вернуть список комментариев для страницы.

Пример запроса, который отправляет Турбо‑страница:

GET https://example.ru/api/comments?ORIGINAL_URL={page}&limit={limit}&offset={offset}

ORIGINAL_URL — оригинальный URL страницы, для которой существует Турбо‑страница.

limit — максимальное число элементов в списке. Используется для реализации кнопки Показать еще.

offset — смещение в списке. Используется для реализации кнопки Показать еще.

Что надо сделать
Создайте ресурс, который обрабатывает полученный URL и возвращает список комментариев для страницы в формате JSON. Для ресурса необходимо разрешить Cross-Origin запросы с *.yandex.*, *.turbopages.org.
Внимание. Ресурс должен быть доступен по HTTPS-протоколу.
Ожидаемый ответ ресурса
Код HTTP-ответа: 200.
Пример JSON:
{
  "offset": 0,
  "limit": 50,
  "total": 140,
  "comments": [
    {
      "name": "Homer",
      "avatar": "https://some-domain.ru/some-avatar-image.png",
      "date": 1536210000,
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "id": "1111",
      "replies": [
        {
          "name": "Moe",
          "avatar": "https://some-domain.ru/another-avatar-image.png",
          "date": 1536210000,
          "content": "Phasellus interdum feugiat dui id facilisis.",
          "id": "2222",
          "answer_to": "1111"
        },
        {
          "name": "Barney",
          "avatar": "https://some-domain.ru/yet-another-avatar-image.png",
          "date": 1536210000,
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
          "id": "3333",
          "answer_to": "2222"
        }
      ]
    },
    {
      "name": "Homer",
      "avatar": "https://some-domain.ru/some-avatar-image.png",
      "date": 1536210000,
      "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "id": "55556"
    }
  ]
}
Скопировано
offset *
Смещение в списке. Используется для реализации кнопки Показать еще.
limit *
Максимальное число элементов в списке. Используется для реализации кнопки Показать еще.
total *
Всего комментариев на странице.
id *
Идентификатор комментария.
name *
Имя пользователя.
avatar
URL аватара пользователя.
date *
Дата комментария (timestamp секунды в UNIX-формате).
content *
Текст комментария в виде строки. Inline-тэги не поддерживаются.
replies
Массив ответов.
answer_to
Идентификатор корневого комментария.

Обязательный параметр

Пример ресурса доступен на GitHub.

Шаг 2. Создайте ресурс, который добавляет комментарий

Внимание. Чтобы Турбо‑страницы могли взаимодействовать с API комментариев, разрешите Cross-Origin запросы для *.yandex.*, *.turbopages.org.
Как работает
Авторизованный пользователь заполняет форму комментария и отправляет его. Турбо‑страница отправляет POST-запрос к вашему ресурсу. Ресурс должен обработать запрос и сохранить комментарий в базе данных.

Пример запроса, который отправляет Турбо‑страница:

POST https://example.ru/api/comments?ORIGINAL_URL={page}&TURBO_ID={id}

ORIGINAL_URL — оригинальный URL страницы, для которой существует Турбо‑страница.

TURBO_ID — идентификатор пользователя, который отправил комментарий.

Пример комментария, который передается в теле POST-запроса:

{
  "answer_to": "2222",
  "text": "lorem ipsum"
}
Скопировано
answer_to
Идентификатор комментария.
text
Текст комментария в виде строки. Inline-тэги не поддерживаются.

Логин пользователя можно определить по TURBO_ID или Cookie.

Что надо сделать
Создайте ресурс, который:
  1. Доступен для Cross-Origin запросов с *.yandex.*, *.turbopages.org.
  2. Обрабатывает полученный URL.
  3. Сохраняет отправленный комментарий в базу данных.
  4. Возвращает ответ, если комментарий обработался успешно.
Внимание. Ресурс должен быть доступен по HTTPS-протоколу.
Ожидаемый ответ ресурса

В случае успеха ресурс должен возвращать:

Код HTTP-ответа: 200.
Пример JSON:
{
  "id": "101231",
  "date": 1536210020
}
Скопировано
id
Идентификатор комментария.
date
Дата комментария (timestamp секунды в UNIX-формате).

Пример ресурса доступен на GitHub.

Шаг 3. Подключите комментарии

Примечание. Если вы передавали комментарии с помощью блока комментариев, удалять его из RSS-канала не обязательно. Он будет автоматически заменен.

Чтобы подключить комментарии:

  1. В Вебмастере перейдите на страницу Турбо‑страницы для контентных сайтов → Настройки → Комментарии и выберите опцию Собственное API комментирования.
  2. Укажите ссылки на ресурсы:
    • URL списка комментариев, например, https://example.ru/api/list-comments;
    • URL для добавления комментария, например, https://example.ru/api/add-comments.
      Примечание. Если удобно, можно реализовать все на одном ресурсе, например, https://example.ru/api/comments.
  3. Сохраните изменения.
  4. Проверьте отображение комментариев в примере Турбо‑страницы.