Как вставить комментарии, обратную связь, произвольные кнопки в турбо страницы Яндекс

13.06.2018

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

Комментарии

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

1. Не более 40 комментариев. Можете больше настрочить, но система их не воспримет
2. Теряется доверие к таким комментариям, так как они уже написаны не пользователями, а вебмастером. Значит, они могут быть отредактированы, и в «турбированной» версии сайта могут быть только нужные владельцу ресурса комменты, а остальные отсеяны

Пример кода:

<div data-block="comments" data-url="#">
<!—Начало первого комментария—>
<div data-block="comment" data-author="Автор 1" data-subtitle="2017-12-10">
<div data-block="content">
<header>Заголовок первого комментария</header>
<p><b>Текст</b> комментария №1<a href="#">Текст ссылки</a></p>
</div>
<!—Начало ответа на первый комментарий—>
<div data-block="comments">
<div data-block="comment" data-author="Автор 2">
<div data-block="content">
<p>Ответ на комментарий №1</p>
</div>
</div>
</div><!—Этот тэг закрывает ответ на первый коммент—>
</div><!—Этим тэгом заканчивается первый коммент—>
<!—Начало второго комментария—>
<div data-block="comment" data-author="Автор 3">
<div data-block="content">
<p>Текст комментария №2 (Второго автора)</p>
</div>
</div><!—конец второго поста—>
</div><!—Конец блока комментариев—>

Рассмотрим пошагово данный пример, как вставить комментарии в Турбо-страницы Яндекс.

Шаг 1. Создаем контейнер для блока комментариев

<div data-block="comments" data-url="#">
…
</div>

Где data-block=”comments” – обязательный элемент. В нем data-url=”#” – это ссылка на страницу, где можно комментировать.

Шаг 2. Оформляем первый комментарий

<div data-block="comment"
data-author="Автор 1"
data-subtitle="2017-12-10"
data-avatar-url="img.png">
…
</div>

Где:

1. data-author=”Автор 1” – имя автора первого поста
2. data-subtitle – дата его публикации
3. data-avatar-url – ссылка на аватар пользователя (картинку автора)

Шаг 3. Вставляем комментарий №1

<div data-block="content">
<header>Заголовок первого комментария</header>
<p><b>Текст</b> комментария<a href="#">Текст ссылки</a></p>
</div>

Где:

1. data-block=”content” – контейнер, где находится тело комментария (обязательный элемент)
2. <header>…</header> — в этом теге размещаем заголовок поста (не обязательный элемент)
3. <p>…</p> — отделяем текст от заголовка, если он есть, пробелом. Как видите, можно использовать форматирование текста, выделение его части. Разрешается вставлять ссылку, используя тэг <a href=””>…</a>

Все это помещается в оболочку шага № 2 перед закрывающим тегом </div>

 

Шаг 4. Ответ на первый комментарий (если такой имеется)

Система позволяет создавать иерархии комментариев, многоуровневые ответы на посты, своего рода, обсуждение. Для этого, перед закрывающим тэгом </div> шага №2, помещаем такой код:

<div data-block="comments">
<div data-block="comment" data-author="Автор 2">
<!—Ответ на первый комментарий—>
<div data-block="content">
<p>Ответ на комментарий 1</p>
</div>
</div>
</div>

Где:

1. <div data-block=”comments”>…</div> — дает понять платформе, что информация, заключенная в этом тэге, является ответом на первый комментарий. Это обязательный элемент, без него в турбо-странице коммент будет отображаться как отдельный пост, а не ответ
2. <div data-block=”comment”…</div> — обязательный элемент. Здесь разрешается размещать описание (автор, дата и т.д.)
3. <div data-block=”content”>…</div> — обязательный, в нем заключаем тело ответа

 

Шаг 5. Вставляем второй комментарий

По аналогии с шагом №4 используем такой же код. Если желаете, чтобы он отображался как отдельный пост, то нужно выкинуть тэг <div data-block=”comments”></div>.

Так же можно форматировать текст, вставлять заголовки, ссылки, как описано в шаге №2. Здесь описаны все разрешенные HTML-элементы, которые можно использовать для текста.

Важно! Если не использовать тэг <p></p> для текста, то система не будет распознавать в нем пробелы, все слова будут написаны слитно.

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

 

К Оглавлению

Как вставить форму обратной связи в турбо-страницы

Для этого используется код:

<form
data-type="callback"
data-send-to="blog@1st-finstep.ru"
data-agreement-company="Название фирмы"
data-agreement-link="#">
</form>

Где:

1. <form data-type=”callback”>…</form> — оболочка для будущей формы
2. data-send-to=”email” – указывается адрес почтового ящика. Рекомендуется использовать почту, расположенную на собственных доменах
3. data-agreement-company=”название” – указывается торговая марка, название фирмы
4. data-agreement-link=”ссылка” – ссылка на пользовательское соглашение по обработке данных вашей компанией

Последние два пункта являются не обязательными. Их указывают, чтобы пользователь видел, с кем он имеет дело. Конечная форма обратной связи в турбо странице Яндекс выглядит вот так:

Здесь представлены предопределенные системой поля:

1. Телефон – телефон пользователя, на который ему перезвонят
2. Имя – имя пользователя
3. Вопрос – задается интересующий вопрос

Нажимается кнопка «Отправить» и на указанный в тэге «data-send-to=””» почтовый ящик придет письмо с вопросом и контактной информацией.

К Оглавлению

Блок кнопок обратной связи

Можно вместо формы вставить в турбо-страницу блок кнопок для обратной связи. В нем можно разместить:

1. Ваш контактный номер телефона
2. Ссылки на группы и сообщества в социальных сетях
3. Чат в мессенджерах (WhatsApp, Telegram, Viber)
4. Отправку письма на вашу почту
5. Форму обратной связи, о которой говорилось выше

Пример кода:

<div data-block="widget-feedback" data-stick="false">
<!—Кнопка для звонка по указанному номеру—>
<div data-type="call" data-url="tel:+7"></div>
<!—Кнопка вызова формы обратной связи—>
<div data-type="callback"
data-send-to="mail@1st-finstep.ru"
data-agreement-company="ООО Пример"
data-agreement-link="#">
</div>
<!—Кнопка для вызова чата—>
<div data-type="chat"></div>
<!—Вызов мессенджера WhatsApp—>
<div data-type="whatsapp" data-url="https://whatsapp.com"></div>
<!—Отправка письма на указанный ящик—>
<div data-type="mail" data-url="mailto:blog@1st-finstep.ru"></div>
<!—Ссылка на группу, сообщество, страницу в социальной сети ВКонтакте—>
<div data-type="vkontakte" data-url="ссылка на вашу страницу ВКонтакте"></div>
<!—Звонок по Viber—>
<div data-type="viber" data-url="https://viber.com"></div>
</div>

Где:

1. <div data-blok=”widget-feedback” data-stick=”false”>…</div> — обязательный тэг. Внутри него помещаются элементы кнопок
2. data-stick – этот параметр отвечает за размещение на турбо-странице плавающей панели кнопок. Принимает значения: false – отключена панель, left – выравнивает по левой стороне страницы,  right – по правой стороне
3. <div data-type=””></div> — указывается тип кнопки

Типы кнопок бывают:

1. call – для звонка по указанному телефону в data-url=””. Формат номеров: “tel:+7…”. Пример: <div data-type="call" data-url="tel:+7"></div>
2. callback – для формы обратной связи. О ней говорилось выше
3. chat – открывается окно чата. Как его сделать написано здесь
4. mail – отправка электронного письма. Почтовый адрес указывается в data-url=”mailto:адрес@почтового.ящика”. Рекомендуется использовать почту вашего домена
5. whatsapp – для переписки в мессенджере ВатсАп. В data-url=”…” прописывается номер для связи с вами
6. vkontakte –  для социальной сети ВКонтакте. В data-url указываем адрес группы в этой сети
7. facebook – то же самое для Facebook
8. odnoklassniki – для одноклассников
9. twitter – для Твиттера
10. telegram – для канала Телеграм
11. google – для страницы в Google+
12. viber – для звонка в Вайбер

Важно! На экране смартфона будут отображаться не все кнопки (могут не поместиться на экран), так что, приоритетные выносите на первое место в этом коде. То же самое касается и плавающей панели. Проведите эксперимент в разделе «Турбо-страницы»-«Отладка» в Вебмастере и выберете лучший вариант.

Так будут выглядеть кнопки обратной связи в телефоне:

К Оглавлению

Произвольная кнопка

Можно устанавливать кнопки произвольного содержания. Условно «произвольного». Разрешается в них размещать номера телефонов и ссылки на другие страницы. Это делается так:

<button formaction="tel:+7 012 345-67-89"
data-background-color="white"
data-color="black"
data-primary="true">Надпись на кнопке</button>

Где:

1. formaction=”…” – указывается номер телефона в формате “tel:+7…” или ссылка
2. data-background-color – цвет фона
3. data-color – цвет шрифта
4. data-primary – выделение надписи на кнопке жирным шрифтом. Может принимать значения «true» — жирный, «false» — обычный

К Оглавлению

Заключение

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

Если это было вам полезно, то ставьте лайки, делитесь с друзьями в соцсетях. Всем удачи!!!