Как сделать ссылку на телефон, email и мессенджеры кликабельной

HTML и CSS WordSmall

Казалось бы, такой очевидный вопрос, на который ответ больше чем ясен. Но это только на первый взгляд: везде есть свои подводные камни. К примеру, для мессенджеров ссылка формируется немного иначе, к ссылке на звонок с телефона приписывается приставка tel и так дальше.

С этого небольшого обзора узнаем, как сделать ссылку на телефон кликабельной (активной), также сделаем активную ссылку на почту и на все популярные мессенджеры: Viber, Skype, WhatsApp, Telegram, ICQ. Разберем каждую в отдельности, а в конце все объединим в один блок и сделаем оформление, чтоб все красиво было.

Активная ссылка телефона на сайте

Для того чтобы на сайте номер телефона при нажатии срабатывал как активный вызов, нужно в атрибуте href прописать значение tel. Ну не совсем сразу будет идти вызов, а появится окно с запросом, каким приложением открыть tel. По сути, это обычный тег ссылки, а значит, вместо текста или самого номера, может быть, картинка, иконка и прочие.

<a class="phone-but" href="tel:+12345678912">Позвонить нам</a>
<!-- Пример с картинкой -->
<a class="phone-but" href="tel:+12345678912"><img src="img/phone.png" alt="номер телефона"></a>

Пример: Позвонить нам

Активная ссылка для отправки писем по email

Здесь аналогичная ситуация, то есть все остается как есть, но в атрибуте ссылки прописываем немного другое значение. При нажатии на такую ссылку откроется модельное окно, в котором вас попросят выбрать приложение для открытия ссылки mailto.

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

<a class="email-but" href="mailto:moypochta@gmail.com">Задать вопрос</a>
<!-- Пример с автозаполнением темы письма и сообщение -->
<a class="email-but" href="mailto:moypochta@gmail.com?subject=Спасибо за статью&body=Здравствуйте! Статья для меня была полезной">Написать на почту</a>

Пример: Написать на почту

Активная ссылка на Viber на сайт

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

<a class="viber-but" href="viber://chat?number=%2B75555555559">Написать по Viber</a>

Пример: Написать по Viber

Активная ссылка на WhatsApp на сайт

Такую ссылку можно получить в самом приложении в своем профиле. Но это лишняя «возня», так как ссылка всегда одинаковая, за исключением номера телефона. Поэтому вам всего лишь нужно изменить номер и можете смело использовать эту ссылку на WhatsApp на своем сайте.

<a class="whats-but" href="https://api.whatsapp.com/send?phone=77788899965">Написать по WhatsApp </a>

Пример: Написать по WhatsApp

Активная ссылка на Telegram на сайт

С ссылкой на Telegram особо никаких сложностей нет. Просто подставляется ник пользователя и ссылка готова. Но есть один небольшой нюанс, в основном в РФ. Ссылки могут блокировать, так как в России телеграм запрещён. Для этого есть разные способы обхода. К примеру, через сервис teleg.run сгенерировать ссылку или подобный сервис. Перенаправление будет происходить через переадресацию. В таком плане блокировок быть не должно.

<a class="teleg-but" href="https://t.me/username">Написать по Telegram</a>

Пример: Написать по Telegram

Активная ссылка на Skype на сайт

Ссылка для Скайпа похожа на другие мессенджеры, только со своими приставками. Для примера приведу два варианта: ссылка на звонок и ссылка на чат. Они чаще всего используются на сайте. Ещё можно делать ссылки на конференции, на мультичат и т.д. Но это немного не то, что нужно для связи.

<!-- ссылка на звонок -->
<a class="skype-but" href="skype:username?call">Позвонить по Skype</a>
<!-- ссылка на чат -->
<a class="skype-but" href="skype:username?chat">Написать по Skype</a>

Пример: Написать по Skype

Активная ссылка на ICQ на сайт

Для сервиса ICQ также есть ссылка, при нажатии на которую будет добавлять контакт в ваш список контактов. Это мессенджер уже стал не столь популярным, но все им еще многие пользуются. Скорей всего те, кто к нему привык.

<a class="icq-but" href="icq:999999999">Добавить контакт ICQ</a>

Пример: Добавить контакт ICQ

Активные кнопки на мессенджеры

Активная ссылка на телефон, Viber, Telegram

Демо

Как говорилось в начале обзора, объединяем все ссылки в один блок в виде веб-кнопок. В качестве иконок использовался шрифт Font Awesome.

<div class="social-buttons">
    <a class="social-button skype-but" href="skype:username?chat">
    <i class="fa fa-skype" aria-hidden="true"></i>
    </a>
    <a class="social-button whats-but" href="https://api.whatsapp.com/send?phone=77788899965">
    <i class="fa fa-whatsapp"></i>
    </a>
    <a class="social-button teleg-but" href="https://t.me/username">
    <i class="fa fa-telegram" aria-hidden="true"></i>
    </a>
    <a class="social-button icq-but" href="icq:999999999">
    <i class="fa fa-asterisk" aria-hidden="true"></i>
    </a>
    <a class="social-button viber-but" href="viber://chat?number=%2B75555555559">
    <i class="fa fa-phone-square" aria-hidden="true"></i>
    </a>
    <a class="social-button email-but" href="mailto:moypochta@gmail.com?subject=Спасибо за статью&body=Здравствуйте! Статья для меня была полезной">
    <i class="fa fa-envelope"></i>
    </a>
    <a class="social-button phone-but" href="tel:+12345678912_">
    <i class="fa fa-phone" aria-hidden="true"></i>
    </a>
</div>

.social-buttons {
  height: 90px;

}

.social-button {
  display: inline-block;
  background-color: #fff;
  width: 50px;
  height: 50px;
  line-height: 50px;
  margin: 0 3px;
  text-align: center;
  position: relative;
  overflow: hidden;
  opacity: .99;
  border-radius: 28%;
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.05);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button:before {
  content: '';
  background-color: #000;
  width: 120%;
  height: 120%;
  position: absolute;
  top: 90%;
  left: -110%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}
.social-button .fa {
  font-size: 28px;
  vertical-align: middle;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  -webkit-transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
  transition: all 0.35s cubic-bezier(0.31, -0.105, 0.43, 1.59);
}

.social-button.skype-but:before {
  background-color: #00A3E7;
}
.social-button.skype-but .fa {
  color: #00A3E7;
}

.social-button.whats-but:before {
  background-color: #4dc247;
}
.social-button.whats-but .fa {
  color: #4dc247;
}

.social-button.email-but:before {
  background-color: #ff6600;
}
.social-button.email-but .fa {
  color: #ff6600;
}

.social-button.phone-but:before {
  background-color: #000;
}
.social-button.phone-but .fa {
  color: #000;
}

.social-button.teleg-but:before {
  background-color: #31A9DD;
}
.social-button.teleg-but .fa {
  color: #31A9DD;
}

.social-button.icq-but:before {
  background-color: #24FF00;
}
.social-button.icq-but .fa {
  color: #24FF00;
}

.social-button.viber-but:before {
  background-color: #7B519C;
}
.social-button.viber-but .fa {
  color: #7B519C;
}

.social-button:focus:before, .social-button:hover:before {
  top: -10%;
  left: -10%;
}
.social-button:focus .fa, .social-button:hover .fa {
  color: #fff;
  -webkit-transform: scale(1);
          transform: scale(1);
}
Автор, он же Андрей, он же Admin, он же WordSmall

Лентяй-любитель, окончил высшую школу безделья с многочисленными знаками отличия. Создатель этого небольшого «чудо-блога» о еще более «чудном» контенте.

Подписаться на новые статьи
Добавить комментарий
bold quote code