Авторизация:
Имя:

Пароль:

Поиск по сайту:

Последнее на сайте:

Подписка на новости

Введите Ваш email:

Пример баннера 300х250


Разделы:

рейтинг статьи: 5/5; голосов: 7; комментариев: 0

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

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="[email protected]"
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="[email protected]"
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:[email protected]"></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» - обычный

Кнопка произвольного содержания в Турбо-страницах

К Оглавлению

Заключение

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

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

 

157

Оцените статью:

1 2 3 4 5
рейтинг: 5/5; голосов: 7

Зарегистрируйтесь или войдите под своим именем чтобы оставить комментарий