Главная
Web-дизайн
Как сделать ссылки на Viber, Whatsapp, Telegram, Skype и обычный телефонный номер

Как сделать ссылки на Viber, Whatsapp, Telegram, Skype и обычный телефонный номер

ссылки на 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. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 67, в среднем: 4.8 из 5

Опубликовано 55 комментариев

  • Ольга
    Комментариев: 1

    Данные ссылки на сайте НЕ работают. Речь о вотсап, вайбер, тееграм

    • Виталий
      Комментариев: 513

      Вы пробовали в данные ссылки добавлять свой номер телефона вместо +120345678910 и свой никнейм для телеграмма, вместо nikname?

  • вячеслав
    Комментариев: 1

    ссылка по вайберу точно не корректная.

    • Виталий
      Комментариев: 513

      Добавил ссылку на тестовый сайт. Даже с фейковым номером, при нажатии - открывается вайбер и спрашивает - ПОЗВОНИТЬ +120345678910 по VIBER OUT.
      Вы точно, все правильно добавили? 🙂

  • Сергей
    Комментариев: 1

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

    • Виталий
      Комментариев: 513

      Эм, я даже не знаю что сказать. Может где-то над номерами еще писать, что у пользователя должен быть телефон, чтобы он смог позвонить? Разве это как минимум не логично?

    • Александра
      Комментариев: 1

      Хочу добавить эту ссылку в Инстаграм, в поле веб сайт, но программа сообщает об ошибке: "укажите действительный сайт", подскажите пожалуйста, что можно сделать чтобы все получилось ????

  • Ника
    Комментариев: 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

    Супер. Огромное спасибо Вам!

  • potemkin
    Комментариев: 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
    вроде ж все правльно заполнил

  • kaavain
    Комментариев: 1

    Барабашка... Сделал вчера две ссылки себе на сайт - видет и вацап. Вчера проверил ,все работает. попросил приятеля удаленно проверить - все работает. Сегодня хрясь! не работает. И с андроида и с огрызка - одно и то же.
    Не удалось открыть веб-страницу
    net:: ERR_UNKNOWN_URL_SCHEME/

  • Иван
    Комментариев: 3

    Вот, как раз мне так же пришла такая идея работая на шаблоне вордпресс, я сделал ссылки на группы то есть можно просто написать сообщения , а вот чтоб звонили куда надо вставить ссылку? в виджет?

  • Денис
    Комментариев: 1

    Здравствуйте. Подскажите, я добавляю ссылку в Adobe muse, и в окне, которое я добавил, появляется надпись "viber" я не могу ее убрать или редактировать. Как сделать чтобы код встраивался без надписи?

  • Юра
    Комментариев: 1

    Спасибо автору, все работает, на ноуте требует приложения из магазина, но в телефоне, Ватсап и смс открывает без проблем 🙂 я рад

  • Иван
    Комментариев: 1

    Здравствуйте.
    А как сделать что бы была иконка этих мессенджеров на сайте и по ним при нажатии можно было написать/позвонить?

    • Виталий
      Комментариев: 513

      Здравствуйте, есть как минимум два решения вашего вопроса.
      1. Вместо текста добавить картинку тегом img.
      2. Задать стили самой ссылке с помощью CSS и указать ей фоновую картинку.

  • Валентина
    Комментариев: 2

    Добрый вечер, спасибо за доступное описание, у меня все получилось, я имею ввиду звонки по телефону. Благодарю. .

  • Kirill
    Комментариев: 1

    Спасибо, работает! Только одно удивило, когда телефон указываешь с плюсом +++
    То приложение на телефоне не открывается, просит его обновить.

    /Для приложения Viber на мобильных
    Viber

  • таня
    Комментариев: 1

    привет! интсаграм не делает активную ссылку на телеграм канал.НО! у многих в шапке профиля стоит такая ссылка . и мне нужно!!! кто сможет помочь?

  • Мансур
    Комментариев: 1

    Спасибо огромное Виталий. Всё прекрасно работает.

  • Дмитрий
    Комментариев: 4

    Виталий, подскажите пожалуйста готовый HTML код для объединенного варианта открытия Viber как с ПК, так и с мобильного устройства. Имеется ввиду Ваш совет по CSS, а какой код будет в HTML? Заранее спасибо.

    • Виталий
      Комментариев: 513

      Выше есть целый комментарий с пояснением. ШТМЛ коды пишутся сразу и тот и тот. И только стили в зависимости от размера экрана показывают одну или другую кнопку.

      • Дмитрий
        Комментариев: 4

        Так со стилями то и затык. У меня сайт через "конструктор сайтов" провайдера хостинга. Можно вставить HTML код. Так как вставить в этот код СТИЛИ? Сейчас вставлено: "". Заранее огромное спасибо за помощь!

  • Дмитрий
    Комментариев: 4

    Так со стилями то и затык. У меня сайт через "конструктор сайтов" провайдера хостинга. Можно вставить HTML код. Так как вставить в этот код СТИЛИ? Сейчас вставлено: Заранее огромное спасибо за помощь!

    • Виталий
      Комментариев: 513

      Статьи на моем сайте рассчитанный на обычные ситуации, когда сайт создан нормальными способами. В вашем случаи можете стили добавить с помощью тегов тут CSS прям в HTML код. Можете рядом с ссылками. Но я бы рекомендовал организовать нормальный сайт, с помощью CMS или самописный.

  • Евгений
    Комментариев: 1

    Виталий, подскажите, можно ли сделать так, чтобы при нажатии кнопки (телеграмм, ватсап, вайбер) отправилось определенное сообщение на определенный номер.

  • Дмитрий
    Комментариев: 1

    Ссылки работают на iOS! но андройд их как обычное сообщение понимает. Как быть?

  • Анатолий
    Комментариев: 1

    нужна ссылка в поле где нужно указать ссылку на сайт есть какие-то варианты?

  • Виктор
    Комментариев: 2

    Как дожна выглядеть ссылка что бы вставить ее в готовую кнопку, созданную виджетом, в строку юрл?

  • Виктор
    Комментариев: 2

    И еще вопросик, есть ли такая ссылочка для мессенджера от фейсбука?

    • Oleg
      Комментариев: 1

      Ссылка имеет формат http://m.me/, где PAGE_NAME — это идентификатор страницы Facebook, к которой привязан бот.

  • Виталий
    Комментариев: 1

    Благодарю за доступное объяснение, в теме Порто работают ссылки. Успехов)))

  • ihorek
    Комментариев: 1

    СУПЕР!!!! ДАЙ ВАМ БОГ ЗДОРОВЬЯ!!!

  • Екатерина
    Комментариев: 1

    На вибер с ПК не работает ссылка. С мобильного все нормально, предлагает добавить контакт, но насколько я знаю в вибер нельзя начать сразу чат.

  • Нур
    Комментариев: 1

    Добрый день!
    Возможно ли сделать подобную ссылку и для Zoom?
    Если да, то буду признателен за подсказку как это сделать.
    Спасибо

  • Олег
    Комментариев: 1

    Спасибо! работает. сделал как автор, с небольшой поправкой по вайберу, чтоб не добавлять а сразу в чат:
    WhatsApp

    Viber

    Telegram

  • Богдан
    Комментариев: 1

    viber://add?number=38093707000*
    если эту ссылку отправить в смс на iphone - ссылка кликабельна и сразу открывается переписка, но если на Android - то не открывается....... есть варианты решения этой ситуации?

  • Николай
    Комментариев: 1

    Хотя б один написал, что для Viber символ "+" следует писать в кодировании URL, вот так: "%2B".
    Viber
    Смысл оставлять комментарии, где вы пишите о том, что я сделал там какие-то правки и не поделиться этим с людьми (такие как Олег, например)

  • Андрей
    Комментариев: 1

    Прекрасный, простой и удобный сервис связи для инстаграм и одновременно виджет на сайт с мессенджерами https://kontakts.me/

  • Navi
    Комментариев: 1

    Добрый день!
    Есть ли подобные ссылки для Imo?

Добавить комментарий для kaavain Отменить ответ

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий
X

Привет дорогой друг

У тебя установлено расширение AdBlock или подобное. Добавь мой сайт в белый список, и тем самым внесешь свой вклад в его развитие. Инструкция как отключить AdBlock Хочу такое же окошко