Как установить телеграмм на страницу контакты

Месенджер Telegram имеет право быть среди контактных данных на сайте. В общем то чем больше способов связи с вами, тем лучше. Кто то и ВК просит добавить. Решать только Вам. Хочу показать как поставить кнопочку вызова через Telegram на сайт.

Прежде всего Вам нужно узнать Ваш ник в Telegram — имя пользователя, с которым будем осуществлять связь. подключаем телеграмм на сайт Если у вас еще нет имени в телеграмм, то создайте его. Зайдите в настройки телеграмма и задайте его. В итоге получим имя в виде @xxxx.

Именно это имя и будем использовать в ссылке https://telegram.im/@ХХХХ

<a href=»https://telegram.im/@XXXX» target=»_blank»  title=»»>телеграмм</a>

Ну и немного украсить <a href=»https://telegram.im/@ХХХХ» target=»_blank» class=»telegramim_button telegramim_shadow telegramim_pulse» style=»font-size: 20px;
width: 45px;
background: #185778;
box-shadow: 1px 1px 2px #185778;
color: #FFFFFF;
border-radius: 50%;» title=»»><img src=»https://telegram.org/img/t_logo.png»></a>

Картинку берем  с телеграмм орг, задаем размеры, тени и стили анимации

.telegramim_shadow {
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}

.telegramim_shadow:hover {
box-shadow: 1px 1px 15px rgba(0,0,0,0.5) !important;
}

.telegramim_pulse {
animation: animationpulse 2s infinite;
-webkit-animation: animationpulse 2s ease-out;
-webkit-animation-iteration-count: infinite;
}
.telegramim_pulse:hover {
animation: linear;
}

@-webkit-keyframes animationpulse {
0% {
-webkit-box-shadow: 0 0 0 0 inherit;
}
70% {
-webkit-box-shadow: 0 0 0 15px rgba(0,0,0, 0);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
@keyframes animationpulse {
0% {
transform: scale(1.0, 1.0);
-moz-box-shadow: 0 0 0 0 inherit;
box-shadow: 0 0 0 0 inherit;
}
10% {
transform: scale(1.1, 1.1);
}
15% {
transform: scale(1.0, 1.0);
}
70% {
-moz-box-shadow: 0 0 0 15px rgba(0,0,0, 0);
box-shadow: 0 0 0 15px rgba(0,0,0, 0);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(0,0,0, 0);
box-shadow: 0 0 0 0 rgba(0,0,0, 0);
}
}
@-ms-keyframes animationpulse {
0% {
-ms-transform: scale(1.0, 1.0);
}
10% {
-ms-transform: scale(1.1, 1.1);
}
20% {
-ms-transform: scale(1.0, 1.0);
}
100% {
-ms-transform: scale(1.0, 1.0);
}
}

и готовая кнопка должна выглядеть примерно так

Есть что сказать по этому материалу?

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