Главная
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
Проголосовало: 35, в среднем: 5 из 5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Все отлично работает. А как сделать ссылки LINE на и WECHAT ?

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

    С компьютера эти ссылки работают, а с телефона нет. Что делать?

  • Георгий
    Комментариев: 3

    На пк ссылка viber работает на телефоне на базе android нет даже после обновления viber до последней версии. PS Тег лишний в коде )))

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

      Добавил еще одну ссылку. Спасибо за подсказку убрал тег I. Он остался от иконки 🙂

      • Георгий
        Комментариев: 3

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

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

          Самый простой способ укажите обе, каждому присвойте свой айди, а потом стилями 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

    Подскажите: как лучше поступать с пользователями у кого на пк не установлен вайбер ? Что для них открывать ? Ссылку на скачивания вайбера для пк ?

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

      Можно сделать всплывающую выноску воспользовавшись способом номер 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/

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

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

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

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

Это не спам *

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

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

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