Кнопки WhatsApp, Viber, Email и WeChat в шаблоне – конструкторе AB-Inspiration

ПредыдущаяДальше1-100 из 554

depositphotos_77550630-stock-illustration-instant-messager-icons.jpgЗначки обмена мгновенными сообщениями
depositphotos_75840595-stock-illustration-vector-modern-phone-icon-in.jpgВекторный современный иконка телефона в пузырьковой речи
Набор иконок популярных социальных сетей: Pinterest, Twitter, YouTube, WhatsApp, Snapchat, Facebook, Feed, Linkedin, Yahoo и другие

Шаблоны

Векторный современный иконка телефона в пузырьковой речи
Internet Icons. Цветной контур линии. Изолированный вектор
Иллюстрация человеческой руки, держащей мобильный телефон с логотипом Viber на экране. Viber – популярное кроссплатформенное приложение для обмена мгновенными сообщениями и Voice over IP (VoIP) .
Зеленый телефон в иконке вектора пузыря речи
Набор популярных иконок в социальных сетях Pinterest, Twitter, YouTube, WhatsApp, Snapchat, Facebook, Feed, Linkedin, Yahoo и другие
Whatsapp, Whatsapp Vector Icon JPG, Whatsapp Icon JPEG, Whatsapp Icon EPS, Whatsapp Icon design.Vector illustration eps 10
Рука держит мобильный телефон. Векторная иллюстрация. Концепция чата. Окно курьера .
Круглый веб-иконки со стилем линии
Набор икон популярных социальных сетей
Векторный современный иконка телефона в пузырьковой речи

Поиск видеоviber vector

Набор икон популярных социальных сетей
Телефон в иконке речевого пузыря
Зеленый телефон в иконке вектора пузыря речи
Векторный набор иконок
Зеленый телефон в иконке вектора пузыря речи
Набор самых популярных иконок в социальных сетях
Логотип Viber app. значок вектора входящего вызова
Значок телефона
Иконка телефона в пузыре речи
Набор популярных социальных сетей и других иконок с черной ободкой: Linkedin, Blogger, Instagram, Amazon, Whatsapp, Ebay и другие

Попробуйте другие ключевые словазначок whatsapp

Классический телефон с проводом
Синий телефон в иконке речевого пузыря
Векторный современный иконка телефона в пузырьковой речи
Набор иконок
Набор икон социальных сетей
Набор иконок
Черно-белые иконки социальных медиа набор вектор логотипа иллюстратора фон
Иконка телефона в пузыре речи
Логотип Viber app. значок вектора входящего вызова
Круглый набор шаблонов логотипов социальных сетей или иконок социальных сетей. Социальная сетевая кнопка. Facebook, YouTube, Google +, Linkedin, Viber, Pinterest, Twitter, Instagram, Snapchat .

Попробуйте другие ключевые словаодноклассники иконка

Internet Icons. Цветной контур линии. Неон .
Набор популярных иконок в социальных сетях Pinterest, Twitter, YouTube, WhatsApp, Snapchat, Facebook, Feed, Linkedin, Yahoo и другие
Иконки для телефона в стиле квартиры
Иконы социальных сетей
Векторный современный иконка телефона в пузырьковой речи
Зеленый телефон в иконке вектора пузыря речи
Значок телефона в речевом пузыре на зеленом фоне. Whats app messenger icon, symbol, ui. Векторная иллюстрация
Различные круги популярных социальных сетей и других икон: Linkedin, Blogger, Instagram, Amazon, Whatsapp, Ebay и другие
Квадратный логотип социальной сети или значок социальной сети искушают набор. Социальная сетевая кнопка. Facebook, YouTube, Google +, Linkedin, Viber, Pinterest, Twitter, Instagram, Snapchat .
Набор икон популярных социальных сетей

Попробуйте другие ключевые словачат whatsapp

Иконки телефонов
Современный смартфон с окном курьера
Иконка телефона в пузыре речи
Бирюзовый телефон в иконке речевого пузыря
Иконы социальных сетей
Набор икон популярных социальных сетей
Телефон-автомат
Иконка телефона в пузыре речи
Зелёная телефонная речь Икона Пузыря. Вектерный цвет
Значок смартфона в 3D

Попробуйте другие ключевые слователеграм

Набор иконок
Набор икон популярных социальных сетей
UI Pixel Perfect Well-crafted Vector Thin Line Icons 48×48 Ready for 24×24 Grid for Web Graphics and Apps with Editable Stroke. Простая пиктограмма Мбаппе Часть 2-2
Значок вектора зеленого телефона
Сообщения в социальных сетях
Классический телефон с проводом
Зеленый телефон в иконке речевого пузыря
Набор икон социальных сетей
Набор иконок телефонии
Векторная иконка современного синего телефона

Попробуйте другие ключевые словазначок viber

Вектор иконок Whatsapp
Набор иконок
Телефон-автомат
Наши услуги Приложение, чат, телефон, Watts App Solid Glyph икона Мы
Вектор иконок Whatsapp
Иконы социальных сетей
Набор икон популярных социальных сетей
Набор икон популярных социальных сетей
Вектор иконок Whatsapp
Зеленый телефон телефон в иконке речевого пузыря с затухающей тенью, изолированные на белом фоне

Попробуйте другие ключевые словасоцсети иконки вконтакте

Значок телефона
Набор иконок
Две иконки телефона векторные иллюстрации плоский стиль .
Подключение иконки речи телефона EPS 10
Векторная иллюстрация Whatsapp на черном фоне .
Значок зеленого телефона
Чёрные логотипы социальных сетей
Набор популярных иконок в социальных сетях Pinterest, Twitter, YouTube, WhatsApp, Snapchat, Facebook, Feed, Linkedin, Yahoo и другие
Различные популярные социальные сети и другие иконы
Векторное современное трехизометрическое телефонное приложение

Попробуйте другие ключевые слователеграм чат

Классический телефон с проводом
Векторный современный иконка телефона в пузырьковой речи
Набор логотипов популярных социальных сетей
Набор икон популярных социальных сетей
ВОРОНЕЖ, РОССИЯ – 8 апреля 2020 года: Комплект круглых и квадратных плоских икон социальных сетей в стандартных и черных цветах. Facebook, Twitter, Instagram, YouTube, Skype, Telegram и другие
Векторный современный иконка телефона в пузырьковой речи
Мобильный телефон. Векторная иллюстрация. Социальная сеть. Вектор. Окно курьера. Концепция общения и обмена сообщениями. Зеленые чаты .
Кнопка Facebook miger Icon или логотип. Векторный фон
Логотипы Pixel Perfect Vector Thin Line Icons 30 и Grid для веб-графики и видео. Минимальная пиктограмма
Телефон в зеленой речи пузырь значок

Попробуйте другие ключевые словаиконка телеграмм

Векторная иллюстрация .

По многочисленным просьбам пользователей шаблона – конструктора AB-Inspiration в новой версии шаблона я добавила дополнительные кнопки для контакта: WhatsApp, Viber, Email и WeChat.

Иконки WhatsApp, Viber, Email и WeChat будут отображаться в виджете в шапке (Социальные сети), и в виджете “Следуй за мной”.

В этой статье я расскажу как их настроить.

Итак, для начала убедитесь, что у вас новая версия шаблона AB-Inspiration 7.20 или выше.

Как установить кнопки WhatsApp, Viber, Email и WeChat в виджет в шапке

1. Перейдите в раздел Внешний вид -> Виджеты

2. Если вы еще не установили виджет 0-AB-Виджет в шапке, то найдите его в списке доступных виджетов и кликните по нему мышкой

3. Выберите из списка Виджет в шапке

4. Нажмите на кнопку “Добавить виджет”

5. Откройте виджет и выберите из списка “Социальные кнопки”

6.  Спуститесь вниз виджета и заполните поля, которые вам нужны “WhatsApp, Viber, Email и WeChat”. Whatsapp и Viber заполняйте без скобок и знака плюс, в поле email просто пропишите ваш Email адрес, если вы хотите использовать китайскую социальную сеть WeChat вам необходимо сгенерировать QR код в сервисе WeChat, затем скачать изображение, загрузить его через медиафайлы на блоге, взять ссылку на изображение и вставить в виджете в поле WeChat.

7. Укажите размер иконок

8. Укажите форму иконок

9. Если необходимо укажите отступ сверху

10. Нажмите на кнопку “Сохранить”

Теперь можно посмотреть что получилось.

Справа в шапке у вас должны появиться вот такие кнопки:

Как установить кнопки WhatsApp, Viber, Email и WeChat в виджет Следуй за мной

Скорее всего этот виджет у вас уже установлен. Просто зайдите в раздел “Внешний вид” – Виджеты, откройте виджет “Следуй за мной” и заполните те поля, которые вам необходимы, WhatsApp, Viber, Email и WeChat.

Whatsapp и Viber заполняйте без скобок и знака плюс, в поле email просто пропишите ваш Email адрес, если вы хотите использовать китайскую социальную сеть WeChat вам необходимо сгенерировать QR код в сервисе WeChat, затем скачать изображение, загрузить его через медиафайлы на блоге, взять ссылку на изображение и вставить в виджете в поле WeChat.

В боковой колонке кнопки будет выглядеть  так:

При клике на кнопки WhatsApp и Viber начнется звонок, при клике на кнопку WeChat во всплывшем окне появится QR код, и при клике на кнопку Email откроется почтовая программа.

Если у вас возникнут вопросы при настройке кнопок, не стесняйтесь, спрашивайте. Буду рада помочь.

P.S. Если вы используете кнопку Viber, чтобы отобразилась иконка необходимо обновить файл стилей. Это нужно сделать 1 раз, поскольку в новой версии шаблона внесены изменения в данный файл и скорее всего ваш браузер запомнил предыдущую версию.

Если вы после настройки не видите иконку Viber сделайте следующее:

  1. Копируйте ссылку: ВАШ-ДОМЕН.RU/wp-content/themes/ab-inspiration/style.css
  2. Вставьте эту ссылку в браузер
  3. Замените ВАШ-ДОМЕН.RU на домен вашего блога
  4. Нажмите Enter. Должен открыться файл стилей.
  5. Обновите страницу.

Если у вас все еще не отображается кнопка Viber, обратитесь в техподдержку.

Кнопки WhatsApp, Viber, Email и WeChat в шаблоне – конструкторе AB-Inspiration    6голосовСредняя оценка: 5 из 5Как создать свой сайт на WordPress с закрытыми и отрытыми онлайн – курсами, с универсальным интернет – магазином, профессиональным блогом и высоко конверсионными лендингами для заработка в интернете 2021 Похожие записи:

Привет, друзья. Сегодня поговорим о том, как сделать активную ссылку на Telegram, Whatsapp и Viber, то есть на свои профили или группы в этих замечательных (и не очень) мессенджерах.

Речь идет о ссылках, подобных телефонным или для почты, когда, кликая по ним открывается ваше приложение для работы с почтой или набранный номер.

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

Зачем делать активную ссылку на мессенджер?

Мессенджеры пользуются огромной популярностью. Многие заводят каналы и паблики, так как информацию можно доносить прямо в телефон целевой аудитории, да еще и push-уведомлением, а значит пользователь обязательно увидит ваше сообщение.

Кроме того, оставляя такую ссылку на своем сайте, мы позволяем написать нам, ведь для многих звонок — это стресс, писать сообщение намного проще. Но это еще не все, ведь некоторым невыгодно звонить из региона в регион, или из страны в страну, а мессенджеры сделают звонок бесплатным.

В чем сложность?

Проблемы начинаются в тот момент, когда нужно поддерживать и мобильную версию и десктопную, то есть в 99% случаев. Дело в том, что приложение для телефонов и приложение для компьютера работают с разными ссылками и получается, что если указать ссылку для смартфона, то приложение для ПК сработает некорректно или совсем не сработает. Это касается мессенджера Viber, при этом WhatsApp и Telegram не испытывают подобных проблем.

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

Давайте разбираться как должен выглядеть атрибут «href» у ссылок на тот или иной мессенджер.

Как поставить ссылку на свои профиль в Telegram?

Как я уже говорил с этим замечательным мессенджером нет никаких проблем в плане проставления ссылки. Главное правильно прописать значение в атрибуте href. Для этого достаточно воспользоваться шаблоном:

Написать в Телеграм

Как поставить ссылку на свой профиль в WhatsApp?

С проставление ссылки на свой профиль в мессенджере WhatsApp, тоже никаких проблем нет. Кроме того, есть возможность даже добавить текст по умолчанию, который уже будет набран и пользователю останется его только отправить.

Ссылка должна выглядеть следующим образом:

Написать в WhatsApp

Где:

  • “380950000000” – ваш номер телефона,
  • “?text=” – параметр содержащий текст по умолчанию,
  • “%20” – символ пробела в сообщении.

Тут, как видите, тоже все достаточно просто.

Как поставить ссылку на свой профиль в Viber?

Чтобы поставить правильную ссылку на Viber, придется воспользоваться PHP для определения устройства. Если у вас страница сохранена в расширении html, то придется пересохранить в .php. Это никак не повлияет на работоспособность страницы.

Итак, выше я писал, что десктопное и мобильное приложение Viber открывается по разным ссылкам, что создает определенные сложности при добавлении такой ссылки на сайт. Для мобильных устройств используется такой подход формирования ссылки:

Написать в Viber

Для ПК – такой:

Написать в Viber

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

  function check_mobile_device() {      $mobile_agent_array = array('ipad', 'iphone', 'android', 'pocket', 'palm', 'windows ce', 'windowsce', 'cellphone', 'opera mobi', 'ipod', 'small', 'sharp', 'sonyericsson', 'symbian', 'opera mini', 'nokia', 'htc_', 'samsung', 'motorola', 'smartphone', 'blackberry', 'playstation portable', 'tablet browser');     $agent = strtolower($_SERVER['HTTP_USER_AGENT']);         foreach ($mobile_agent_array as $value) {             if (strpos($agent, $value) !== false) return true;        };          return false;  }; 

Расположить функцию, можно, например в самом начале страницы, перед ‘doctype’ или вынести в отдельный файл и там же подключить его.

После этого, в месте где будет выводиться ссылка на Viber используйте такую проверку:

 <? if(check_mobile_device()) :   Viber        <? else :    Viber <? endif;  

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

Конечно же есть и более надежные способы для определения устройства. Если вам по какой-то причине не хватило устройств в функции, которую привел я, то можете воспользоваться PHP-классом Mobile-Detect, который специально создан для этих целей (определять устройство).

Пользоваться им достаточно просто:

  • Подключаем файл с Классом.
  • Создаем новый экземпляр класса.
  • Делаем проверку.

Звучит страшнее, чем есть на самом деле.

 require_once 'functions/Mobile_Detect.php'; $detect = new Mobile_Detect;   if ( $detect->isMobile() ) {      // Здесь пишем код или разметку для мобильного } else {     // Здесь код или разметку для Десктопа } 

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

Пример работы

Используемые источники:

  • https://ru.depositphotos.com/vector-images/viber-vector.html
  • https://anfisabreus.ru/2017/12/knopki-whatsapp-viber-email-i-wechat-v-shablone-ab-inspiration/
  • https://smartlanding.biz/ssylka-na-whatsapp-telegram-viber.html

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий