← Назад

Соц. сети

Создание ссылок на контакты, социальные сети и мессенджеры

Сложность ∙ Легко

Часто сайт посещают с телефонов, и удобно, если на сайте есть ссылка на кликабельный телефон, e-mail и т.д. — которая сразу открывает нужное приложение на телефоне или набирает номер. Здесь мы рассмотрим основные приемы создания таких ссылок на примере редактора mottor.

В этой статье рассмотрим самые популярные:

Ссылка на телефон →
Ссылка на e-mail →
Ссылки на социальные сети →
Ссылки для перехода в мессенджеры →
Кнопка "Поделиться" →

Ссылка на телефон →

Ссылка на email →

Ссылки на соц.сети →

Ссылки на мессенджеры →

Кнопка "Поделиться" →

Аудит вашего сайта или консультация по редактору

0₽

подключенного тарифа для конструктор сайтов

+4

месяца

промокод на продвижение в сетях Яндекс

+12.000₽

тарифа чат-ботов, автоворонок и мобильных приложений

+3

Бесплатный домен в зоне .ru/.рф

0₽

Бесплатный шаблон сайта под вашу сферу бизнеса

0₽

месяца

/год

Забронировать предложение

Получите подарки от mottor при подключении тарифа

спецпредложение

Ссылка на телефон

Ссылка на телефон имеет простой формат url (когда прописывается не полная http:// ссылка, а сокращенное обозначение, понимаемое браузерами как вызов нужного приложения).

В случае с телефоном это протокол tel:.

tel:+7xxxxxxxxxx

Рассмотрим на примере добавление ссылки на телефон 88005555555 (номер может быть любым другим, какой вам нужен) в текст на сайте.

Выделите текст в редакторе мышкой и нажмите на панели редактирования кнопку добавления ссылки:

В открывшемся окне введите в поле ссылки url вашего телефона:

tel:88005555555

Так как номер начинается с 8, знак "+" перед номером телефона не ставится

После чего нажмите OK в окне и выйдите из редактирования текстового блока, чтобы сохранились изменения.

Теперь при клике на ссылку на сайте браузер будет вызывать подходящее приложение для совершения вызова — в мобильных браузерах это начнет набор телефонного номера для звонка.

Также можно вставлять такие ссылки в Кнопке и Картинке, просто вставляя ссылку в поле ввода ссылки:

Вставка ссылки на телефон в настройках кнопки

Вставка ссылки на телефон в настройках картинки

Ссылка на email

Абсолютно аналогично настраивается ссылка на email адрес, только вместо uri протокола tel используется протокол mailto:

mailto:xxxxxxxx@mail.ru

Здесь также может использоваться любой ваш email адрес, возьмем для примера адрес нашей техподдержки: support@lpmotor.ru

Для добавления в текст — точно также выделяем текст мышкой и жмем кнопку добавления ссылки:

Вводим ссылку с email из нашего примера:

mailto:support@lpmotor.ru

Заходим в настройки блока, указываем ссылку и жмем "ОК" и сохраняем изменения. И так же можем добавить ссылки в картинки или кнопки.

Установка ссылок на социальные сети

Разместите на сайте кнопки и иконки социальных сетей, чтобы дать возможность посетителям быстро делиться интересными страницами в своих социальных сетях. А также для удобного поиска и направления посетителя на вашу страницу в той или иной соц. сети.

Вы можете посмотреть наше короткое видео по настройке или прочитать инструкцию ниже

В mottor есть несколько способов установки ссылок:

1. в блоке "Кнопка"

2. в блоке "Картинка"

3. в "Текстовом блоке"

Обратите внимание. Перед установкой ссылки нужно выделить текст, к которому вы хотите привязать ссылку.

Примеры ссылок на соц. сети:

• Вконтакте https://vk.com/account
• Facebook https://www.facebook.com/account
• Instagram https://www.instagram.com/account
• Одноклассники https://ok.ru/account
• Twitter https://twitter.com/account

Ссылки для перехода в мессенджер (WhatsApp, Viber, Telegram)

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

Вы можете посмотреть наше короткое видео по настройке или прочитать инструкцию ниже

Ссылка на WhatsApp

https://api.whatsapp.com/send?phone=79999999999

Вместо номера 79999999999 вам нужно будет указать номер телефона вашего аккаунта в этом мессенджере.

Ссылка на WhatsApp с заранее набранным сообщением

https://api.whatsapp.com/send?phone=79999999999&text=Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве

В этой ссылке мы видим, что есть номер телефона 79999999999, его вы меняете на свой телефон в таком же формате, без точек, тире, пробелов и т.п. Просто указываете набор цифр.

+ в ссылке есть "зашитое" сообщение "Добрый день! Я хочу купить квартиру в Москве."

Единственное отличие от нормального текста в ссылке в том, что вместо пробелов используется — %20. И тогда получается:

Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве

В примере ссылки вы меняете только то, что выделено жирным шрифтом, т.е. номер телефона и текст сообщения:

https://api.whatsapp.com/send?phone=79999999999&text=Добрый%20день!%20Я%20хочу%20купить%20квартиру%20в%20Москве

Ссылка на Viber

viber://add?number=79999999999

Вместо номера 79999999999 вам нужно будет указать номер телефона вашего аккаунта в нужном мессенджере. Будет это телефон с +7 или просто 7 — без разницы :)

Ссылка на Viber с переходом в чат

viber://chat?number=%2B79999999999

%2B — обязательно должно остаться перед номером телефона. Знак "+" перед телефоном НЕ указывается.

Ссылка на Telegram

Для перехода на диалог с пользователем:

https://telegram.me/username

username — заменяем на ваш логин внутри telegram (без знака @)

Ссылка на Telegram

Для перехода в telegram канал

https://t.me/название_группы

В случае, если по ссылке https://telegram.me не открывается Telegram, можно попробовать изменить ссылку на https://tele.click/
Например, https://tele.click/lpmotorsupportbot

Ссылка на Skype

skype:username

username — логин вашего аккаунта в Skype

Создание кнопки "Поделиться" от Яндекса

Создание и размещение на сайте виджета, который позволит репостить ссылку на ваш сайт в выбранных соц. сетях. Размещение кнопки будем показывать на примере редактора mottor.

1. Код таких кнопок можно получить в Конструкторе блока «Поделиться» от Яндекса. Выбираете подходящие соц.сети и копируете сгенерированный код справа от соц.сетей:

2. Затем код данного виджета остаётся только разместить в html-блоке на вашем сайте. Чтобы это сделать нажимаем на "+" в левом верхнем углу редактора:

3. Выбираем html-блок и ставим его в том месте на сайте, где должна размещаться кнопка "Поделиться". Размещаем внутри него скопированный код и готово!

Итоги

Итак, в этой статье мы научились настраивать ссылки на соц.сети и увидели, как просто это делается в редакторе mottor.

Надеемся, вы примените эти знания при создании своего собственного сайта. Если что-то будет непонятно — в конструкторе сайтов mottor есть бесплатная техподдержка для всех пользователей. Вам поможет живой специалист:

— в чате на сайте lpmotor.ru
— по телефону 8 800 200 51 47 (звонки по РФ бесплатные)
— в Телеграм: https://t.me/lpmotorchat