- 26 мая 2017г
- 57193
- 55
- Рубрика: Web-дизайн
Как сделать ссылки на Viber, Whatsapp, Telegram, Skype и обычный телефонный номер

Доброго времени суток. 🙂
Недавно мне, в личной переписке задали вопрос, можно ли сделать ссылки, при нажатии на которые запускались бы определенные, популярные мессенджеры. То бишь не просто текстовый номер или логин, а кликабельная ссылка для Viber, Whatsapp, Telegram. После этого я решил. почему бы не написать об этом статью. Информации тут не много, но для многих она может быть полезной.
Для начала покажу простейший способ как сделать кликабельную ссылку для обычного телефонного номера. для посетителей. которые посещают ваш сайт с телефона, будет актуальным номер с ссылкой. При нажатии на него, сразу же номер будет на экране для звонка и его не нужно будет выделять. копировать или вообще вводить вручную. Таким образом, вы упрощаете для клиента способ связаться с вами. Готовая ссылка будет иметь следующий вид:
<a title="Позвонить" href="tel:+120345678910">+12(034)567-89-10</a>
Как видите, номер выведется как - +12(034)567-89-10. Можете заключать его в что угодно, добавлять стили, теги, задавать ему любой вид. В путь ссылки мы прописываем в формате - tel:+120345678910. После tel: нужно указать номер без пробелов и лишних символов, просто номер, в том формате, в котором обычно набираете его на телефоне. Это очень важно, в противном случаи номер для набора будет неправильным.
Далее по этому же принципу делаем ссылки для Viber, Whatsapp, Telegram. Для каждой они будут схожими, но немного отличаться. скажу сразу, что выводить на экран, решать вам, я просто выведу название мессенджеров.
<a title="WhatsApp" href="whatsapp://send?phone=+120345678910">WhatsApp</a> //Для приложения Viber на ПК <a title="Viber" href="viber://chat?number=+120345678910">Viber</a> //Для приложения Viber на мобильных <a title="Viber" href="viber://add?number=120345678910">Viber</a> <a title="Telegram" href="tg://resolve?domain=nikname">Telegram</a>
Как видите по коду, в конце ссылки для Viber и Whatsapp указан номер телефона. Для Telegram же указан никнейм. Вам остается попросту менять их на нужные и ссылка будет работать.
Можете использовать и проверить на своем сайте, указывая свой номер. Как и писал выше, данная мелочевка, поможет упростить вашим клиентам жизнь и позволит проще связываться с вами.
Бонусом добавлю еще ссылку для скайпа. Первая позволит открыть окно с диалогом для общения по Skype.
<a href="skype:nikname?chat">nikname</a>
Просто замените nikname на нужный профиль Skype. Например - skype:superman?chat. Так же можно сделать ссылку на звонок по Skype.
<a href="skype:nikname?call">Skype</a>
Как видите, разница только в ссылке. У одной - ?chat, а у второй - ?call. Как и с чатом, просто меняете nikname на нужное имя.
На этом все, спасибо за внимание. 🙂
Комментариев: 1
Данные ссылки на сайте НЕ работают. Речь о вотсап, вайбер, тееграм
Комментариев: 513
Вы пробовали в данные ссылки добавлять свой номер телефона вместо +120345678910 и свой никнейм для телеграмма, вместо nikname?
Комментариев: 1
ссылка по вайберу точно не корректная.
Комментариев: 513
Добавил ссылку на тестовый сайт. Даже с фейковым номером, при нажатии - открывается вайбер и спрашивает - ПОЗВОНИТЬ +120345678910 по VIBER OUT.
Вы точно, все правильно добавили? 🙂
Комментариев: 1
Необходимо уточнять, что для того чтобы пользователь смог воспользоваться такой ссылкой у него должно быть установлено соответствующее приложение...
Комментариев: 513
Эм, я даже не знаю что сказать. Может где-то над номерами еще писать, что у пользователя должен быть телефон, чтобы он смог позвонить? Разве это как минимум не логично?
Комментариев: 1
Хочу добавить эту ссылку в Инстаграм, в поле веб сайт, но программа сообщает об ошибке: "укажите действительный сайт", подскажите пожалуйста, что можно сделать чтобы все получилось ????
Комментариев: 513
Указать действительный сайт. Инстаграм просит сайт, а вы пытаетесь добавить ссылку 🙂
Комментариев: 1
Все отлично работает. А как сделать ссылки LINE на и WECHAT ?
Комментариев: 1
С компьютера эти ссылки работают, а с телефона нет. Что делать?
Комментариев: 3
На пк ссылка viber работает на телефоне на базе android нет даже после обновления viber до последней версии. PS Тег лишний в коде )))
Комментариев: 513
Добавил еще одну ссылку. Спасибо за подсказку убрал тег I. Он остался от иконки 🙂
Комментариев: 3
Виталий, а вы не знаете можно ли объединить оба варианта каким нибудь скриптом что бы если посетитель сайта зашел с пк ему выдавало ссылку на viber для пк, а если с моб телефона ссылку на viber для телефона?
Комментариев: 513
Самый простой способ укажите обе, каждому присвойте свой айди, а потом стилями CSS для определенного размера экрана, показывайте ту или иную ссылку. Например если ширине 1024 пикселей показывать ссылку такую, то, если меньше такую. Делается это с помощью
@media (max-width:1024px){
//тут стили
}
Ссылке для телефона прописываете display:none , а в @media display:block или inline-block, как удобнее.
Ссылке для ПК просто в @media - display:none. В итоге получится типа так.
Ссылки:
<a id="vb_pk" title="Viber" href="viber://chat?number=+120345678910">Viber</a>
<a id="vb_mb" title="Viber" href="viber://add?number=120345678910">Viber</a>
Стили
#vb_mb{display:none}
@media (max-width:1024px){
#vb_pk{display:none}
#vb_mb{display:block}
}
Как видите, я установил ширину 1024 пикселей. Мониторов для Пк, с таким расширением уже нет, да и для ноутов тоже. Разве что какой-то старый динозавр. А вот планшеты и моб телефоны, вы как раз уловите.
Можете поменять значения. Все выше указано как пример.
Ну и можете поискать второе решение - скрипт, который будет определять устройство.
Комментариев: 3
Супер. Огромное спасибо Вам!
Комментариев: 1
Подскажите: как лучше поступать с пользователями у кого на пк не установлен вайбер ? Что для них открывать ? Ссылку на скачивания вайбера для пк ?
Комментариев: 513
Можно сделать всплывающую выноску воспользовавшись способом номер 2 из статьи http://gnatkovsky.com.ua/poyavlenie-bloka-pri-navedenii-s-pomoshhyu-css.html
Таким образом как человек наведет на вайбер, всплывет окошко, в котором можно написать, что то на подобии:
Если у вас не установлен Viber для ПК, можете скачать его здесь. и ссылку
Комментариев: 2
Все работает, но телеграм как то криво:
ссылка просто перекидывает на телеграм, но не на контакт
Комментариев: 2
a title="Telegram" href="tg://resolve?domain=@cryptoassistant_info
вроде ж все правльно заполнил
Комментариев: 513
А вы попробуйте без @, вот так:
tg://resolve?domain=cryptoassistant_info
Комментариев: 1
Барабашка... Сделал вчера две ссылки себе на сайт - видет и вацап. Вчера проверил ,все работает. попросил приятеля удаленно проверить - все работает. Сегодня хрясь! не работает. И с андроида и с огрызка - одно и то же.
Не удалось открыть веб-страницу
net:: ERR_UNKNOWN_URL_SCHEME/
Комментариев: 513
Попробуйте ссылке добавить target="_blank" , возможно это решит вашу проблему.
Комментариев: 3
Вот, как раз мне так же пришла такая идея работая на шаблоне вордпресс, я сделал ссылки на группы то есть можно просто написать сообщения , а вот чтоб звонили куда надо вставить ссылку? в виджет?
Комментариев: 513
Не совсем понял вопрос, вернее вообще не понял.
Комментариев: 1
Здравствуйте. Подскажите, я добавляю ссылку в Adobe muse, и в окне, которое я добавил, появляется надпись "viber" я не могу ее убрать или редактировать. Как сделать чтобы код встраивался без надписи?
Комментариев: 513
Уберите слово viber из ссылки и все.
<a title="Viber" href="viber://chat?number=+120345678910">Viber <-- ВОТ ЭТО СЛОВО</a>
Комментариев: 1
Спасибо автору, все работает, на ноуте требует приложения из магазина, но в телефоне, Ватсап и смс открывает без проблем 🙂 я рад
Комментариев: 1
Здравствуйте.
А как сделать что бы была иконка этих мессенджеров на сайте и по ним при нажатии можно было написать/позвонить?
Комментариев: 513
Здравствуйте, есть как минимум два решения вашего вопроса.
1. Вместо текста добавить картинку тегом img.
2. Задать стили самой ссылке с помощью CSS и указать ей фоновую картинку.
Комментариев: 2
Добрый вечер, спасибо за доступное описание, у меня все получилось, я имею ввиду звонки по телефону. Благодарю. .
Комментариев: 1
Спасибо, работает! Только одно удивило, когда телефон указываешь с плюсом +++
То приложение на телефоне не открывается, просит его обновить.
/Для приложения Viber на мобильных
Viber
Комментариев: 513
Поэтому в примере указано без + (плюса). Специально, чтобы все делали так же 🙂
Комментариев: 1
привет! интсаграм не делает активную ссылку на телеграм канал.НО! у многих в шапке профиля стоит такая ссылка . и мне нужно!!! кто сможет помочь?
Комментариев: 1
Спасибо огромное Виталий. Всё прекрасно работает.
Комментариев: 4
Виталий, подскажите пожалуйста готовый HTML код для объединенного варианта открытия Viber как с ПК, так и с мобильного устройства. Имеется ввиду Ваш совет по CSS, а какой код будет в HTML? Заранее спасибо.
Комментариев: 513
Выше есть целый комментарий с пояснением. ШТМЛ коды пишутся сразу и тот и тот. И только стили в зависимости от размера экрана показывают одну или другую кнопку.
Комментариев: 4
Так со стилями то и затык. У меня сайт через "конструктор сайтов" провайдера хостинга. Можно вставить HTML код. Так как вставить в этот код СТИЛИ? Сейчас вставлено: "". Заранее огромное спасибо за помощь!
Комментариев: 4
Так со стилями то и затык. У меня сайт через "конструктор сайтов" провайдера хостинга. Можно вставить HTML код. Так как вставить в этот код СТИЛИ? Сейчас вставлено: Заранее огромное спасибо за помощь!
Комментариев: 513
Статьи на моем сайте рассчитанный на обычные ситуации, когда сайт создан нормальными способами. В вашем случаи можете стили добавить с помощью тегов тут CSS прям в HTML код. Можете рядом с ссылками. Но я бы рекомендовал организовать нормальный сайт, с помощью CMS или самописный.
Комментариев: 1
Виталий, подскажите, можно ли сделать так, чтобы при нажатии кнопки (телеграмм, ватсап, вайбер) отправилось определенное сообщение на определенный номер.
Комментариев: 1
Ссылки работают на iOS! но андройд их как обычное сообщение понимает. Как быть?
Комментариев: 1
нужна ссылка в поле где нужно указать ссылку на сайт есть какие-то варианты?
Комментариев: 2
Как дожна выглядеть ссылка что бы вставить ее в готовую кнопку, созданную виджетом, в строку юрл?
Комментариев: 1
У меня вышло так: viber://chat?number=+120345678910
Комментариев: 2
И еще вопросик, есть ли такая ссылочка для мессенджера от фейсбука?
Комментариев: 1
Ссылка имеет формат http://m.me/, где PAGE_NAME — это идентификатор страницы Facebook, к которой привязан бот.
Комментариев: 1
Благодарю за доступное объяснение, в теме Порто работают ссылки. Успехов)))
Комментариев: 1
СУПЕР!!!! ДАЙ ВАМ БОГ ЗДОРОВЬЯ!!!
Комментариев: 1
На вибер с ПК не работает ссылка. С мобильного все нормально, предлагает добавить контакт, но насколько я знаю в вибер нельзя начать сразу чат.
Комментариев: 1
Добрый день!
Возможно ли сделать подобную ссылку и для Zoom?
Если да, то буду признателен за подсказку как это сделать.
Спасибо
Комментариев: 1
Спасибо! работает. сделал как автор, с небольшой поправкой по вайберу, чтоб не добавлять а сразу в чат:
WhatsApp
Viber
Telegram
Комментариев: 1
viber://add?number=38093707000*
если эту ссылку отправить в смс на iphone - ссылка кликабельна и сразу открывается переписка, но если на Android - то не открывается....... есть варианты решения этой ситуации?
Комментариев: 1
Хотя б один написал, что для Viber символ "+" следует писать в кодировании URL, вот так: "%2B".
Viber
Смысл оставлять комментарии, где вы пишите о том, что я сделал там какие-то правки и не поделиться этим с людьми (такие как Олег, например)
Комментариев: 1
Прекрасный, простой и удобный сервис связи для инстаграм и одновременно виджет на сайт с мессенджерами https://kontakts.me/
Комментариев: 1
Добрый день!
Есть ли подобные ссылки для Imo?