Меню Рубрики

Установка кнопки социальные сети на сайте

Выбираем лучшие кнопки социальных сетей для сайта

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

Соцкнопки необходимы, это очевидно. Вопрос в другом – какие выбрать? Мы для вас протестировали ТОП 5 различных сервисов для добавления кода кнопок на сайты. Цель – выявить оптимальный и показать его в деталях. Начнём с отборочного этапа.

Выбор лучшего сервиса социальных кнопок

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

Состав команды аттестуемых таков:

  1. uSocial – конструктор социальных кнопок.
  2. Поделиться – скрипт соцкнопок от Яндекса.
  3. Pluso – генератор соцкнопок для сайта.
  4. AddThis – сервис для создания кнопок поделиться.
  5. UpToLike – сервис социальной активности.

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

Особенности кнопок uSocial

uSocial – это мощный конструктор социальных кнопок «Поделиться» и «Мне нравится» для сайта. Имеет собственную функциональную кнопку для шаринга uLike, виджет для привлечения посетителей (завлекающее pop-up окно), приложение для ВК сообществ, конструктор мета-данных и инструмент отладки (очистки кэша). Отдельно стоит выделить наличие такой полезной опции как «Социальный замок» позволяет скрывать заданный контент (ссылку, промокод и т.д.) на страницах сайта и предоставлять к нему доступ по истечению определенного времени или при выполнении условия – «Поделиться» сайтом в социальных сетях! Само собой, есть поддержка мобильной версии блока, счетчика репостов/лайков, доступна масса гибких настроек для отображения, а также подробная статистика репостов в личном кабинете. Кнопки можно установить на сайт любого конструктора или CMS: uCoz, uKit, Wix, Jimdo, WordPress, Joomla и остальных движков.

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

  • Во-первых, конструктор соцкнопок uSocial обладает удобным, понятным и эргономичным дизайном.
    Перемещаясь по панели функционала, которая включает в себя несколько пунктов, вы можете всегда слева видеть окно предпросмотра, что является большим плюсом. При этом, конструктор не выглядит перегруженным. Он полностью на русском языке, но имеет также и полноценную английскую локализацию. Многие аналогичные сервисы поддерживают русский язык, но не все. Например, AddThis не имеет такой возможности, что резко снижает его привлекательность для российских вебмастеров.
  • Во-вторых, uSocial предоставляет реально широкий функционал. В конструкторе можно настроить блоки “Поделиться” и “Мне нравится” так, чтобы они максимально органично смотрелись на вашем сайте. Круглые или квадратные иконки, пять различных эффектов при наведении, расположение – вертикальное, горизонтальное или статичное в заданном месте, три вида размеров, наличие общего счетчика и для каждой кнопки в отдельности, добавление кнопки “Наверх”, настройки мобильного вида, привлечение внимания к кнопкам и призыв к действию – в общем всё, что душе угодно. Таким обширным функционалом не сможет похвастаться ни один из приведенных в нашем обзоре конкурентов.
  • В-третьих, сервис дает возможность добавления, хранения и редактирования наборов в личном кабинете. Такой функции нет, например, в Яндекс Поделиться и Pluso. Эта фича очень удобна, если вы разработчик однотипных сайтов, а потому изменений в блоке “Поделиться” нет совсем или они незначительные.
  • В-четвертых, удобство использования самого блока. Для пользователя сайта работа с блоком не должна вызывать затруднений, иначе он просто откажется им пользоваться. Как, например, в случае с блоками от сервиса Яндекс.
    Для того, чтобы найти нужную вам соц. сеть, если она изначально не представлена в блоке, придется пролистать вниз внушительный список и отрываться при этом от содержимого сайта, что не слишком удобно.
    uSocial никак не мешает просмотру страницы. Если вдруг пользователь не хочет постоянно видеть данный блок на сайте, он может его скрыть и развернуть вновь при необходимости.

Словесного сравнения многим окажется мало. Поэтому мы составили сравнительную таблицу кнопок от uSocial и остальных дебютантов (используемая шкала оценки – от 1 до 5). Все эти данные получены в процессе тестирования.

Дизайн блока/ разнообразие выбора/настройка размеров и расположения 5 2 5 4 5 Удобство интеграции 5 4 5 3 4 Удобство использования 5 3 5 4 5 Наличие счетчиков репостов Наличие общего счетчика “Поделиться” Возможность сворачивать блок Наличие блока кнопок “Мне нравится” Чистый код (без фреймов) Мобильный вид
Читайте также:  Установки для охлаждения хлеба
Шаринг в мессенджеры Статистика шаринга Всплывающие окошки, привлекающие внимание к блоку PRO возможности Предпросмотр Регистрация нужна не требуется не требуется нужна нужна

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

Инструкция как установить кнопки социальных сетей на сайт

Для размещения социальных кнопочек от uSocial на своём сайте необходимо выполнить несколько простых шагов:

На сайте сервиса и выбираем, какой тип кнопок или набор сервисов будем создавать: кнопки «Поделиться», «Мне нравится», единую кнопку «uLike»; виджет «Привлечение посетителей» или «Социальный замок».

Собираем набор социальных кнопок. Можно выбрать отображаемые сервисы социальных сетей, форму и стиль кнопок.

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

Здесь же можно активировать кнопку «Вверх», включить поддержку мобильных устройств, подключить сервисы Viber, WhatsApp, Telegram, SMS.

Очень полезной выглядит функция Eye-Catcher — «Ловушка для глаз», призывающая пользователя поделиться страницей в соцсетях.

После завершения всех операций вводим адрес своего сайта и жмём на кнопку «Получить код».

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

источник

Как установить кнопки социальных сетей на сайт

Здравствуйте, уважаемые читатели!

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

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

Существует три основных метода как установить кнопки социальных сетей на сайт. Давайте рассмотрим их по порядку:

Установка отдельно стоящих кнопок социальных сетей.

1. В Контакте

Эта популярная социальная сеть, предлагает выбрать два независимых варианта кнопок, “Мне нравится” и “Сохранить”

Кнопка “Сохранить”.

Выбираете предложенный дизайн кнопки при выборе вам будет показано как будет выглядеть кнопка. №1

Выбираете прямые или скошенные углы кнопки №2

В поле “Текст”, вы можете изменить текст надписи “Сохранить”, на свою №3

В поле “Ссылка” выбираете “Страница с кнопкой” тогда будет отображаться та страница, на которой будет установлена кнопка. Или указываете “Другая страница” и в поле вводите адрес страницы которую хотите вывести при нажатии кнопки №4

В окне “Код для вставки” вы получите код для вставки на свой сайт. Вернее будет сгенерированно две части кода: первый надо между тегами и , Для этого заходите в консоль сайта, Внешний вид–> Редактор–> Заголовок (header.php) и вставить первую полученную часть кода, непосредственно перед закрывающим тегом

Вторая часть кода устанавливается в том месте где должна быть видима кнопка. Обычно кнопку устанавливают в конце статьи для этого переходим, Редактор–> “Одна запись”(single.php) и находим в коде такую строчку с оператором Сразу после него вставляем следующую часть кода .

Не забудьте, после вставки кода выполнить “обновить”.

2. Твитер

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

  1. Выбираете внешний вид кнопки.

  1. Заполняете форму “Параметры”
  2. “Отправить ссылку” – назначаете страницу с установленной кнопкой или вводите адрес необходимой страницы.
  3. “Текст “– отмечаете какой текст будет прописан рядом с установленной кнопкой.
  4. “Показывать счетчик”– отображать или нет количество переходов по кнопке.
  5. “С помощью”– оставить как есть.
  6. “Рекомендовать” пользователю, перешедшему по кнопке предложат подписаться на аккаунт прописанный в данном окне.
  7. “Отметить”– оставить как есть.
  8. “Большая кнопка”– выбор размера кнопки.
  9. “Отказаться от адаптации Твитера”– не ставим галочку.
  10. “Язык”– выбор языка надписи кнопки.

Далее вы получите сгенерированный код для вставки на сайт

3. Фейсбук

Данный сервис также предлагает несколько видов кнопок, рассмотрим на примере кнопки “Нравится”.

  1. Заполняете форму настройки кнопки.
  2. “url-адрес страницы для кнопки”- отображается адрес страницы на которой будет установлена кнопка, или будет переход по адресу который вы укажите.
  3. “Композиция”– настройки как будет выглядеть кнопка.
  4. “Width”– настройка размера кнопки по ширине в пикселях
  5. “Тип действия”-лайк или рекомендовать
  6. “Показывать лица друзей”- будут выводится аватарки нажавших на кнопку
  7. “Получить код”-запускает генератор кода кнопки
Читайте также:  Установка извещателей под воздуховодом

4. Гугл «+ 1»

Социальная сеть, набирающая популярность, имеет важное значения для продвижения в Google.

Настройка данной кнопки не составит труда и аналогична настройке других .

5. Одноклассники и Мой мир.

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

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

Существует еще много одиночных кнопок соц. сетей, принцип их настройки и установки идентичен вышеперечисленным .

Установка кнопок социальных сетей с помощью плагинов.

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

Например, очень неплохо себя зарекомендовал плагин- Social Share Buttons for WordPress . Он позволяет настроить много функций прикрепленных к кнопкам.

Готовые блоки для кнопок социальных сетей.

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

Давайте рассмотрим некоторые из этих сервисов:

Блок «поделиться» от Яндекс.

Удобный сервис для формирования блока кнопок. Без проблем работает на любом сайте. Правда ограничен выбор и настройка внешнего вида кнопок.

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

“Набор сервисов” – ставите галочки на те кнопки которые необходимы на блоге.

“Внешний вид блока” – выбор как будет выглядеть блок;

“Код” – код скрипта для установки на сайт.

Установка кода выполняется так же как и для одиночных кнопок.

Кнопки Share42.

Еще один не плохой сервис, помогающий сгенерировать кнопки для своего сайта

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

Выбираем необходимые социальные сети и задаем размер кнопок, затем переходим к дополнительным опциям..

“Тип панели с иконками” – настраивается как будет выглядеть блок на сайте

“Ограничить видимое кол-во иконок” задается количество постоянно видимых кнопок, остальные будут выплывающими

“Кодировка” -указываем какая кодировка используется на вашем сайте.

“Добавить иконку сайта Share42.com” удаляем галочку чтобы не отображалась реклама сервиса.

“Показывать счетчики” – подключение счетчика количества нажатий на кнопку.

Подробная и инструкция по установке скрипта есть на сайте. Но установка я считаю, установка для новичков достаточно сложная..

Кнопки «PLUSO».

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

Сначала выбираете внешний вид кнопок из предложенных.

Далее настраиваете дополнительные возможности

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

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

Надеюсь, статья была полезной. Спасибо за внимание. До встречи!

источник

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

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

Помимо аккаунтов в соцсетях, следует добавить на сайт кнопки «Поделиться» (или по-другому share-кнопки, кнопки шеринга), которые позволят пользователям быстро добавить ссылку на ваш сайт у себя на странице или отправить в сообщении другу.

Найти кнопки соцсетей для сайта можно отдельно на страницах сервисов (например, ВКонтакте нужно зайти в раздел «Разработчикам») и последовательно разместить каждую на сайте или использовать готовые панели сторонних сервисов (рассмотрим несколько примеров ниже). Первый способ стоит использовать, если вы хотите разместить развернутые блоки с примерами последних постов, а второй позволит добавить набор кнопок в одно изменение кода.

Оформление кнопок

Для начала определимся с внешним видом кнопок. Основные рекомендации:

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

Компания изменила цвет, но кнопки остались заметны:

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

Читайте также:  Установка и монтаж карнизов для штор

Не сразу понятно, что это кнопки и что они ведут на соцсети:

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

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

Пример изменения кнопки после наведения курсора:

Кнопок не должно быть слишком много. Исследования за прошедший год показывают, что в основном россияне используют Youtube, ВКонтакте, Одноклассники, Facebook и Instagram, а также делятся информацией в WhatsApp и Viber. Обязательно учитывайте особенности аудитории вашего сайта, однако рекомендуем размещать не более 5-7 кнопок.

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

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

Пример слишком мелких кнопок:

По таким кнопкам сложно не попасть:

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

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

Uptolike — не менее хороший конструктор и обилие настроек по дизайну кнопок. Есть отдельные плагины для популярных CMS.

Блок «Поделиться» от Яндекса — если не хочется заморачиваться с оформлением, то Яндекс предлагает самый простой конструктор с минимумом возможностей. Плюс данного сервиса в том, что доступно исследование через Яндекс.Метрику.

Кнопки соцсетей для сайта: где расположить?

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

Пример привлекательного блока (по каждому изображению можно кликнуть и перейти на соответствующий пост в соцсетях):

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

Страница о компании. Рассказывая о себе, можно внизу страницы также добавить блок с последними постами и ссылками на соцстети.

Или кратко упомянуть аккаунт, как здесь:

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

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

И еще 4 идеи для размещения кнопок шеринга

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

Или пример с призывом к действию:

На страницах акции. Про них, кстати, чаще всего забывают.

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

На страницах услуг. Если основной продукт компании — предоставление услуг, то, как и в предыдущем пункте, следует разместить кнопки шеринга. В данном случае кнопку желательно поместить в первом экране:

Где НЕ нужно располагать кнопки

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

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

В боковом меню ссылки соцсетей также будут отображаться «слишком рано». Да и не стоит перегружать боковое меню. Антипример:

Закреплять на странице. Данную функцию полезно использовать для онлайн-консультанта или формы обратной связи, а кнопки соцсетей будут только отвлекать внимание пользователя.

Для кнопок репостов в соцсети можно выделить следующие ошибки:

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

Расположение рядом с контентом, который не интересен. Например, рядом с текстом о компании кнопки совершенно непривлекательны для пользователя. Также далеко не каждым товаром пользователи захотят делиться:

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

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

Выводы

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

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Специалист по юзабилити сервиса 1PS.RU

Понравилась статья?

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

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

33 бесплатных инструмента
для интернет-маркетолога

источник

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

Adblock
detector