Соц. сети

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

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

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

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

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

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

tel:+7xxxxxxxxxx

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

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

Кнопка Прикрепить ссылку mottor

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

tel:88005555555

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

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

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

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

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

Ссылка на email

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

mailto:xxxxxxxx@mail.ru

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

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

Кнопка прикрепить ссылку в mottor

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

mailto:support@lpmotor.ru

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

Ссылка на email в mottor

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

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

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

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

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

Ссылка в кнопке mottor

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

Ссылка в картинке mottor

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

Ссылка в текстовом блоке mottor

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

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

• Вконтакте 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-блоке на вашем сайте. Чтобы это сделать нажимаем на "+" в левом верхнем углу редактора:

Добавление блока mottor

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

html блок в редакторе mottor

Итоги

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

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

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

Ищете конструктор чтобы собрать сайт или интернет-магазин?
Попробуйте mottor бесплатно

бесплатный конструктор сайтов, лендингов и квизов
Документы:
Документы:
Полезные ссылки:
Полезные ссылки:
Функциональность:
Функциональность:
О компании:
О компании:
при поддержке Фонда Развития Интернет Инициатив
бесплатный конструктор сайтов, лендингов и квизов
Бесплатный звонок по России