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

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

    Дмитрий Луценко
  • Обновлено:
    2017-08-02
  • Просмотры:
    108k
  • Отзывы:
    5
  • Рейтинг: 3.1
Кнопки соцсетей – неотъемлемая часть поискового продвижения и комфорта пребывания посетителей на сайте. Они позволяют делиться интересными публикациями с друзьями или сохранять полезные статьи для дальнейшего ознакомления. Какие же кнопки лучше выбрать?

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

Соцкнопки необходимы, это очевидно. Вопрос в другом – какие выбрать? Мы для вас протестировали ТОП 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 на своём сайте необходимо выполнить несколько простых шагов:

Шаг-1

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

Выбор блока поделиться от uSocial

Шаг-2

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

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

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

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

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

Шаг-3

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

Шаг-4

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

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


Как увеличить КПД соцбара?

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

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

При корректном заполнении социальных мета-тегов записи будут правильно восприниматься социальными сервисами, ибо в них указан тип материала, релевантный заголовок, ссылка на нужную картинку. Всё это повышает эффективность от репостинга: ваш материал корректно проиндексируется социальными сервисами.
 
Примеры кода микроразметки для популярных социальных сетей (код нужно прописывать перед тегом </head>):

1. Facebook и Вконтакте используют Open Graph protocol: 

<meta property="og:title" content="Название страницы"/> 
<meta property="og:description" content="Описание"/> 
<meta property="og:image" content="http://www.site.com/logo.png" />
<meta property="og:url" content="http://www.site.com"/> 
<meta property="og:site_name" content="Название сайта"/>

3. Для Twitter код выглядит так:

<meta name="twitter:site" content="Название сайта"/> 
<meta name="twitter:title" content="Название страницы"> 
<meta name="twitter:description" content="Описание"/> 

4. Для Google+ так:

<link rel="author" href="https://plus.google.com/Blogger777/"> - cсылка на профиль автора в Google+
<link rel="publisher" href="https://plus.google.com/+ScotchIo/"> - название сайта
<meta itemprop="name" content="Блог о разведении слоников"> - текст сниппета (до 40 символов)
<meta itemprop="description" content="Описание сайта"> - описание сайта
<meta itemprop="image" content="http://site.ru/pic/img.jpg"> - путь к файлу изображения

Инструменты для работы с микроразметкой:

1. Open Graph Object Debugger — сервис проверки микроразметки и очистки кэша урла для Facebook.
2. Очистка кэша страниц для Вконтакте.
3. Валидатор микроразметки Twitter Cards.

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


Выводы

Мы задались целью и протестировали вдоль и впоперек 5 известных популярных сервисов для добавления на сайты социальных кнопок. Все они в той или иной мере хороши, но по ряду признаков победителем сравнения был признан Юсошиал. Именно его мы используем на своем сайте и рекомендуем всем!

uSocial – продвинутый и эффективный конструктор для сборки и добавления соцкнопкок на любые сайты. Процесс создания виджета занимает не более 5 минут. Результат получается весьма приятным, а главное – функциональным! Вы сможете просматривать подробную статистику и оптимизировать сайт в соответствии с полученной информацией. Кроме того, соцбар стильно смотрится и качественно собран: чистый код, легковесный, быстрозагружаемый. Никаких лагов или сбоев – панель работает как часы. Выбор редакции в этой категории, в общем.

  • Автор:

no avatar

Комментариев:5

mlg77
fb
Любовь Мак • 16:55, 2021-09-23
Это жесть. Недоработан у вас плагин.
1. Ставлю кнопки слева, они оказываются справа. Нельзя ли поправить???

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

3.Добавьте кнопки Дзена и Пульса? Это же тоже соцсети:))
sharotop
fb
Sharp • 16:16, 2019-05-21
Спасибо за полезную статью
admin-nevyansk
uid
Никита Андреевич • 12:06, 2016-03-12
Спасибо! Подключу.
admin-nevyansk
uid
Никита Андреевич • 14:20, 2016-02-26
Сейчас стоит яндекс-поделиться такой:


т.е. при наличии картинки $IMG_SMALL_URL1$
именно она встает в репост.

Как повторить подобное в текущем коде?
uGuide: Добавьте микроразметку между <head></head>, как указано в посте.

Код конкретно для изображения:

<meta property="og:image" content="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>http://www.nevyansk.org.ru/tofr/logo.jpg<?endif?>" />

<meta itemprop="image" content="<?if($IMG_SMALL_URL1$)?>$IMG_SMALL_URL1$<?else?>http://www.nevyansk.org.ru/tofr/logo.jpg<?endif?>">
Naz
ya
Naz Bayr • 12:30, 2016-02-27
Спасибо за полезную статью. Скажите, если пропишу вышесказанное на страницы с материалом то как быть с этими?

<?if($SOCIAL_IMAGE_SRC$)?>
<link rel="image_src" href="$SOCIAL_IMAGE_SRC$" />
<?endif?>
<meta name="title" content="$ENTRY_TITLE$" />
<meta name="description" content="$SOCIAL_DESCRIPTION$" />