Перейти к содержимому
BIS Arts
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
Whatsapp Telegram-plane
+7(900)247-59-69
Главная / Уроки / Сайтостроение / Telegram кнопка для сайта с анимацией

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

  • 20 февраля, 2021
  • 14 комментов
Содержание

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

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

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

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

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

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

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

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

кнопка 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.

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

установка кнопки Telegram на wordpress

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

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

Ссылка на плагин Multibutton Fixed

14 ответов

  1. Александр:
    24.05.2022 в 14:03

    А как сделать такую же анимационную кнопку для ВК ? как на телеграмм или ватсап

    Ответить
    1. Администратор:
      27.05.2022 в 14:50

      Аналогично. Берёте этот код, меняете цвет, иконку на "fa fa-vk" и ставите ссылку на ВК.

      Ответить
  2. бокс харьков:
    11.06.2022 в 16:05

    А не существует виджета, чтобы сгенерировать онлайн?

    Ответить
    1. Администратор:
      02.07.2022 в 16:43

      Есть плагин Sticky Contact Button

      Ответить
  3. Андрей:
    02.07.2022 в 13:26

    Спасибо за информацию. Можно ли вмсете fa fa телеграмм сделать фотографию?

    Ответить
    1. Администратор:
      02.07.2022 в 16:41

      Под картинку код переписывать надо

      Ответить
  4. Алексей Валерьевич:
    24.09.2022 в 19:08

    Установил. Всё прекрасно работает. Спасибо за кнопку.

    Ответить
  5. Станислав Михайлов:
    27.01.2023 в 11:58

    Как вы такую классную кнопку связаться с вами сделали?

    Ответить
    1. Администратор:
      27.01.2023 в 16:46

      html и css код + popup скрипт или плагин

      Ответить
  6. Стас:
    29.01.2023 в 16:59

    спасибо,только очень маленькая получается,как-то можно увеличить?

    Ответить
    1. Администратор:
      29.01.2023 в 17:08

      Конечно можно. Меняйте параметры в CSS коде, которые подписаны: высота, ширина, размер иконки и тп.

      Ответить
      1. Виктор:
        09.02.2023 в 18:16

        А как разместить там эмблему что это телеграм!? Просто у меня пустой анимированный круг

        Ответить
        1. Администратор:
          10.02.2023 в 13:52

          Если иконка не отображается, то, скорее всего, у вас не подключен Font Awesome. Если не знаете, как это сделать, то установите одноименный плагин. Также вместо этой иконки можно использовать SVG изображение, но тогда надо будет немного переписать код.

          Ответить
          1. Тестовий:
            09.11.2023 в 14:57

            подскажите как именно переделать под svg изображение

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

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

Категории
Сайтостроение
Сайтостроение
WordPress
WordPress
WooCommerce
Elementor
elementor
Дизайн
Монетизация
Монетизация
реклама
BIS Arts

Услуги по созданию и обслуживанию сайтов

  • Услуги
  • Портфолио
  • Отзывы
+7 (900) 247-59-69
пн-пт с 10:00 до 19:00
Whatsapp Telegram Envelope
Copyright © 2013 — 2025 BIS Arts
Политика конфиденциальности
  • Услуги
    • Создание сайта под ключ
    • Одностраничный лендинг-сайт
    • Многостраничный сайт
    • Интернет-магазин
    • Обслуживание и доработки сайта
    • Разработка логотипа
  • Уроки
  • Портфолио
  • Отзывы
  • Контакты
  • +7 (900) 247-59-69
  • Написать в Whatsapp
  • Написать в Telegram
Свяжитесь с нами
  • Позвонить
  • Написать в WhatsApp
  • Написать в Telegram
  • Написать письмо
Позвонить
Написать в WhatsApp
Написать в Telegram
Написать письмо