Как вставить комментарии, обратную связь, произвольные кнопки в турбо страницы Яндекс
Добрый день, дорогие друзья. В первой части мы создавали турбо страницу Яндекс и разбирали основные элементы, которые могут понадобиться для ее написания. Сегодня поговорим, как улучшить функционал, добавив формы обратной связи, социальную составляющую, комментарии и произвольные кнопки. Постараемся сделать хоть какое-то подобие полноценной страницы для мобильных гаджетов.
Комментарии
Хочу сразу предупредить, что система не в состоянии самостоятельно вытягивать все комменты со страницы оригинала, поэтому вам придется ручками вписывать каждый коммент в турбо страницу. Можно выписывать все подряд, можно только те, которые понравились. Есть ограничения:
- Не более 40 комментариев. Можете больше настрочить, но система их не воспримет
- Теряется доверие к таким комментариям, так как они уже написаны не пользователями, а вебмастером. Значит, они могут быть отредактированы, и в «турбированной» версии сайта могут быть только нужные владельцу ресурса комменты, а остальные отсеяны
Пример кода:
<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>
Где:
- data-author=”Автор 1” – имя автора первого поста
- data-subtitle – дата его публикации
- data-avatar-url – ссылка на аватар пользователя (картинку автора)
Шаг 3. Вставляем комментарий №1
<div data-block=»content»>
<header>Заголовок первого комментария</header>
<p><b>Текст</b> комментария<a href=»#»>Текст ссылки</a></p>
</div>
Где:
- data-block=”content” – контейнер, где находится тело комментария (обязательный элемент)
- <header>…</header> – в этом теге размещаем заголовок поста (не обязательный элемент)
- <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>
Где:
- <div data-block=”comments”>…</div> – дает понять платформе, что информация, заключенная в этом тэге, является ответом на первый комментарий. Это обязательный элемент, без него в турбо-странице коммент будет отображаться как отдельный пост, а не ответ
- <div data-block=”comment”…</div> – обязательный элемент. Здесь разрешается размещать описание (автор, дата и т.д.)
- <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>
Где:
- <form data-type=”callback”>…</form> – оболочка для будущей формы
- data-send-to=”email” – указывается адрес почтового ящика. Рекомендуется использовать почту, расположенную на собственных доменах
- data-agreement-company=”название” – указывается торговая марка, название фирмы
- data-agreement-link=”ссылка” – ссылка на пользовательское соглашение по обработке данных вашей компанией
Последние два пункта являются не обязательными. Их указывают, чтобы пользователь видел, с кем он имеет дело. Конечная форма обратной связи в турбо странице Яндекс выглядит вот так:
Здесь представлены предопределенные системой поля:
- Телефон – телефон пользователя, на который ему перезвонят
- Имя – имя пользователя
- Вопрос – задается интересующий вопрос
Нажимается кнопка «Отправить» и на указанный в тэге «data-send-to=””» почтовый ящик придет письмо с вопросом и контактной информацией.
Блок кнопок обратной связи
Можно вместо формы вставить в турбо-страницу блок кнопок для обратной связи. В нем можно разместить:
- Ваш контактный номер телефона
- Ссылки на группы и сообщества в социальных сетях
- Чат в мессенджерах (WhatsApp, Telegram, Viber)
- Отправку письма на вашу почту
- Форму обратной связи, о которой говорилось выше
Пример кода:
<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>
Где:
- <div data-blok=”widget-feedback” data-stick=”false”>…</div> – обязательный тэг. Внутри него помещаются элементы кнопок
- data-stick – этот параметр отвечает за размещение на турбо-странице плавающей панели кнопок. Принимает значения: false – отключена панель, left – выравнивает по левой стороне страницы, right – по правой стороне
- <div data-type=””></div> – указывается тип кнопки
Типы кнопок бывают:
- call – для звонка по указанному телефону в data-url=””. Формат номеров: “tel:+7…”. Пример: <div data-type=»call» data-url=»tel:+7″></div>
- callback – для формы обратной связи. О ней говорилось выше
- chat – открывается окно чата. Как его сделать написано здесь
- mail – отправка электронного письма. Почтовый адрес указывается в data-url=”mailto:адрес@почтового.ящика”. Рекомендуется использовать почту вашего домена
- whatsapp – для переписки в мессенджере ВатсАп. В data-url=”…” прописывается номер для связи с вами
- vkontakte – для социальной сети ВКонтакте. В data-url указываем адрес группы в этой сети
- facebook – то же самое для Facebook
- odnoklassniki – для одноклассников
- twitter – для Твиттера
- telegram – для канала Телеграм
- google – для страницы в Google+
- viber – для звонка в Вайбер
Важно! На экране смартфона будут отображаться не все кнопки (могут не поместиться на экран), так что, приоритетные выносите на первое место в этом коде. То же самое касается и плавающей панели. Проведите эксперимент в разделе «Турбо-страницы»-«Отладка» в Вебмастере и выберете лучший вариант.
Так будут выглядеть кнопки обратной связи в телефоне:
Произвольная кнопка
Можно устанавливать кнопки произвольного содержания. Условно «произвольного». Разрешается в них размещать номера телефонов и ссылки на другие страницы. Это делается так:
<button formaction=»tel:+7 012 345-67-89″
data-background-color=»white»
data-color=»black»
data-primary=»true»>Надпись на кнопке</button>
Где:
- formaction=”…” – указывается номер телефона в формате “tel:+7…” или ссылка
- data-background-color – цвет фона
- data-color – цвет шрифта
- data-primary – выделение надписи на кнопке жирным шрифтом. Может принимать значения «true» – жирный, «false» – обычный
Заключение
Сегодня научились размещать дополнительные элементы на турбо-страницах Яндекс, здесь и формы обратной связи, и комментарии, и кнопки для звонков. Все они могут превратить заурядную страницу для гаджетов в мощный инструмент ведения бизнеса.