Вывод соц. кнопок на мобильных телефонах


Содержание материала:

Как сделать кликабельный телефон на сайте

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

Современные мобильные браузеры могут автоматически делать номер телефона на сайте кликабельным, но это работает не всегда (из-за разных написаний номера телефона).

Наверное, многие из вас сталкивались с такой ситуацией, когда, заказывая какой-либо товар в интернет-магазине, приходилось уточнять некоторые вопросы по телефону. И для этого приходилось записывать номер телефона магазина на листочек / телефон друга, потом снова набирать в свой телефон, и только после этих манипуляций удавалось позвонить. А если телефон поддержки вдруг оказывался недоступен, приходилось всё это проделывать заново.

Именно для того, чтобы решить эту проблему, был разработан способ, который отвечает на вопрос «Как правильно указывать номер телефона на сайте». Давайте разберемся, как разместить телефон на сайте и сделать его кликабельным.

Сделать номер телефона кликабельным можно с помощью обыкновенной ссылки, но со специальным адресом:

То есть в атрибуте href должно быть указано: tel: и номер телефона в формате, который вам нужен.

Выглядеть это будет так:

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

Кроме кликабельного номера телефона, есть возможность добавить кликабельную ссылку на ваш Skype:

Или можно добавить ссылку для звонка со Skype на телефон:

11 вещей, на которые способен ваш смартфон (о которых вы точно не знали)

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

Но есть некоторые важные функции смартфона, о которых вы точно не знали.

А ведь ваш смартфон это настоящий кладезь интересных функций и различных полезных опций.

Скрытые функции смартфона

1. Черные обои уменьшают расход батареи

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

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

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

Практика показала увеличение времени функционирования телефона примерно на 20-30 процентов, если экран постоянно включен.

Данная функция действует на так называемых OLED-дисплеях, которыми оснащены многие модели Samsung.

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

2. Дистанционное управление с помощью смартфона

Просто зайдите в Настройки -> Безопасность -> Администраторы устройств и установите флажки рядом с опцией Диспетчер устройств Android.

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

3. Управлять телефоном движением головы

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

Что же делать в подобных случаях? Решение есть!

Нужно просто установить на свой смартфон бесплатное приложение EVA Facial Mouse, который подходит для любого Android-устройства.

С помощью этого нехитрого приложения, вы сможете управлять мобильным телефоном, используя простые движения головы.

4. Секретная видеосъемка

Иногда может возникнуть ситуация, когда требуется провести видеосъемку, но так, чтобы об этом никто не знал.

Для этого можно воспользоваться iPhone. Итак, следуйте следующей инструкции: нужно заблокировать экран, затем включить камеру простым нажатием кнопки и касанием пальцев поднять шторку вверх.

Активируйте режим видео, начните запись. Важно удерживать дисплей в наполовину заблокированном виде, после чего 3 раза кликнуть по кнопке Home.

Необходимо подождать, пока экран полностью погаснет. Вот и всё, видеосъемка уже началась.

5. Badoo (Люди рядом)

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

Например, вы видите в кафе или просто на улице привлекательную девушку или симпатичного парня. Однако, подойти решится не всякий.

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

Именно для таких ситуаций существует приложение Badoo. Оно обнаруживает людей, которые находятся в непосредственной от вас близости.

Наглядный пример того, как работает приложение: ставим ограничение «Девушки от 20 до 25 лет» и смотрим, что нам выдает поисковая система. Затем смотрим фото и выбираем ту, которая ту, которая привлекла наше внимание.

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

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

Стоит отметить, что это бесплатное приложение, которое поддерживается всеми платформами. Вы можете скачать его, как на Андроид, так и на iOS и даже Windows Phone.

6. Доступ к закрытым уведомлениям

Многие из нас сталкивают с тем, что регулярно получают множество различных уведомлений. Так происходит, потому что на наших смартфонах установлено огромное количество приложений.

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

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

В таких случаях вам поможет приложение Past Notifications. С его помощью можно без проблем просматривать закрытые уведомления.

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

Так вы будете меньше отвлекаться на уведомления, которые являются абсолютно бесполезными.

7. Функция Text-to-Speech

Вы можете не только прочитать какую-то статью, но и прослушать ее, если вы являетесь обладателем Android-устройства.

Итак, если вы не хотите напрягать зрение и предпочитаете слушать входящую информацию, а не видеть ее, перейдите в Настройки -> Доступность и просто включите опцию Text-to-Speech.

8. Активация гостевого режима

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

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

Что может ваш смартфон

9. Экранный увеличитель

Настоящей палочкой-выручалочкой для людей с плохим зрением станет экранный увеличитель.

Многие даже и не догадываются, насколько эта функция может быть полезной. Просто зайдите в Настройки -> Доступность -> Жесты увеличения. И всё, вы сможете увеличить любую часть дисплея, просто нажав на этот экранный увеличитель.

10. Режим «горячих точек»

Вам больше не нужно покупать отдельный 3G-модем или маршрутизатор для использования Интернета на разных устройствах, потому что ваш смартфон легко справиться с поставленной задачей.

Перейдите в Настройки -> Модем и переносимая точка доступа, активизируйте точку доступа Portable WLAN. Все готово!

11. Секретная игра

Начиная с версии Android 2.3 Gingerbread, Google придумал небольшой сюрприз для своих пользователей. Однако обнаружить этот милый секрет не так уж и просто.

Вот пошаговая инструкции о том, как это сделать:

Сначала перейдите в раздел «Настройки» и выберите раздел «О телефоне» или «О планшете» (этот сюрприз есть, как на смартфоне, так и на планшете). Быстро коснитесь Android –версии несколько раз, и когда на экране появится маленький зефир, быстро нажмите еще раз, на экране должна открыться специальная мини-игра, эдакий маленький приятный подарок пользователям.

Повышаем юзабилити: звонок в компанию по клику с сайта

В статье:

Юзабилити — это удобство использования сайта. Если пользователю будет непонятен интерфейс, он может уйти с ресурса, даже если был готов заказать товар у вас. Нужно упрощать действия для клиента, чтобы он решил свою задачу в максимально короткий срок за минимальное количество кликов. В этой статье расскажем, как добавить одну деталь на сайт и сделать звонки в компанию удобнее.

Как обычно оформляют телефон

На сайтах компаний, где подразумеваются входящие звонки от клиентов, телефон обычно находится в шапке сайта и представлен в таком виде:

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

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

Если посмотреть карту сайта, то на области телефона скорее всего будут клики. На сайте PR-CY не предусмотрен телефон, поэтому приведем пример из выдачи Яндекса:

Есть клики в области телефона

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

Посмотреть, как часто на вашем сайте кликают на телефон, можно на специальной карте.


Как посмотреть карту кликов сайта

Яндекс.Метрика

Самый простой способ — войти в Яндекс.Метрику в раздел Карта кликов, там вы увидите страницу сайта с отметками кликов пользователей.

Есть несколько режимов просмотра:

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

Тепловая карта кликов в Яндекс.Метрике

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

Crazy Egg

Карта показывает клики или скроллинг. Главное преимущество — инструмент Confetti, который позволяет фильтровать клики по посетителям, пришедшим из разных источников. К примеру, можно отдельно посмотреть куда кликают люди, перешедшие на сайт из соцсетей.

Сервис платный с бесплатным периодом в 30 дней.

Mouseflow

Сервис показывает скроллинг и клики, выводит статистику по страницам. Карта похожа на тепловую карту из Яндекс.Метрики.

Карта кликов в Mouseflow

Карты кликов можно смотреть бесплатно.

Hotjar

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

Карта кликов в сервисе

Сервис обрабатывает до 2000 просмотров сайта пользователями и сохраняет их три месяца. Можно пользоваться бесплатно 15 дней.

Inspectlet

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

Карта движения мыши

В бесплатной версии можно отслеживать до 1000 просмотров в месяц, они месяц будут храниться в сервисе.

Есть и другие сервисы для отслеживания, можно подобрать себе самый удобный в использовании и приемлемый по цене.

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

Что сделать с номером телефона

Для мобильной версии

В мобильной версии на номер телефона можно поставить ссылку, которая сразу экспортирует номер в журнал вызовов, пользователю останется только нажать вызов на смартфоне.

Вместо «Call me» используйте любую другую фразу.

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

Кликабельный номер телефона на смартфоне

По клику на номер на смартфоне открываются вызовы

Для десктопа

В десктопной версии не получится звонить по клику, поэтому на номер телефона можно поставить форму «Заказать звонок». Тогда по щелчку на номер выйдет форма, предлагающая клиенту оставить свои контакты, чтобы менеджер сам с ним связался.

Пример окна по клику на номер телефона

Такая форма будет полезна тем клиентам, которые не хотят звонить сами, а ждут входящего звонка из компании.

Топ-пост этого месяца:  Транзакции в MySQL

Форма «Заказать звонок» может находиться на сайте и в формате виджета. Обычно он находится на экране справа внизу.

Виджет «Заказать звонок» на странице

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

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

Как поставить форму «Заказать звонок»

Есть несколько способов, они различаются по цене, функциональности и дизайну.

1. Использовать сторонний сервис

Существует много callback-сервисов, самые популярные — Callback Killer, Callback Hunter, Zadarma, UpToCall или RedConnect. Они работают по такой схеме: номер отправляется на сервер, звонок поступает менеджеру, которому сообщается информация о звонке, одновременно с этим программа набирает номер клиента и переводит его на менеджера.

В сервисах можно настроить внешний вид кнопок и полей ввода под свой сайт.

Окно настройки всплывающей формы

Сервисы требуют абонентскую оплату и отдельно оплату звонков по тарифам.

Мы можем подготовить обзорный материал по сервисам, напишите в комментарии, если вам это интересно.

2. Установить плагины от CMS

В каталогах плагинов для CMS можно найти нужные решения для заказа звонков.

Если ваш сайт на WordPress, в магазине плагинов есть LiveCall, CallPage, Callmaker и другие для установки виджета и формы «Заказать звонок». Плагин Excitel позволяет клиенту звонить в компанию напрямую из браузера.

Для сайта на 1С-Битрикс можно найти нужные плагины в маркетплейсе. Для обратных звонков подойдут Call Me, Заказ обратного звонка, Telephone и другие

Для Joomla! также можно найти готовый плагин, к примеру, Ajax Contact, Simplecallback.

В магазине модулей для Opencart есть модули обратного звонка: Callback Full, Менеджер звонков и другие.

3. Написать плагин самостоятельно

Вы можете самостоятельно написать скрипт обратного звонка или воспользоваться тем, что предлагают скачать бесплатно. К примеру, мы нашли SmartLid — это jQuery-плагин, выглядит как значок, который открывает заказ звонка или письменное обращение.

Выбор звонка или сообщения

Для установки нужно скачать исходник и распаковать его в корень сайта, после этого подключить и инициализировать скрипт. Лучше сделать это перед закрывающим тегом body:

После этого форма с виджетом должна работать.

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

Напишите в комментарии, если вам был бы интересен обзорный материал о разных callback-сервисах.

10 способов адаптации вашего сайта под мобильные устройства

Ваш веб-сайт уже оптимизирован под мобильные устройства? Если еще нет — это не конец света. Современные браузеры содержат такие нововведения, как пинч-зум и автоматическая регулировка размера шрифта.

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

1. Установите правильные атрибуты полей форм

Если вы используете на сайте поля ввода для имени пользователя или адреса, выключайте autocorrect и включайте autocapitalize :

Если не сделать так, то система автоматизированного ввода Т9 будет заменять имена, к примеру, “ Erwan ”, на что-то вроде “ Erevan ”.

Установка автоматического использования первых заглавных букв в типах words освободит пользователей от необходимости каждый раз включать капитализацию букв – то есть каждое слово будет начинаться с большой буквы (к примеру “ Ken burns ” станет “ Ken Burns ”):

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

И не уходя далеко от темы. Если ваш сайт запрашивает email у пользователя — используйте поле email , чтобы посетителю не приходилось вводить символ @ с клавиатуры мобильного устройства:

2. Задайте подходящую для мобильных устройств ширину

Откройте ваш сайт в браузере вашего компьютера и уменьшайте ширину окна программы до тех пор, пока не сможете что-либо прочитать в нем.

Это и будет минимально допустимой шириной. Берите текущее значение ширины и устанавливайте его в свойство @viewport путем установки тега meta в заголовок страницы head :

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

Эта картинка демонстрирует лишнее место справа:

А эта картинка показывает правильно установленное значение ширины.

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

3. Установите ширину картинок в 100%

Теперь, когда ваш сайт имеет определенную ширину, некоторые изображения станут очень широкими. Этого не случалось ранее, потому как разрешения десктопных мониторов довольно широки и большинство картинок помещаются по ширине:

Чтобы этого избежать, установите значение максимальной ширины ваших изображений в 100%. Таким образом, изображения будут автоматически менять размер в случаях, когда они окажутся слишком велики для экрана мобильного устройства. Добавьте код, приведенный ниже, в CSS -стили вашего сайта:

Если вы используете изображения в качестве фона не с помощью тега img , просто установите CSS свойство background-size в значение contain . Это заставит фоновую картинку менять размер, когда разрешения экрана будет недостаточно для её отображения в масштабе 100%:

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


Когда посетитель пользуется увеличением, браузер при этом пользуется увеличением четкости картинки. Однако удостоверьтесь, что ваш сайт не имеет свойства user-scalable=no в теге meta . Если это не так — пользователь не сможет пользоваться зумом:

4. Установите ширину полей ввода в 100%

После того, как ширина изображений установлена через свойство max-width , сделайте похожий трюк с полями input . Просто добавьте в файл CSS – файл вашего сайта:

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

5. Будьте бдительны когда используете Disable для кнопок подтверждения отправки форм

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

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

Во время входящего звонка браузер мобильного устройства закроется. И далее ситуация с заблокированной кнопкой подтверждения повторится. Пользователь не сможет отправить уже заполненную форму.

И если вы все-таки решили деактивировать кнопку submit — делайте это на несколько секунд.

6. В длинных строках используйте word-wrap

Иногда бывает необходимо отобразить длинные строки, такие как примеры кода, ссылки, номера банковских счетов. Если ваш сайт окажется узким для того, чтобы целиком показать строку, она может « уехать » за пределы экрана мобильного устройства:

Избегайте этой ситуации с помощью свойства word-wrap . Так будет выполнен перенос, когда строка достигнет края экрана. Пользователь увидит все необходимое без использования прокрутки:

7. Будьте осторожны, используя пробелы

Обычной практикой при отображении длинных строк является использование пробелов через каждые пять знаков. Так пользователю будет удобнее запоминать их для ввода в другое приложение.

Однако умный пользователь не будет делать этого вручную. Он воспользуется буфером обмена. Однако в случае с пробелами ему придется их удалить. Насколько удобно и быстро удалять пробелы на мобильном устройстве?

Дабы избежать подобных ситуаций, вместо пробелов между группами символов используйте отступы:

Как видите, « пробелы » между символами остаются, но с тем отличием, что при копировании-вставке нет нужды что-то удалять. Как минимум, это удобно и экономит время!

8. Преимущества медиа-запросов

Вы можете создать пользовательские стили, которые будут работать только при просмотре сайта с мобильных устройств (или же отображаться в маленьком окне браузера), а на настольном компьютере сработает обычный вариант веб-страницы. Используйте для этого целевые стили внутри медиа-запросов как в примере ниже:

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

9. Избегайте fixed позиционирования

Если заголовок или сайдбар вашего сайта позиционирован фиксировано, CSS свойство position установлено в значение fixed . Будьте внимательны.

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

Самое простое решение — не использовать фиксированные позиции элементов для отображения на мобильных устройствах.

Пример ниже, использующий метод медиа-запросов, покажет, как воплотить это в жизнь:

10. Используйте стандартные шрифты

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

Как правило, объем подобных файлов достаточно велик. На мобильном устройстве этот процесс может занять большое количество времени. В это время на экране мы видим незаполненное пространство вместо текста:

В случае использования Google Font Loader для загрузки шрифтов вы сможете отобразить текст с помощью стандартного шрифта, пока грузится пользовательский. Затем вы генерируете страницу заново, и отображается нужный вам шрифт.

Для этого нужно написать два варианта CSS -правил. Один вариант для использования шрифта по умолчанию, а другой — для применения скачанного шрифта.

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

Обратите внимание, что селектор класса .wf-opensans-n4-active добавляется в код сайта динамически Font Loader’ом , но только после того, как шрифт загружен.

Заключение

Эти десять небольших трюков помогут вам преобразить уже существующий сайт. Они избавят ваших посетителей от многих мучений при пользовании вашей страницей. Не откладывайте в долгий ящик, начните применять их прямо сейчас.

Данная публикация представляет собой перевод статьи « 10 Ways to Make Your Website More Mobile Friendly » , подготовленной дружной командой проекта Интернет-технологии.ру

Как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства?

Добрый день, господа.
Вообщем-то, вопрос в заголовке исчерпывающий: как сделать номер телефона ссылкой сразу на звонок, при открытии сайта с мобильного устройства? В данном случае, мобильного телефона, смартфона и пр. Т.е. то, что умееть звонить и имеет браузер.

Т.е.:
— посетитель видит номер телефона при открытии страницы сайта
— «тыркает» по нему пальцем
— идет звонок по указанному телефону

Easy Social Share Buttons — лучший плагин для кнопок соцсетей на WordPress

На прошлой неделе мы опубликовали список лучших WordPress плагинов для кнопок социальных сетей. Это актуальная тема, поэтому сегодня мы решили ее продолжить и уделить внимание одному из плагинов, а именно — Easy Social Share Buttons . Его используют очень многие популярные сайты, у плагина отличный рейтинг (в настоящее время он на топ-13 позиции в CodeCanyon) и уже боле 13 тыс. продаж.

Описание | Демо | Купить за $19

Мы работаем с этим плагином уже больше года и можем сказать, что это один из самых мощных инструментов подобного рода. Вы найдете в нем множество разных полезных функций и настроек. К тому же, плагин постоянно обновляется и совершенствуется, на прошлой неделе как раз была представлена новая версия 3.4. Вы сами можете просмотреть их changelog и узнать, как часто вносятся обновления в плагин.

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

Возможности плагина

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

  • 40+ социальные сетей — Easy Social Share Buttons для WordPress поддерживает более 40 популярных социальных сетей, включая мобильные мессенджеры. Количество поддерживаемых соц. сетей увеличивается с каждым обновлением.
  • Действия «After Share» — Отличный способ поощрять самых активных пользователей, который можно также использовать и для увеличения вашего списка рассылки.
  • Media Sharing — Функция, которая позволит вашим пользователям делиться изображениями.
  • Цитаты — Есть возможность создавать моментальные посты в Twitter (a.k.a Click-to-tweet).
  • 27 шаблонов — Easy Social Share Buttons включает в себя 27 разных шаблонов и очень удобный настройщик, поэтому вы всегда сможете экспериментировать с внешним видом.
  • Различные стили и макеты кнопок — Среди предложенных вариантов есть кнопки на всю ширину экрана, кнопки с фиксированной шириной, вывод кнопок в колонке, автоматическое отображение и т.д.
  • 20 автоматических позиций — В плагине вы найдете, наверное, самый продвинутый движок для отображения, который автоматически предлагает 20 различных позиций для вывода кнопок. Также не следует забывать о шорткодоах, благодаря которым вы сможете добавлять кнопки в любом месте.
  • Качественная мобильная версия — Easy Social Share Buttons для WordPress предоставляет 3 специальных варианта отображения кнопок на мобильных устройствах, использование которых позитивно повлияет на активность ваших «мобильных» посетителей.
  • Оптимизация — Плагин включает в себя модуль оптимизации, который позволит вам настраивать нужную информацию для соц. сетей. Есть также автоматическая отладка сообщений для Twitter, кастомные изображения для Pinterest и многое другое.
  • Social Metrics Lite — Функция, которая поможет отслеживать эффективность социальных сетей на конкретном посте или странице.
  • Social Analytics — Отличный модуль для аналитики. Отслеживайте действия своих посетителей на основе поста, способа отображения или типа устройства. Если вы хотите использовать Google Analytics — такой вариант также учтен. Плагин позволяет активировать пользовательскую трекинговую кампанию для Google Analytics.
  • Кнопки Like, Follow & Subscribe — Разработчики понимают, насколько важными могут быть подобные кнопки, поэтому добавили 12 самых популярных нативных кнопок.
  • Счетчик для фолловеров — Очень стильный счетчик с автоматическим обновлением данных. Также есть платные аддоны для отслеживания ваших профайлов в социальных сетях.
  • Линки на профили — Позволяет легко и просто добавлять ссылки на ваши профили в любое место на сайте.
  • Top Social Posts — удобный виджет, который предоставит пользователям информацию о самых популярных постах (необходимо, чтобы был активирован виджет Metrics Lite).
  • Производительность — С учетом оптимизации, плагин позволяет получить максимальную производительность от кнопок, не влияя на скорость загрузки сайта.
  • Социальное Доказательство — Демонстрация вашим посетителям, что другие пользователи уже поделились контентом — очень мощный инструмент влияния.
  • Share Counter Recovery — модуль, который следит практически за каждым изменением, которое происходит на вашем сайте, включая изменение структуры постоянной ссылки, изменение протокола или перехода на новый домен.

Настройка плагина

Как только вы активируете плагин и перейдете на страницу настроек, может показаться, что все слишком сложно и загромождено. Там действительно много различных настроек, вверху страницы находятся вкладки Social Buttons, Display Settings, Style Settings, Shortcode Generator, Analytics Dashboard, Import / Export и Update. С левой стороны вы увидите все доступные варианты для каждого раздела.

Топ-пост этого месяца:  Семь методов центрирования с помощью CSS

Не спешите пугаться, поскольку существует способ настроить все очень быстро с мастером настройки Quick Setup . Нажмите на соответствующую кнопку и просто следуйте инструкциям.

Все начинается с выбора шаблона — он отвечает за внешний вид ваших кнопок:

Далее в Button Style вы изменяете стиль вашей кнопки, задаете выравнивание, интервал и ширину кнопок:

Далее определяете, какие социальные сети вы хотите добавить. Выбирать и менять порядок можно с помощью drag-and-drop:

В разделе Сounters вы сможете настроить счетчики, которые будут отображать количество репостов в социальных сетях. Можно настроить счетчик для каждой отдельной сети, а также выводить общий:

В следующем окне вы можете выбрать, где на вашем сайте будут отображаться кнопки:

Вам также нужно будет выбрать конкретное положение иконок на странице сайта. Есть 8 основных позиций:

  • Над контентом
  • Под контентом
  • Над и под контентом
  • Плавающие кнопки вверху страницы
  • Плавающие кнопки внизу страницы
  • Нативные кнопки вверху страницы, кнопки «Поделиться» — внизу
  • Нативные кнопки внизу страницы, кнопки «Поделиться» — вверху
  • Режим «Manual Display Only» — размещение кнопок на странице при помощи шорткодов

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

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

Что случилось с Twitter счетчиком?

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

Однако, в плагине есть встроенная функция для подсчета репостов Twitter с сайта. Обратите внимание, что отображаемая цифра не будет показывать общее количество репостов, а будет конкретно отображать сколько раз данная кнопка была нажата на вашем сайте. Естественно, цифры будут меньше, но все же это лучше, чем вообще ничего.

Чтобы активировать эту функцию, нужно перейти в Social Buttons → Display Counters , найти вкладку Twitter Share Counter и установить Self-Hosted Counter .

Если вы не хотите попасть под негативное влияние «социального доказательства», можно настроить плагин так, чтобы данные счетчика отображались только после определенного количества репостов. Для этого перейдите в Advanced Settings → Twitter Counter Setup и установите Minimal Share Counter Value .

Такую настройку можно сделать и для постов в целом. Для этого на экране редактирования поста введите значение для Internal Share counter .

Конечно, это не идеальный вариант, но многие все же предпочитают задавать подобное минимальное значение, чем видеть у себя на сайте » 0 репостов «. Показатели Twitter — очень важны, и мы подозреваем, что в ближайшее время увидим какой-то новый инструмент от стороннего разработчика, но пока приходится обходиться подручными средствами.

Аналитика

Плагин отслеживает все клики по иконам на вашем сайте и позволяет просматривать отчеты, поэтому вы всегда можете увидеть, какой контент пользуется популярностью среди ваших читателей. Для этого перейдите во вкладку Analytics Dashboard , в которой увидите общее количество кликов для каждой сети и график за последние 30 дней.

Ниже размещена таблица, в которой перечислены все клики в разных сетях по месяцам:

Наконец, в нижней части можно увидеть список ваших самых популярных постов (с данными счетчика) для каждой социальной сети.

Аддоны

Для плагина Easy Social Share Buttons есть ряд бесплатных и платных аддонов:

  • Social Profiles (бесплатный) — позволяет отображать кнопки на ваши профили в соц. сетях, чтобы люди могли на вас подписываться.
  • Social Metrics Lite (бесплатный) — позволяет отслеживать ваши посты в социальных сетях и предоставляет подробные отчеты.
  • Click Log Analytics (бесплатный) — модуль, который отслеживает нажатие кнопок на вашем сайте.
  • Video Share Events ($9) — позволяет вам создавать всплывающие окна для видео (можно использовать и видео с YouTube или Vimeo).
  • Self-Hosted Short URLS ($9) — позволяет создавать собственные короткие URL-адреса для сайта.
  • Social Profile Analytics ($9) — позволяет контролировать все счетчики в профилях социальных сетей.

Стоимость

Плагин можно приобрести на CodeCanyon за $19 . В стоимость входит поддержка на 6 месяцев, которую можно будет продлить на год за $5.70. В целом, для такого плагина, цена вполне оправдана.

Заключение

Если вы ищите удобный, качественный плагин для добавления кнопок социальных сетей на сайт, то данный вариант идеально вам подойдет. Easy Social Share Buttons предоставит все необходимые настройки, аналитику и аддоны, которые могут вам понадобиться.

Сейчас существует достаточно много бесплатных вариантов, которые станут отличной альтернативой, если вам не нужно что-то сложное. Но если вы хотите перейти на новый, более высокий уровень, $19 — стоящая инвестиция. Стоит добавить, что мы сами используем данный плагин, и с ним никогда не возникало никаких проблем, поэтому можем смело его рекомендовать и вам.

Источник: codecanyon.net


Насколько полезным был этот пост?

Нажмите на звезду, чтобы оценить этот пост!

Средний рейтинг: / 5. Количество голосов:

Пока нет голосов! Будьте первым, кто оценит этот пост.

PROG-TIME

Набор номера при нажатии на кнопку на сайте. Как добавить кнопку с номером телефона на сайт

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

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

Так для этого нам понадобится обычная ссылка ‘ ’, и её атрибут ‘href’. Только в этот раз, мы в данный атрибут запишем не адрес ссылки, а следующее – ‘tel: номер телефона’. То есть полный вариант выглядит вот так

12 дополнительных функций смартфона, которые спрятал от вас производитель

Ребята, мы вкладываем душу в AdMe.ru. Cпасибо за то,
что открываете эту красоту. Спасибо за вдохновение и мурашки.
Присоединяйтесь к нам в Facebook и ВКонтакте

Современными технологиями уже никого не удивить, а поэтому все фишки модных гаджетов мы воспринимаем как должное. А зря! Ведь скрытые дополнения привычных нам вещей способны существенно облегчить жизнь.

Мы в редакции AdMe.ru собрали самые неочевидные скрытые функции наших смартфонов, которые полностью раскроют их потенциал.

Полезные функции Google Play

Отключение автоматических обновлений

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

Функция «Родительский контроль» в Google Play

Обезопасьте своего ребенка с помощью функции «Родительский контроль». Установите в Google Play необходимые возрастные ограничения, чтобы оградить детскую психику от неположенного контента.

Избранные приложения для последующей установки

В Google Play есть функция «Список желаний», которую оценят занятые люди. Увидели крутую игру, но не можете уделить ей должное время? Оставьте ее в закладках. Так вам не нужно будет устанавливать десятки приложений на смартфон, а в любой удобный момент вы можете открыть ваш личный список и загрузить необходимое.

Библиотека установленных приложений

Сменили телефон? Не беда! Все ваши приложения, ранее установленные и удаленные на старом гаджете, сохранены во вкладке «Библиотека». Зайдите туда и выберите из списка то, что желаете загрузить на новый смартфон.

Нужные функции iPhone

Отсрочка будильника одним нажатием

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

Время отправки и получения сообщений

Неочевидная функция iPhone — просмотр времени отправки сообщения. Просто проведите пальцем от правой к левой части экрана.

Объявление имени при вызове в наушники

Раздражаетесь от частых звонков, из-за которых приходится доставать телефон из внутреннего кармана куртки? Можно отвечать на звонки с наушников. Для этого включите тумблер «Объявления вызовов». Теперь при каждом звонке в ваши наушники будет воспроизводиться имя звонящего.

Функция «Гид-доступ» для чужих рук

Гид-доступ — доступ только к открытым приложениям на iPhone. Благодаря этой функции вы можете совершенно спокойно давать в руки ваш телефон для «просто проверить почту» тем людям, от которых хотите скрыть личное. Включить функцию можно в настройках универсального доступа.

Крутые опции Android

Хотите воспользоваться скрытыми опциями новых версий Android? Сделайте активным режим «Для разработчиков», который находится в настройках смартфона. Вам станут доступны более 50 новых функций, которые значительно улучшат и ускорят работоспособность гаджета.

Продлить работоспособность смартфона

Протянуть подольше на минимальном заряде батареи можно с помощью функции «Имитировать аномалию» в настройках разработчика. Просто активируйте монохромный режим. Уменьшенное количество отображаемых цветов значительно увеличит ваши шансы оставаться на связи в экстренной ситуации.

Сохранение информации на внешнем накопителе

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

Многооконный режим в новых версиях ОС

Многооконный режим — новая фишка последних версий операционной системы. Нужно работать сразу с несколькими приложениями? Воспользуйтесь функцией «Изменение размера в многооконном режиме». После включения на экране появится дополнительная панель с приложениями, которые доступны для работы.

Собиралка котов в вашем телефоне

В Android 7 есть скрытая возможность, а точнее настоящая пасхалка от производителей. В ОС спрятали игру, цель которой — собрать котов. Чем-то напоминает Pokemon GO в упрощенном варианте без использования виртуальной реальности.

12 правил дизайна сайта для мобильных устройств

Все больше и больше пользователей заходят на веб-сайты с мобильных телефонов. Компания Gfk опубликовала данные новых исследований: по статистике доля пользователей, которые используют мобильные устройства для поиска в интернете составляет 61%. Однако, дизайнеры часто совершают ошибки в проектировании макетов для мобильных телефонов. В этой статье мы поговорим об основных правилах дизайна сайта для мобильных устройств и приведем реальные примеры.

Правило 1. Адаптивность

Самое главное в дизайне сайта для мобильных телефонов — адаптивность. Если дизайнер не продумает расположение блоков, элементы могут «поехать», накладываться друг на друга или остаться очень мелкими и пользователю придется пользоваться зумом. Например, на сайте интернет-магазина книг блоки расположены также, как и на десктопной версии сайта, поэтому текст и изображения мелкие, приходится увеличивать макет и перемещаться по экрану в разных направлениях (нет скроллинга и навигации):

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

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

Все это учитывается при разработке адаптивной версии. Кроме того, наличие мобильной версии сайта повышает позиции ресурса в поисковых сетях, что влияет на количество переходов на сайт и, соответственно, количество потенциальных клиентов. Так выглядит адаптивная версия сайта IDBI:

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

Остальные правила относятся к проектированию адаптивной версии сайта.

Правило 2. Большие размеры

Так как телефоны имеют маленький размер экрана, элементы сайта должны быть видны пользователю, не должно быть затруднений при взаимодействии с интерфейсом. Например, кнопка «Купить» или «В корзину» должна быть заметна для пользователя, удобной для нажатия пальцем.

На примере — мобильная версия интернет-магазина «Озон». Кнопка зафиксирована внизу экрана, чтобы при прокрутке всегда была перед глазами. Выделена контрастным синим цветом для привлечения внимания. Достаточно крупная, для удобства при нажатии и при переходе в корзину. Также разработчики указали конкретное целевое действие: добавить в корзину товар определенной цены.

То же самое касается других элементов — форм, изображений, надписей и других блоков. Если элемент не привлекает внимание, неудобен для нажатия (например, пользователь «промахивается» и переходит на другую страницу), то есть большая вероятность, что клиент закроет сайт и уйдет к конкурентам.

Рекомендации по размерам элементов для нажатия: минимальный размер 26 px. Компания Apple рекомендует использовать размеры 44×44 px.

Правило 3. Крупная типографика

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

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

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

Правило 4. Ничего лишнего

Так как сайты на мобильных устройствах не смогут обеспечить пользователей всей функциональностью десктопных версий, дизайнерам следует отделить необходимую информацию и сделать контент полностью доступным. Для этого нужно убрать все лишние детали, которые усложняют дизайн и функционал сайта. Так выглядит десктопная и мобильная версия интернет-магазина одежды Lady Maria:

Десктопная версия

Мобильная версия

Как видно из примера, в мобильной версии убрали большое изображение с главного экрана и пользователь сразу переходит к категориям товара. Также уменьшили блок «Распродажа» — на мобильных устройствах акция отображается вверху в шапке, для привлечения внимания используется красная иконка со знаком %.

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

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

Правило 5. Контент в одной колонке

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

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

Правило 6. Нет поп-апам и виджетам

Некоторые инструменты на сайтах корректно отображаться могут только на десктопных версиях. Например, к ним можно отнести различные чаты с онлайн-консультантами, появляющиеся формы для подписки, поп-апы и прочее. На мобильных версиях они, как правило, раздражают пользователей или неадаптированы под меньший размер экрана («наезжают» на другие блоки, слишком нагружают сайт и прочее).

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

Топ-пост этого месяца:  Здравствуйте!

Если же без поп-апов не обойтись, лучше адаптировать их под размер устройства:

На сайте «Билайн» есть всплывающее окно с предложением оформить SIM-карту. Чтобы собрать лиды и не раздражать при этом другую группу пользователей, на всплывающем окне отчетливо видно значок закрытия, разработана очень простая форма: телефон и кнопка.

Правило 7. Доступные контактные данные

Основная цель сайтов с мобильной версией — призыв пользователя к целевому действию. В отличие от десктопной версии, главное целевое действие для мобильных устройств — получить звонок от клиента. Для этого делают следующее:

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

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

Пример 8. Социальные сети


Один из самых больших плюсов мобильных устройств — возможность быстро реагировать на новости, делиться с другими пользователями найденными товарами с помощью социальных сетей. С развитием Instagram и мессенджеров все больше пользователей пользуются социальными сетями только с мобильных телефонов. Поэтому для продвижения компании в сети разумно использовать социальные сети. Для этого на сайте оставляют ссылки на самые популярные ресурсы и кнопку «Поделиться».

Пример 9. Короткие формы

Заполнять длинные анкеты на телефоне — медленно и неудобно. Чтобы упростить пользователям ввод данных и побудить к целевому действию, формы разрабатывают следующим образом:

  • если анкета предполагает большое количество полей, форму разбивают на несколько этапов;
  • поля и кнопки делают больших размеров для удобного нажатия;
  • кнопки выделяются, чтобы привлечь внимание пользователя;
  • количество полей сводится до минимума;
  • для некоторых полей применяется автозаполнение или размещается маска. Например, при заполнении поля «номер телефона» используется маска на ввод.

Самое лучшее решение — оставить клиенту минимум полей для заполнения. Упрощение ввода данных увеличивает уровень конверсии сайта, так как пользователю не нужно совершать сложные действия, чтобы получить нужный результат.

Вот как разработали форму для получения кредитной карты дизайнеры банка «Тинькофф»:

Достаточно сложная форма разбита на несколько шагов, добавлены различные интерактивные элементы (ползунок для выбора лимита), мотивация к действию (50% вероятность одобрения). Также добавлена маска для ввода телефона, поля крупные, добавлены подсказки на каждом шаге.

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

Правило 10. Пространство

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

Десктопная версия

Мобильная версия

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

Правило 11. Проектирование навигационных элементов

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

Самый распространенный прием — фиксированное меню. При скроллинге такое меню остается перед глазами и позволяет быстро переходить из раздела в раздел:

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

Правило 12. Целевая аудитория

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

Есть некоторые сайты, на которые чаще переходят с мобильных устройств, а не с компьютеров. Например, интернет-магазины, которые продвигаются только за счет социальных сетей — Instagram, Telegram и прочее. При разработке дизайна таких сайтов возможна технология Mobile first — подход, при котором сначала разрабатывается мобильная версия сайта, а затем остальные варианты.

Также это правило касается используемых технологий на сайте. Пользователи iPhone не могут просматривать контент, который создан с помощью устаревшей технологии Flash-анимации. Поэтому нужно заменять такие инструменты на более современные, если большинство ваших клиентов используют устройства Apple.

Студия дизайна IDBI всегда разрабатывает несколько вариантов дизайна: для десктопа, планшетов, мобильных телефонов. Такой подход помогает предпринимателям получить большую прибыль с сайта, а пользователям — быстро найти нужный товар, связаться с менеджерами для уточнения информации. Примеры наших работ можно посмотреть в разделе «Портфолио».

Как сделать кнопки социальных сетей для сайта на WordPress

Приветствую, дорогие читатели!

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

Для чего нужны социальные кнопки

С помощью этих кнопок ваши гости смогут легко поделиться интересным материалом в своих социальных сетях. Это позволит вам получить крауд-ссылку и улучшить поведенческие факторы на сайте. В свою очередь, все эти аспекты сыграют положительную роль на посещаемости.

Помимо кнопок “Поделиться” вы можете просто разместить ссылки на свои социальные сети. Люди, переходящие на ваш сайт с поисковых систем, будут видеть, что, например, ВКонтакте есть группа с анонсами. Они будут подписываться и чаще заходить на ваш проект, а чем чаще на ваш сайт заходят постоянные читатели, тем выше он будет в выдаче.

Также социальные кнопки улучшают юзабилити сайта. А сейчас, как известно, роботы поисковых систем уделяют особое внимание этому фактору. Особенно это касается коммерческих сайтов, типа интернет-магазинов или крупных порталов.

Вот так, казалось бы, простая вещь несет в себе большое количество полезных плюсов для вашего проекта. Что уж говорить, если даже страница ошибки 404 имеет большое влияние на ранжирование. Удивляться нечему.

Плагины

Это наиболее простой и в то же время действенный вариант, который подойдет большинству вебмастеров. Вам нужно всего лишь установить расширение и минимально настроить его, все остальное уже продумано за вас. Далее я приведу список наиболее популярных плагинов социальных кнопок для ВордПресс.

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

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

AddToAny Share Buttons

Один из самых популярных плагинов для размещения кнопок “Поделиться” на страницах сайта с ВП. Расширение имеет интуитивно понятный интерфейс и множество вариантов этих самых кнопок. Базовую версию можно установить прямо из каталога, за расширенную придется заплатить.

Тем не менее бесплатной версии вам должно хватить. На скриншоте выше представлена лишь одна вариация этих кнопок. На самом же деле в расширении их намного больше, вы убедитесь в этом сами, когда установите его и перейдете в настройки.

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

Также можно менять текст, который будет отображаться при наведении на кнопки. Для этого есть отдельный пункт в настройках. Они поддерживают русский язык, но качество перевода оставляет желать лучшего. Но вы можете не беспокоиться насчет этого – настройки интуитивно понятные и простые, вы точно разберетесь.

Установить это расширение можно прямо из каталога WordPress. Просто перейдите в “Плагины” – “Добавить новый”, введите название в поле поиска и кликните на кнопку “Установить”, а после на “Активировать”. Параметры плагина можно найти в меню “Настройки” – “СоцЗакладки”.

Social Media Share Buttons & Social Sharing Icons

Отличный модуль с длинным названием, который имеет лучший рейтинг среди плагинов социальных кнопок в ВордПресс. На второе место я его поставил только потому, что русскоязычные пользователи, особенно новички, могут испытывать проблемы с настройкой.

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

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

Выбор кнопок представлен в виде картинок с пояснениями. С помощью галочек можно легко отметить те, которые вы хотите использовать. Но, к сожалению, для русскоязычного сегмента базовой версии будет недостаточно. Кнопка “ВКонтакте” доступна только в премиум-версии.

В базовой же из более-менее популярных вариантов для пользователей из СНГ есть Твиттер, Ютуб, Инстаграм. Но не спешите расстраиваться, вы можете сделать кастомную кнопку и добавить туда любую соцсеть. Правда, для этого придется потрудиться – найти иконку в хорошем качестве, самостоятельно добавить ссылку.

Также в модуле есть возможность добавления формы подписки на email-рассылку. Ее можно будет разместить в виде виджета в сайдбаре – боковой панели сайта.

Установить базовую версию модуля можно прямо из каталога. После активации вы можете выполнить поэтапную настройку. Как заявляют разработчики плагина, при каких-то проблемах вы можете обращаться на их форум (уведомление со ссылкой появится в админке) прямо на русском языке. Они постараются помочь.

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

WordPress Share Buttons Plugin – AddThis

Простенький с виду модуль, который позволяет разместить кнопки на сайте с WordPress. Этот плагин – интеграция известного сервиса AddThis, с его помощью вы можете создать кнопку “Поделиться” почти для любой социальной сети. Сам модуль тоже очень универсален и позволяет работать с большим количеством сервисов из разных стран.

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

Иконки можно размещать в любой части сайта. Настройки, конечно, там не очень понятные. Многие новички просто не поймут значение той или иной переменной.

Также вы можете пользоваться шорткодами, настраивая отображение того или иного набора иконок для каждой статьи или страницы. То же самое можно делать при помощи специального окна “AddThis Tools”, которое появится в каждой таксономии.

HTML-код

Добавить кнопки можно и при помощи html-кода. Здесь мы не будем рассматривать самостоятельную разработку скриптов, добавляющих иконки. Лучше мы обратимся к уже готовым конструкторам, которые помогут нам легко сделать свой собственный вариант панели “Поделиться”.

Блок “Поделиться” от Яндекса

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

Вы можете выбрать несколько вариантов отображения:

  • Только иконки – простые иконки, как на скриншоте.
  • Счетчики – рядом с иконками будет отображаться число людей, которые поделились вашим материалом.
  • Иконки и меню – несколько иконок и рядом кнопка, которая открывает окно со всеми остальными.
  • Маленького размера – просто мелкие иконки.

После завершения настройки необходимо скопировать содержимое поля “Код” и далее вставить его в нужном месте сайта.

AddThis

Англоязычный сервис, который помогает вам создать социальные кнопки по своему вкусу и получить готовый код для интеграции. Он чаще всего используется для самописных сайтов.

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

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

Share42.com

Очень простой и интуитивно понятный сервис на русском языке. В нем представлено большое количество разных настроек и параметров. Вы можете зайти на официальный сайт и убедиться в этом лично.

После выбора иконок и их размера вы можете выбрать тип кода. Для WordPress и Joomla там есть особые варианты. Для всех остальных CMS – стандартный. Но он, тем не менее, будет работать.

Код также придется вставлять в шаблон страницы.

Темы оформления

В некоторых шаблонах для WordPress кнопки социальных сетей уже предусмотрены. Это могут быть как бесплатные темы из каталога, так и премиум-версии из магазинов. Если вы найдете такую тему, вам не придется дополнительно устанавливать плагины или размещать какой-то код.

Если вы только продумываете создание своего проекта, не лишним будет заглянуть в магазин шаблонов и поискать там варианты с социальными кнопками.

Если вы так и не определились, то я могу посоветовать вам тему Root. В ней как раз есть все функции для создания крутого информационного проекта и кнопки социальных сетей в их числе.

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

Заключение

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

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

Не хочется? Тогда можно просто сменить шаблон на тот, который будет поддерживать такой функционал. Все зависит только от вашего решения. У каждого варианта свои плюсы и минусы.

Если вы хотите лучше разбираться в заработке на информационных сайтах, то я предлагаю вам посетить курс Василия Блинова “Как создать сайт”. В нем автор максимально подробно рассматривает все нюансы создания собственного проекта под монетизацию. Весь курс разделен на блоки с уроками. Обучение происходит последовательно в удобной интерактивной форме с домашними заданиями и общением с опытными вебмастерами.

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