вконтакте кликабельный номер телефона
Как сделать кликабельный номер телефона на сайте
Я не буду лить воду про выгоды кликабельного номера на сайте. Надеюсь, вы в курсе. Суть: посетитель жмакает на номер, автоматом идет звонок. Естественно, это относится к мобильным устройствам.
Рассмотрим несколько вариантов, смотря на чем у вас сайт.
HTML-код
Обычный номер телефона, который пока является простым текстом, в коде может выглядеть так:
+7(999)888-77-66
Или так (если присвоен класс):
Или так (если к этому тексту применены стили: цвет, шрифт, форматирование):
За гипертекст (возможность текста в коде HTML включать в себя гиперссылку) отвечает тег . . Атрибут href=”” отвечает за то, куда будет направлен клиент — внутри кавычек указывается адрес страницы или действие.
За автоматический набор номера по клику отвечает параметр tel:ХХХ, где XXX — номер телефона без пробелов и тире.
Таким образом, для первого примера код будет следующим:
К тексту добавили действие – вызов на конкретный номер.
Сделаем и второй номер кликабельным:
Третий пример тоже без особых усилий становится гипертекстом. При этом сохраняются его изначальные стили:
По этому же принципу вы можете сделать кликабельный email.
Чтобы email стал кликабельным, поставьте атрибут .
Сайт на WordPress
Для Вордпресса есть специальный плагин CallPhone’r. Этот модуль выводит на каждой странице сайта иконку, при нажатии на которую мобильное устройство переходит в режим вызова.
Там же есть возможность настройки по времени отображения иконки. Это позволит не получать звонки от клиентов в нерабочее время.
Сайт на LPmotor
Этот конструктор дает несколько вариантов.
1) Телефон в виде текста.
В этом случае выделите текст телефона в блоке и нажмите кнопку добавления ссылки в панели редактирования:
2) Переход к набору номера с кнопки. В панели редактирования блока «Кнопка» необходимо выставить «Переход по ссылке» и указать ваш номер телефона в формате «tel:88005555555».
3) Переход к набору номера с иконки/картинки. Здесь в выпадающем меню «Действие» нужно выбрать «Переход по ссылке» и вставить номер в формате «tel:+74957873422».
4) Также можно вставить кликабельный телефон на сайт в виде html блока.
Тогда в поле «Редактирование HTML-кода» нужно вставить
Сайт на Wix
1) Чтобы создать кликабельный номер телефона:
— Нажмите «Редактировать текст».
— Введите номер телефона. Не вводите другой текст в том же окне.
2) Чтобы связать текст ссылкой с номером телефона:
— Нажмите «Редактировать текст».
— Введите текст, например, «Позвонить сейчас».
— Нажмите на иконку «Ссылка».
— Выберите Номер телефона.
— Введите номер телефона в поле «Номер телефона».
3) Чтобы связать кнопку ссылкой с номером телефона:
— Нажмите на иконку Ссылка.
— Выберите Номер телефона.
— Введите номер телефона в поле «Номер телефона».
Сайт на Tilda
Чтобы при клике на номер телефона начинался звонок или при клике на e-mail открывался почтовый клиент, нужно навесить на них ссылки.
1) Ссылка, которую нужно задать тексту с номером телефона: tel:+71234567890 (все без пробела). Будет работать при просмотре сайта на телефоне.
Например, выбираете блок меню ME301, во вкладке Контент в поле Дополнительно указываете номер телефона, затем выделяете его и с помощью выпадающей панели инструментов для текста добавляете ссылку вида tel:+7123456789.
2) Ссылка, которую нужно задать тексту с адресом почты: yourmail@mysite.com. При добавлении ссылки в Контент блока в поле «Ссылка», нужно указывать ссылку как mailto:yourmail@mysite.com
При подготовке материала использованы инструкции Callibri, Tilda, Wix, LPmotor
Кликабельные номер телефона и электронная почта
Содержание:
1. Кликабельный номер телефона
Есть два варианта настройки кликабельного телефона: с использованием виджета кнопки или виджета текста. Разберем оба способа ниже.
1.1 Используем виджет «Кнопка»
Шаг 2. Перейдём в настройки виджета кнопки (гаечный ключ), в раздел «Содержимое» и укажем наш номер телефона, который будут видеть посетители (можно указать в любом формате).
Далее переходим в раздел «Вид» во вкладку «Текст» и настроим нужный нам размер текста.
Там же мы можем изменить вид текста (сделать жирным, включить курсив и т.д.) и изменить шрифт текста.
Проделаем вышеописанные действия (шага 2) на записи:
Шаг 3. Перейдем в раздел «Цвета» во вкладку «Подробные настройки» и зададим нужный цвет тексту:
1.В обычном состоянии
2.При наведении курсора
3.При нажатии на кнопку
Проделаем вышеописанные действия (шага 3) на записи:
Шаг 4. Переходим в раздел «Действие», выбираем действие «Открыть страницу» и пропишем код телефона в поле «Ссылка».
Пример кода:
После tel:+ необходимо указать ваш номер телефона без пробелов и дефисов, строго в том формате, который указан на примере выше.
Шаг 5. Публикуем страницу и всё готово! Чтобы протестировать кликабельность телефона, зайдите в предпросмотр или на опубликованную версию страницы.
1.2 Используем виджет «Текст»
Шаг 1. Добавим виджет «Текст» на секцию
Далее, внутри виджета укажем наш номер телефона, который будут видеть посетители (можно указать в любом формате).
Шаг 2. Выделим наш текст в режиме редактирования и установим на него ссылку в поле «URL» в виде:
После tel:+ необходимо указать ваш номер телефона без пробелов и дефисов, строго в том формате, который указан на примере выше. И нажмем «Вставить» ссылку на выделенный текст.
Проделаем вышеописанные действия (шага 2) на записи:
Шаг 3. Публикуем страницу и всё готово! Чтобы протестировать кликабельность телефона, зайдите в предпросмотр или на опубликованную версию страницы.
После добавления ссылки в виджет «Текст», изменится цвет и появится нижнее подчеркивание. Отключить подчеркивание и изменить цвет ссылки можно по инструкции, в разделах ниже. А именно:
2. Кликабельный адрес электронной почты
Есть 2 варианта настройки кликабельного электронного адреса: с использованием виджета кнопки или виджета текста. Разберем оба способа ниже.
2.1 Используем виджет «Кнопка»
Шаг 2. Перейдём в настройки виджета кнопки (гаечный ключ), в раздел «Содержимое» и укажем наш электронный адрес, который будут видеть посетители (можно указать в любом формате).
Далее переходим в раздел «Вид» во вкладку «Текст» и настроим нужный нам размер текста.
Там же, мы можем изменить вид текста (сделать жирным, включить курсив и т.д.) и изменить шрифт текста.
Проделаем вышеописанные действия (шага 2) на записи:
Шаг 3. Перейдем в раздел «Цвета» во вкладку «Подробные настройки» и зададим нужный цвет тексту:
1.В обычном состоянии
2.При наведении курсора
3.При нажатии на кнопку
Проделаем вышеописанные действия (шага 3) на записи:
Шаг 4. Переходим в раздел «Действие», выбираем действие «Открыть страницу» и пропишем код в поле «Ссылка».
Пример кода:
После mailto: необходимо указать ваш электронный адрес.
Шаг 5. Публикуем страницу и всё готово! Чтобы протестировать кликабельность электронного адреса, зайдите в предпросмотр или на опубликованную версию страницы.
2.2 Используем виджет «Текст»
Шаг 1. Добавим виджет «Текст» в секцию
Далее, внутри виджета текста, укажем наш электронный адрес, который будут видеть посетители (можно указать в любом формате).
Шаг 2. Выделим наш текст в режиме редактирования и установим на него ссылку в виде: mailto:info@platformalp.ru в поле «URL».
После mailto: необходимо указать ваш электронный адрес. И нажмем «Вставить» ссылку на выделенный текст.
Проделаем вышеописанные действия (шага 2) на записи:
В ссылке на почту есть возможность сразу вставить тему письма, добавив в конце ?subject=тема
Пример:
Шаг 3. Публикуем страницу и всё готово! Чтобы протестировать кликабельность электронной почты, зайдите в предпросмотр или на опубликованную версию страницы.
3. Как убрать подчеркивание текстовой ссылки?
Переходим в «Просмотр HTML-кода» виджета «Текст» (нажав на иконку в панели редактирования текста)
Разберем на примере, как должно получиться:
Как сделать кликабельный номер телефона ВКонтакте
Используя новые возможности ВК очень легко сделать кликабельный номер телефона ВКонтакте практически в любой записи. Такая ссылка на звонок более выгодна с точки конверсии и эффективности.
❗ Сразу скажу, что кликабельную ссылку на звонок в ВКонтакте можно легко сделать, как на мобильном телефоне, так и на компьютере.
Выгоды от возможности прямого звонка в ВКонтакте
Выгоды от возможности прямого звонка в ВКонтакте действительно очевидны. Сравните сами и наверняка согласитесь в этом со мной (представлены только тексты постов).
Видите? После прочтения для звонка нужно обязательно переписать номер телефона, чтобы позвонить. А если нечем и не на что записать? Но ведь в таком случае может быть упущено драгоценное время…
Совсем иначе выглядит запись с кликабельным номером телефона.
Для читателя такого поста в процессе чтения сразу видно, что номер подсвечивается цветом, как все ссылки. А при наведении курсора на него он еще и подчеркивается.
Естественно, что смысл говорить ссылке на звонок в ВКонтакте есть только в том случае, когда звонки ВКонтакте разрешены Вами.
Как разрешить звонки ВКонтакте
А разрешить звонки ВКонтакте, и также при ненадобности наоборот запретить, Вы можете в настройках своего профиля: нужно выбрать режим «Настройки», а далее выбрать вкладку «Приватность».
И уже в разделе «Приватность» проскрольте страницу до раздела «Связь со мной». Найдите в нем опцию «Кто может мне звонить» и сделайте соответствующий выбор круга лиц.
После этого посетители вашей страницы, которым вы разрешили звонки, будут видеть возможность, не только написать вам сообщение, но и связаться при помощи аудио или видеозвонка.
Однако и в этом случае есть один небольшой нюанс.
Постоянную возможность позвонить непосредственно с вашей страницы будут иметь только пользователи компьютеров.
Если человек зашел со смартфона, то по мере скроллинга ленты новостей пиктограмма звонка уходит вверх и в этом случае для созвона нужно вернуться обратно и потом уже нажимать вызов.
Если говорить о звонках из ленты группы, то посетителю нужно сделать и того больше. Найти контакты администратора группы, перейти на его страницу…
В общем, как не крути, но возможность делать ссылку на звонок точно выручит во многих ситуациях, ведь для нее нет никаких ограничений по месту размещения.
Ссылка на звонок ВКонтакте
Конструктивно ссылка на звонок ВКонтакте выглядит вот так:
А теперь для сравнения посмотрите, как выглядит ссылка на профиль в ВКонтакте:
Из этого следует простой вывод, что для написания ссылки на звонок ВКонтакте самый оптимальный вариант — это скопировать ссылку на свой профиль и потом уже добавить в нее в нужном месте слово позвонить с вопросительным знаком ( call? ) и соответственно поставить знак равенства ( = ) перед числовым значением самого id.
Ссылку на профиль легко скопировать из адресной строки браузера или выбором соответствующей команды, если вы делаете такое оформление на смартфоне.
Но так просто будет в только случае, если вы не прописали какой-нибудь никнейм вместо цифрового id.
Как узнать id профиля ВКонтакте
Для копирования id своего профиля в ВКонтакте в случае, когда вы установили ранее никнейм вместо цифр, зайдите в настройки своего профиля, выберите режим «Настройки», а далее — вкладку «Общее».
Проскрольте открывшуюся страницу до раздела «Адрес страницы».
Нажмите в этом разделе надпись «Изменить» и после этого скопируйте цифровое значение id из строки «Номер страницы».
Естественно, что в этом случае работы прибавляется, поэтому можно просто сделать один раз нужную заготовку на кликабельный номер для звонков в ВКонтакте, сохранить эту ссылку в удобное место и затем использовать при необходимости.
Оформление ссылки на звонок ВКонтакте
И хотя при публикации ссылка в таком виде, как я ее показал выше, уже будет активировать звонок при клике по ней, она остается непонятной для читателя. Я бы и сам не понял, если бы увидел ее в таком виде:
Поэтому ее нужно «доработать» :
Доработка несложная. Вы просто в самом начале ссылки без пробелов ставите собачку: @
При этом нет установленного формата написания телефонного номера.
Вы можете писать его хоть с 8-ки, хоть без пробелов, хоть со скобками… И даже можете вместо номера написать текстовую фразу, типа «Позвонить».
Конечно номер вы должны сопроводить поясняющим текстом, который будет побуждать читателя позвонить вам. Пример такого оформления я приводил в самом начале статьи, когда рассказывал о преимуществах ссылки на звонок в ВКонтакте.
Весь процесс создания кликабельной ссылки на телефон в ВКонтакте с множеством примеров в мобильном и десктопном вариантах Вы можете посмотреть в этом видео:
Смотри другие видео на моем видеоканале
Как видите, в том, чтобы сделать красивую ссылку на звонок ВКонтакте нет ничего сложного. Надеюсь, что эта статья будет полезна для вас и вы непременно воспользуетесь ею на практике. Если остались вопросы, не стесняйтесь, задавайте их в комментариях. Отвечу обязательно.
С уважением, Сергей Почечуев
Заголовок твоей статьи некорректен! У тебя нет понимания одной вещи! То, что ты предлагаешь сделать, это не кликабельный номер телефона, а просто ссылка на функцию звонков в ВКонтакте, которые осуществляются не по номеру телефона от оператора сотовой связи, а по своей внутренней «контактовской» связи, подобно звонкам в Скайпе. Идентификация абонентов при этих звонках происходит не по номеру телефона, а по ID страницы. Номер телефона тут вообще никак не участвует. В VK он используется только для регистрации профиля и SMS-уведомлений. В тексте твоей ссылки можно написать какой угодно номер и не обязательно свой (в этом, конечно, нет смысла — это я так, для примера), а звонок всё равно до тебя дойдёт, потому что это будет звонок не с номера на номер, а со страницы на страницу. Понимаешь суть того, что я пытаюсь тебе объяснить? Можно, как ты верно подметил, вместо номера телефона, вообще написать какое-нибудь слово, например «позвонить» или что-нибудь ещё. А кликабельный номер телефона — это такая ссылка с текстом номера телефона, при клике по которой открывается приложение «Телефон» и звонок осуществляется «классически» — через оператора сотовой связи и именно по номеру телефона. Это точно также, как, например, кликабельные адреса электронной почты, при клике по которым открывается почтовое приложение, в котором уже прописан адрес адресата, и сообщение будет отправлено не по внутренней почте какого-то сервиса (например, социальной сети), а именно по e-mail, на указанный адрес.
С точки зрения логики работы сайтов, Вы правы. А вот с практической стороны так и должно быть. Эту фишку в ВК реализовали именно для звонков внутри сети.
Делаем номер телефона — ссылкой (кликабельный)
Опубликовано Roman K в 13.05.2019 13.05.2019
Что бы сделать номер телефона ссылкой, по нажатию на которую будет происходить вызов (с мобильного устройства) и переход в приложение «звонилки» с десктопа, достаточно вставить в HTML код, следующую конструкцию:
Пример как это выглядит ссылка на телефон на сайте:
Теперь разберемся в написаном
Конструкция … говорит браузеру, о том что содержимое которое находится внутри тега «a» (…) представляет из себя ссылку, которая ведет на адрес, в нашем случае адресом ссылки является телефон «tel:+79090010901». Все, что находится внутри тега «a» будет кликабельным и отображаться на странице сайта. Мы можем написать любое содержимое, при клике на которое состоится переход на функцию вызова.
Обратите внимание чтобы сделать номер телефона ссылкой, наполняя текст в визуальном редакторе, как на картинке ниже,
необходимо проделать следующее:
Выделяем необходимы необходимый текст, при нажатии на который будет происходить звонок инажимаем на кнопку «вставить/изменить ссылку»
вводим в поле, конструкцию «tel:88000090807» (без кавычек)
Таким же образом возможно сделать и другие ссылки:
Наше содержимое – ссылка на e-mail адрес;
Наше содержимое – послать смс сообщение;
Инструкция по ссылкам на Телеграм и WhatsApp будет в отдельных постах, так как у нее есть дополнительные возможности.
link::Как сделать ссылку с сайта в телеграм (материал уже готовится)
link::Как сделать ссылку с сайта в whatsapp (материал уже готовится)
Как сделать кликабельный телефон на сайте
С каждым годом стремительно растет количество интернет-пользователей, использующих мобильные платформы. И чтобы не потерять своего клиента, необходимо предоставить посетителю возможность позвонить прямо сейчас.
Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).
Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.
Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.
Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:
То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.
Выглядеть это будет так:
После этого пользователи мобильных устройств смогут просто кликнуть на ссылку и, не совершая дополнительных действий, позвонить вам. Теперь можно добавлять номер телефона в блок контактов на вашем сайте.
Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:
Или можно добавить ссылку для звонка со Skype на телефон: