Подключение комментариев
Примечание
Если ваш сайт создан на 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 Заключение |
Ниже описаны этапы подключения комментариев:
Шаг 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.
Что надо сделать
-
Создайте ресурс, который:
- Доступен для Cross-Origin запросов с
*.yandex.*
,*.turbopages.org
. - Обрабатывает полученный URL.
- Сохраняет отправленный комментарий в базу данных.
- Возвращает ответ, если комментарий обработался успешно.
Внимание
Ресурс должен быть доступен по HTTPS-протоколу.
- Доступен для Cross-Origin запросов с
Ожидаемый ответ ресурса
-
В случае успеха ресурс должен возвращать: Код HTTP-ответа:
200
.Пример JSON:
{ "id": "101231", "date": 1536210020 }
id
Идентификатор комментария.
date
Дата комментария (timestamp секунды в UNIX-формате).
Пример ресурса доступен на GitHub.
Шаг 3. Подключите комментарии
Примечание
Если вы передавали комментарии с помощью блока комментариев, удалять его из RSS-канала не обязательно. Он будет автоматически заменен.
Чтобы подключить комментарии:
-
В Вебмастере перейдите на страницу Турбо‑страницы для контентных сайтов → Настройки → Комментарии и выберите опцию Собственное API комментирования.
-
Укажите ссылки на ресурсы:
- URL списка комментариев, например,
https://example.ru/api/list-comments
; - URL для добавления комментария, например,
https://example.ru/api/add-comments
.
Примечание
Если удобно, можно реализовать все на одном ресурсе, например,
https://example.ru/api/comments
. - URL списка комментариев, например,
-
Сохраните изменения.
-
Проверьте отображение комментариев в примере Турбо‑страницы.
Узнайте больше
- Подключение авторизации
- Пример подключения авторизации на WordPress
- Пример подключения комментариев на WordPress
Обязательный параметр