код для сайта телеграмм
Как сделать кнопку в мессенджере Телеграм
Telegram — известный мессенджер с широким функционалом. Многие им пользуются для общения с друзьями, обмена фото-, видеоматериалами, постами и различным контентом. Площадка также позволяет создавать каналы и приглашать туда пользователей. Так образуется сообщество по интересам. Некоторые пользуются этим для продвижения товаров или услуг. Вероятно, вы замечали, что в некоторых каналах к посту прикреплены кнопки со ссылками или смайлики, на которые можно нажать и выразить свое мнение. В стандартном инструментарии такой функции нет, и многим интересно, как создать подобные клавиши. А делаются они при помощи специального бота, о чем и пойдет речь в статье.
Создание кнопки
Чтобы добавить кнопку в Телеграм на канале, необходимо подключить двух Telegram Bot (ботов). Один используется для создания постов, добавления канала и отслеживания статистики. Он называется @ControllerBot. Второй бот, @BotFather — чисто для постинга. С их же помощью создаются кнопки-реакции, и занимает это от силы 5 минут.
Добавление бота на канал
Вы узнали, как создать бота для канала, остается его правильно настроить.
Настройка бота
Тут тоже ничего сложного:
На этом настройка завершена. Переходим к самому интересному — как сделать кнопку к посту в Телеграмме. Для этого научимся пользоваться ботом, который служит инструментом.
Инструкция по использованию
Опять же, все просто:
Не стоит забывать и о других функциях, например, «Таймер удаления». Этот инструмент позволяет создать временный пост, который будет удален по истечении конкретного времени.
Чтобы выложить подготовленный пост на канал, жмите «Опубликовать». Если желаете настроить время публикации, кликните «Отложить».
Делаем кнопку «Поделиться»
Конечно, она есть по умолчанию (в виде стрелочки), но такая незаметная, что многие пользователи вообще не обращают на нее внимания. Есть вариант создать отдельную кнопку к посту.
Для начала создайте ссылку:
Заключение
Как видно, кнопки-реакции и гиперссылки в Телеграмме создаются не так сложно, как это кажется на первый взгляд. Просто не все знают, что для этого используются боты. А работать с ними просто, тем более есть встроенные подсказки. Все действия по созданию кнопок можно делать с мобильного клиента и с компьютера.
Видео по теме
Чат-помощник на сайт с помощью Telegram за 15 минут
Про чаты-помощники
Многие люди продают через интернет товары и услуги. Еще больше людей — покупает что-то через интернет.
Во время выбора покупок, часто возникают вопросы, которые можно решить позвонив и пообщавшись с менеджером.
Скорее всего я — не единственный человек на хабре, который общению с менеджерами по телефону предпочитает переписку.
И тут на помощь приходят всплывающие чаты-помощники, которые вроде-как повышают конверсию, но многих нервируют.
(Для тех, кто не в курсе: в углу сайта всплывает окошко, в котором можно он-лайн переписываться с консультантом).
Есть с десяток подобных сервисов и все они работают по принципу «пробная версия бесплатно, а дальше за деньги«.
На хабре есть несколько статей, вот одна из них (http://habrahabr.ru/company/tuthost/blog/165365/), но, я уверен, аудитория Хабрахабра знает о чем речь.
Большинству людей подойдет бесплатный вариант любого такого сервиса: нужно всего-навсего зарегистрироваться и вставить на сайт кусок JS кода. Для тех у кого много менеджеров — придется платить: например Редхелпер на 10 операторов обойдется Вам:
Скорее всего — цена адекватная для тех, кто платит зарплату десяти менеджерам.
Но я решил изобрести бесплатный «велосипед» из подручных материалов.
Запуск у себя на сервере займет 15 минут. Всем, кому идея интересна — прошу под кат.
Telegram BOT
Набирающий популярность за границей мессенджер Telegram недавно представил новое API для разработки ботов. Штука — интересная, ей можно найти множество применений. Теперь можно создать бота (написать программу), который будет отвечать на Ваши вопросы, выполнять определнные команды и все это в окне переписки мессенджера Telegram.
Именно на основе мессенджера Telegram и его API для ботов будет работать наш бесплатный, безлимитный чат-помощник-на-сайт.
Общая схема идеи — на картинке:
Реализация
Внимание! Вы запускаете этот код на свой страх и риск! Я потратил на него несколько часов и возможно там полно ошибок!
План действий такой:
1) Регистрируем нового бота в Telegram.
Для этого нужен только смартфон и 2 минуты.
Заходим в Telegram, добавляем пользователя @BotFather и шлем ему команду «/newbot»
Далее по инструкции: придумываем имя, юзернейм, пишем about и загружаем фотку.
Результатом всего должен получиться API Key с помощью которого мы будем работать с BotAPI.
У меня получилось вот так:
(Сообщение в котором фигурирует мой API Key я удалил)
2) Полученный ключ вставляем в TelegramBotConfig.php.
Там же указываем любой придуманный Вами пароль для регистрации новых менеджеров.
3) Заливаем все на свой сервер
4) Запускаем нашего бота — фоновый процесс getUpdates.php
Он должен работать бесконечно, поэтому рекомендую поставить его в автозагрузку сервера.
Для надежности можно поставить запуск скрипта в crontab каждую минуту.
Скрипт будет запускаться в единичном экземпляре, все повторные запуски сразу же завершатся.
5) Регистрируем нового менеджера
Со смартфона менеджера заходим в телеграм и добавляем нашего нового бота (того, которого Вы только что создали)
Пишем ему команду: «/newmanager пароль_для_менеджеров». В ответ получаем приветствие.
Операцию повторяем нужное количество раз, для каждого менеджера.
Если на данном этапе Вы не получили ответ от Бота — значит что-то не работает!
6) Проверяем
Переходим на страницу index.html (то есть заходим на адрес mysite.ru/index.php, а не открываем локально).
Там находится небольшой, на скорую руку сверстанный чат.
Если отправить сообщение в этот чат, бот выберет случайного менеджера и перешлет ему это сообщение.
Вот здесь интересный момент:
Клиентов (покупателей) может быть много, а менеджер — один.
Менеджер общается с клиентами посредством Telegram-бота.
Если одновременно два (или больше) клиентов написали сообщение, а менеджер отвечает им по очереди, Telegram-боту нужно как-то указать, какому из клиентов отправить ответ.
Для этого я сделал команду «/answer_№ЧАТА». После отправки этой команды все письма менеджера уходят в нужный веб-чат.
Минусы, плюсы, что можно доделать
Спасибо за внимание.
UPDATE 23.08.2015 —Полностью переписал бота, теперь работает более стабильнее, теперь можно выбирать между sqlite и mysql
В планах:
— админ-панель со статистикой
— работа через webhook
Виджет Телеграм-канала: как сделать и поставить на сайт
Посетителей сайта нужно удерживать и возвращать на сайт снова и снова. Также их можно дополнительно монетизировать. Раньше для этой задачи использовали емейл-рассылки, но есть не менее эффективный инструмент — Телеграм-канал. Привлечь посетителей сайта в Телеграм канал можно через виджет.
В статье расскажем, как создать виджет для Телеграм и добавить его на сайт.
Рекомендуем: Click.ru – маркетплейс рекламных платформ:
Какие бывают виджеты для Телеграм
Виджеты для Телеграм делятся на 3 группы:
Как создать Телеграм виджет и добавить на сайт
Есть 2 основных способа создать и добавить виджет на сайт:
Через HTML-код
Писать код с нуля нет необходимости — можно воспользоваться готовыми сервисами. Они позволяют настроить внешний вид виджета и дают готовый код, который нужно вставить на страницу сайта.
Сервисы, в которых можно создать Телеграм виджет:
Также есть конструктор виджетов от самого Телеграма. В нем доступно 4 типа виджетов: кнопка «Поделиться в Телеграм», виджет поста (с возможностью перейти на канал), виджет, позволяющий авторизоваться через Телеграм и виджет для комментариев.
Создаем виджет подписки на канал на примере сервиса T.website:
Понадобится всего пара действий. Заходим на сайт T.website и вставляем в поле ссылку на канал либо его логин @channelname. Сервис выдаст код на виджет канала с линейкой постов и кнопкой подписки. Через изменения в коде можно изменить внешний вид виджета под фирменный стиль, но для этого нужно разбираться в HTML и CSS.
Создаем виджет поста (с кнопкой подписки) через конструктор Телеграма:
Заходим на страницу core.telegram.org/widgets. Выбираем тип виджета (один из четырех). В нашем случае это виджет поста, второй по счету. Кликаем на него.
Здесь есть инструкции, как получить код.
Важно: пост должен быть в публичном канале или группе.
Чтобы просто получить код поста без внешних изменений, нужно найти нужное сообщение в Телеграм, нажать правой кнопкой мыши и скопировать ссылку на сообщение.
Полученную ссылку открываем в браузере и нажимаем на кнопку EMBED.
Получаем код виджета. Копируем и вставляем на страницу сайта.
Если хотим кастомизировать виджет, например, изменить его размер и цвет, то нужно вставить ссылку на сообщение на сайте core.telegram.org/widgets (там, где выбирали тип виджета). Вносим изменения и получаем обновленный код.
Как вставить готовый HTML-код на сайт
Зависит от того, на чем сделан сайт. Если на чистом HTML, то в коде страницы нужно найти место, где будет размещен виджет и вставить туда код виджета. Если сайт на движке или на конструкторе, то обычно там предусмотрены виджеты, которые называются HTML-код. Нужно добавить виджет на страницу и в его настройках уже прописать полученный код.
Вот, например, как это выглядит на конструкторе Тильда — нужно добавить новый блок на страницу. Категория «Другое» — блок «HTML-код». В него вставляем код виджета. Блок доступен только на платных тарифах. У Wix есть аналогичный инструмент.
С помощью плагинов
Если сайт на движке, например, на Вордпрессе — можно подключить и настроить плагин. Хотя и на движок можно добавить виджет через код. Но так как плагины существуют, опишем и этот способ.
*В большинство тем для Вордпресс уже встроены виджеты с кнопками соцсетей и мессенджеров. Они выглядят, как иконки с ссылками на соцсети, мессенджеры, YouTube-канал. Но если стоит задача визуально выделить именно Телеграм канал, то нужен отдельный виджет.
Плагины с виджетом Телеграм для Вордпресса:
*Кстати, для Вордпресса также созданы плагины автопостинга с сайта в Телеграм канал: WP Telegram, Telegram Bot & Channel и другие. Хотя для автопостинга можно использовать онлайн сервисы — список найдете на нашем сайте.
Виджеты работают по аналогии — сначала нужно скачать и активировать плагин, затем в настройках указать ссылку на канал и кастомизировать его внешний вид.
Лайфхак: если стоит задача просто перенаправлять трафик с сайта в Телеграм канал, можно создать на странице сайта кнопку в цветах Телеграм с надписью-приглашением подписаться на канал, чтобы получать рассылки с новым материалом. Кнопку желательно сделать с иконкой Телеграма. Дальше просто привязываем к этой кнопке ссылку на Телеграм канал и получаем новых подписчиков.
Заключение
В зависимости от типа виджета выбирайте удобный для себя способ его создания и добавления на сайт. Если есть возможность добавить виджет через код — лучше выбрать этот вариант вместо тех же плагинов. Большое количество плагинов могут перегружать сайт. Тем более, получить код для Телеграм виджета и поставить его на сайт проще простого.
Вывод Telegram-канала на свой вебсайт
Забьем еще один гвоздь в крышку гроба Роскомнадзора.
Напрямую получить доступ сообщениям своего канала для вывода их в веб страницу нельзя. Но можно написать bot, который будет поступающие к нему сообщения отправлять куда нужно, чтобы их обработать и вывести на сайт. А можно воспользоваться готовым.
Странно, что на Хабре еще не упоминался этот замечательный бот — Journalist (@JournalistBot). На сайте указано, что beta, но работает более чем стабильно.
После несложной установки бота и настройки в нем своего нового journalist канала, получаете от него код виджета, который нужно поместить на свой сайт в какой-нибудь div или что-то типа этого, который выведет адаптивную вертикальную ленту ваших сообщений:
Где 353945930 — id вашего канала в JournalistBot-е. Число 10 в «widget-10» — количество последних отображаемых сообщений. Его можно менять.
Новые сообщения для вашего канала добавляются в JournalistBot или напрямую, или переадресацией в него из других каналов. Иногда (единственный замеченный баг) сообщение, в котором присутствует и картинка и текст, доходит не полностью — или картинка, или текст. В остальном всё вполне на уровне. Каналов можно сделать несколько.
Основные прелести виджета:
Например, у меня реализован вот такой кэширующий на 5 минут данные прокси, который отдельным скриптом /misc/image.php уменьшает размеры всех картинок.
В вышеуказанном script src необходимо поменять ссылку на наш прокси. Новые сообщения приходят клиенту, естественно, напрямую, минуя прокси.
Еще из рекомендуемой доводки напильником: скроллбар (стандартный или JQuery плагином) для блоков с ограниченной высотой, подцепка к картинкам lightbox-а (или на стороне сервера добавлением class-a, или на стороне клиента javascript-ом), свертывание блока с сообщениями по клику (чтобы не мешал).
В целом Journalist — очень приятное и стабильное приложение, позволяющее оперативно и удобно добавлять на свой сайт информацию с компьютера или телефона — вести трансляции, например. Как отдельный telegram-канал канал в journalist не работает, поэтому при такой необходимости приходится дублировать сообщения.
Telegram кнопка для сайта с анимацией
В этом уроке мы научимся вставлять кнопу Telegram на сайт, которая перекидывает на чат. При этом мы добавим ей красивую анимацию для привлечения большего внимания. Мы покажем, как установить Telegram кнопку на сайт WordPress, но данный способ подходит и для любых других сайтов.
Ссылка для перехода в Telegram
Так выглядит простая ссылка на чат в Telegram с сайта.
HTML код для вставки следующий:
Где вместо your_name нужно вставить имя вашей учётной записи. Посмотреть его можно зайдя в Настройки/Имя пользователя.
Данный код является обычной ссылкой, при клике на которую, в новом окне откроется чат. А если добавить к этому коду соответствующие стили, то можно сделать простую или фиксированную кнопку, например в нижнем углу экрана.
Кнопка Telegram в углу экрана с анимацией
Для создания нашей кнопки, нам потребуется иконка Font Awesome. Для этого ваш шаблон сайта должен быть подключен к библиотеке шрифтов Font Awesome. Если иконка отображаться не будет, то необходимо будет данную библиотеку подключить. Это можно сделать вручную, либо воспользоваться плагином Font Awesome из репозитория WordPress.
HTML код:
CSS код:
CSS для мобильной версии сайта:
Если вам необходимо поменять местоположение кнопки на мобильных устройствах, то добавьте к стилям CSS следующий код.