Telegram кнопка для сайта с анимацией

В этом уроке мы научимся вставлять кнопу Telegram на сайт, которая перекидывает на чат. При этом мы добавим ей красивую анимацию для привлечения большего внимания. Мы покажем, как установить Telegram кнопку на сайт WordPress, но данный способ подходит и для любых других сайтов.

Ссылка для перехода в Telegram

Так выглядит простая ссылка на чат в Telegram с сайта.

HTML код для вставки следующий:

<a href="https://t.me/your_name" target="_blank" title="Написать в Telegram" rel="noopener noreferrer"></a>

Где вместо your_name нужно вставить имя вашей учётной записи. Посмотреть его можно зайдя в Настройки/Имя пользователя.

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

Кнопка Telegram в углу экрана с анимацией

Для создания нашей кнопки, нам потребуется иконка Font Awesome. Для этого ваш шаблон сайта должен быть подключен к библиотеке шрифтов Font Awesome. Если иконка отображаться не будет, то необходимо будет данную библиотеку подключить. Это можно сделать вручную, либо воспользоваться плагином Font Awesome из репозитория WordPress.

HTML код:

<a href="https://t.me/your_name" target="_blank" title="Написать в Telegram" rel="noopener noreferrer"><div class="telegram-button"><i class="fa fa-telegram"></i></div></a>

CSS код:

.telegram-button {
    position: fixed;
    right: 13px;
    bottom: 90px;
    transform: translate(-50%, -50%);
    background: #0088cc; /*цвет кнопки*/
    border-radius: 50%;
    width: 55px; /*ширина кнопки*/
    height: 55px; /*высота кнопки*/
    color: #fff;
    text-align: center;
    line-height: 53px; /*центровка иконки в кнопке*/
    font-size: 35px; /*размер иконки*/
    z-index: 9999;
}
.telegram-button a {
    color: #fff;
}
.telegram-button:before,
.telegram-button:after {
    content: " ";
    display: block;
    position: absolute;
    border: 50%;
    border: 1px solid #0088cc; /*цвет анимированных волн от кнопки*/
    left: -20px;
    right: -20px;
    top: -20px;
    bottom: -20px;
    border-radius: 50%;
    animation: animate 1.5s linear infinite;
    opacity: 0;
    backface-visibility: hidden; 
}
 
.telegram-button:after{
    animation-delay: .5s;
}
 
@keyframes animate
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }
    50%
    {
        opacity: 1;
    }
    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

CSS для мобильной версии сайта:

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

@media (max-width : 800px) {  
.telegram-button {   
    bottom: 5px; /*отступ кнопки снизу от экрана*/
    left: 70px; /*отступ кнопки слева от экрана(right - справа)*/
  }
}

Установка кнопки на WordPress

В административной панели WordPress заходим в раздел "внешний вид/редактор тем". Затем, в зависимости от структуры вашей темы, заходим в нужные файлы и добавляем код. Код HTML обычно вставляется в файл footer.php (перед закрывающим тегом </body>), а код CSS в конец файла style.css.

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

Разные шаблоны могут иметь другую структуру, например, может быть несколько css файлов и прочее. Поэтому, если вы в этом не разбираетесь, то лучше воспользоваться специальными плагинами.

Например, для вставки HTML подойдут такие плагины, как "Woody snippets", "Header & Footer Code", "DCO Insert Analytics Code" и им подобные. А для добавления CSS подойдen плагинs "Custom CSS" или "SiteOrigin CSS".

WordPress плагин Telegram кнопки

Для тех, кто не хочет разбираться с кодом, я разработал быстрый и лёгкий WordPress плагин Sticky Contact Button. С его помощью вы сможете легко установить на свой сайт кнопку с Telegram, WhatsApp, Viber и телефоном. В настройках вы легко сможете поменять вид кнопки и выбрать разные варианты анимации.

Ссылка на плагин Sticky Contact Button