13.06.2018
Добрый день, дорогие друзья. В первой части мы создавали турбо страницу Яндекс и разбирали основные элементы, которые могут понадобиться для ее написания. Сегодня поговорим, как улучшить функционал, добавив формы обратной связи, социальную составляющую, комментарии и произвольные кнопки. Постараемся сделать хоть какое-то подобие полноценной страницы для мобильных гаджетов.
Хочу сразу предупредить, что система не в состоянии самостоятельно вытягивать все комменты со страницы оригинала, поэтому вам придется ручками вписывать каждый коммент в турбо страницу. Можно выписывать все подряд, можно только те, которые понравились. Есть ограничения:
- Не более 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» – обычный
Заключение
Сегодня научились размещать дополнительные элементы на турбо-страницах Яндекс, здесь и формы обратной связи, и комментарии, и кнопки для звонков. Все они могут превратить заурядную страницу для гаджетов в мощный инструмент ведения бизнеса.
Если это было вам полезно, то ставьте лайки, делитесь с друзьями в соцсетях. Всем удачи!!!