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

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

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

2014 01 13 151508

Скрипт социальных кнопок для сайта предоставляют много источников:

  1. Социальные кнопки яндекса;
  2. Плагины социальных кнопок для WordPress;
  3. Сервисы социального шаринга и дополнительных инструментов.

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

Социальные кнопки Яндекса

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

Snimok yekrana 2017 02 16 v 9.41.37

Есть возможность размещения:

  • Простых иконок;
  • Иконок со счетчиками;
  • Показывать только несколько сетей и и кнопки меню для открытия дополнительных;
  • Кнопок маленького размера.

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

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

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

Изменение стиля социальных кнопок Яндекса

Чтобы изменить внешний вид, необходимо переопределить стили Яндекса в своем CSS файле.

.b-share_theme_counter .b-share {
padding: 0 !important;
}

.b-share_theme_counter .b-share__link {
border-radius: 0px !important; /*убираем скругление иконок*/
background-color: #555 !important; /*делаем фон серым*/
}

.b-share_theme_counter .b-share__link:hover {
opacity: 0.8; /*добавляем прозрачность при наведении*/
}

.b-share_theme_counter .b-share-icon {
background-image: url(‘http://ваш сайт.ру/files/b-share_counter_large.png’) !important;
/*заменяем стандартное изображение иконок на свое*/
}

.b-share_theme_counter .b-share-counter {
color: #fff; /*задаем цвет текста*/
}

Меняем размер иконок:

.ya-share2__container_size_m .ya-share2__icon {
height: 40px !important;
width: 40px !important;
background-size: 40px 40px !important;
}

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

Плагины социальных кнопок для WordPress

Easy Social Share Buttons

cc new image 34 01

Этот премиум плагин доступен на CodeCanyon.net за $19. Это один из самых универсальных плагинов подобного рода, благодаря одному простому факту — плагин позволяет размещать бар с кнопками для социальных сетей абсолютно в любом месте, где это может вам понадобиться.

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

easy social share buttons for wordpress

При помощи плагина можно добавлять плавающий бар иконок, размещать кнопки сверху/снизу поста, создавать статический или даже плавающий бар иконок для мобильной версии. Вы также сможете использовать триггеры, например, для добавления функций pop-up и fly-in.

1 5

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

Monarch от Elegant Themes

monarch 3up hero

Monarch — это платный плагин для социальных сетей, который поставляется с тарифными планами Elegant Theme’s Developer и Lifetime Access. Данные планы включают в себя более 85 премиум тем для WordPress и все другие плагины от этого разработчика. К сожалению, политика компании такова, что вы не можете купить отдельно сам только плагин. Вы оплачиваете полный тарифный план и получаете доступ сразу ко всем премиум плагинам и темам разработчика.

monarch sharing sidebar

Monarch — это отзывчивый плагин, который позволит вам размещать эффектные плавающие бары по бокам поста или статические горизонтальные бары в начале/конце поста. Monarch предоставляет более 20 иконок для социальных сетей, есть image-sharing, pop-up и fly-in функции, а также множество настроек для оформления и дизайна.

Social Warfare

Capture 5

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

3 2

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

Бесплатные плагины для социальных сетей

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

SumoMe Share

Capture2 2

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

SumoMe Share Pro поставляется с дополнительными функциями. Например, здесь есть возможность удалить брендинг SumoMe из вашего бара, можно отслеживать UTM-метки, чтобы узнать, какие социальные сети приносят наибольший трафик и т.д.

GetSocial

4 1

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

Разработчики представили и премиум версию плагина (с ежемесячной платой). В ней вы найдете функцию для добавления плавающего бара для мобильных версий и дополнительные варианты дизайна, есть функция click-to-tweet. В платной версии у вас также будет возможность убрать счетчик с кнопок, который отвечает за количество репостов.

AddToAny Share Buttons

5 1

AddToAny Share Buttons — это один из самых популярных WordPress плагинов для социальных сетей с более чем 200,000 активных установок. Этот плагин ставит простые плавающие бары по бокам вашего поста, а также в его начале или конце.

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

Custom Share Buttons with Floating Sidebar

6 1

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

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

Sharify Social Share Buttons

7 1

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

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

Социальные кнопки и дополнительные инструменты AddThis

Здесь бы я хотел рассмотреть очень удобный по моему мнению инструмент предоставляемый сервисом AddThis. Который предлагает для использования:

  1. Кнопки социальных сетей;
  2. Кнопки подписки в соцсетях;
  3. Похожие материалы;
  4. И многое др…

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

Сервис может работать абсолютно на любом движке и даже на HTML сайтах. Усли же вы пользуетесь WordPress, то вам доступен плагин, который упростит работу с сервисом.

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

А теперь по порядку:

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

Инструменты

Snimok yekrana 2017 02 16 v 10.23.20

В инструментах нам доступны

Snimok yekrana 2017 02 16 v 10.23.36

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

Социальные кнопки поделится

Snimok yekrana 2017 02 16 v 10.26.25

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

Snimok yekrana 2017 02 16 v 10.26.00

По нажатию Add more Services доступны все популярные социальные сети, как зарубежные, так и наши.

Рекомендуемые статьи

Сервис предлагает и удобный инструмент для показа рекомендуемых статей посетителей.

Snimok yekrana 2017 02 16 v 10.33.52Окна обладают широким выбором настроек, что позволяет добиться максимально желаемого результата.

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

Как я отмечал в своей статье, как ускорить сайт на WordPress , по PageSpeed Insight показатель понижения скорости от использования AddThis кода на сайте всего 1%.

Вы можете добавлять разное количество сайтов, по каждому сайту получать статистику и все это на бесплатной основе. Сервис действительно очень удобен. Сайт сервиса www.addthis.com.

Вас могут заинтересовать:

@DDR5.RU

@DDR5.RU

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

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *