vachevskiy.ru

Красивые кнопки социальных сетей для сайта — 5 способов установки за 1 минуту

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

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

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

Способ 1. Установка с помощью  сервиса share.pluso.ru.

С помощь этого сервиса можно установить любые кнопки социальных сетей очень быстро, а главное, кнопочки выглядят красивыми :smile:. Для установки, сначала перейдите на share.pluso.ru. Потом вам нужно выбрать кнопки, которые вы хотите видеть на своем ресурсе. Для этого просто левой кнопкой мыши перетащите их с раздела «Доступны к выбору» в раздел «Выбранные сети». После этого, выберите понравившейся вам стиль кнопок ;-).

кнопки соц сетей для сайта

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

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

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

Способ 2. Установка с помощью  сервиса uptolike.

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

Что значит, что это наиболее универсальны способ? Просто чтобы установить кнопки uptolike, вы можете использовать просто код кнопок, или выбрать плагин. Вы можете выбрать:

  • WordPress плагин
  • Joomla плагин
  • Drupal модуль
  • Bitrix модуль
  • Ну и конечно, просто установив код на сайте.

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

Ну а далее вы можете настроить все это прямо из панели управления сайтом.

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

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

Возможности uptolike

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

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

Способ 3. Устанавливаем социальные кнопки для сайта с помощью сервиса api.yandex.ru/share.

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

Для установки, сначала нужно перейти на сервис api.yandex.ru/share. Здесь все очень просто: слева нужно поставить галочку рядом с кнопкой, которую вы хотите себе добавить, а справа выберите внешний вид блока

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

После настройки просто скопируйте код и вставьте его в то место, где вы хотите видеть кнопки социальных сетей на сайте. Для wordpress, это файл single.php или index.php.

Способ 4. Устанавливаем кнопки социальных сетей для сайта с помощью плагина Social Share Buttons.

Когда я только начинал вести первый блог, то у меня стоял этот плагин и он мне понравился. Установил его за одну минуту, настроил и вот тебе красивые кнопочки, не нужно копаться в различных кодах и изучать правила сss :smile:. Но каждый плагин имеет существенный недостаток – это дополнительная нагрузка на сервер. Если ваш сайт медленно грузиться, то после установки плагина, он будет загружаться еще дольше.

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

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

Не знаю как вам, но мне такой вариант не очень понравился :smile:. Для начала, я бы советовал нижнюю часть кнопок вообще убрать, чтобы они не повторялись. Для этого зайдите в «Панель управления» — «Share Buttons» – «Like настройки» и в самом верху справа есть надпись «Включение/Отключение социальных кнопок», ниже этой надписи уберите три галочки и нажмите на кнопку в самом низу «Сохранить изменения».

Потом зайдите в «Share настройки» и оставьте только основные кнопки, которые вам необходимы. Для этого, ниже надписи «Включение/Отключение социальных кнопок» уберите галочки с кнопок, которые вам не нужны. Я, например, оставил только такие кнопки соц сетей для сайта:

плагин Social Share Buttons

В этом же разделе «Share настройки» вы можете также изменить стиль своих кнопочек, в правом верхнем углу. Но мне классические понравились больше всего.

Потом можно зайти в раздел «Главные настройки» и изменить текст над кнопками соц. сетей. Я, например, написал «Поделиться с друзьями». После всех изменений у меня получилось следующее.

кнопки соц сетей

Мне кажется, очень неплохо, и самое главное аккуратно :smile:.

Способ 5. Устанавливаем кнопки соц сетей для сайта с помощью кода.

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

кнопки для сайта

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

Кнопка «Мне нравится» от Вконтакте и Facebook;
Кнопка twitter.
После выполненной работы, вы получите примерно такой код всех кнопочек вместе:

код социальных кнопок

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

.knop {
margin: 20px 0 50px 0; }
.twitter {
float:right; }
.vk {
float:left; margin-left: 10px; }
.google {
float:left; margin-left: 1px; }
.fb-like {
margin-left: 40px; }

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

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

На этом у меня все. А какие вы установили кнопки социальных сетей для сайта.

1 звезда2 звезды3 звезды4 звезды5 звезд (3 оценок, среднее: 5.00 из 5)


  1. Александр пишет:

    Здравствуйте, скажите пожалуйста в каком месте нужно прописать стили в css. тупо в самом конце?

  2. vachevskiy пишет:

    Александр, в любом месте после такой скобки } Можно в конце

  3. Дмитрий пишет:

    Стили css пишуться в отведенном блоке между тегом

    ** Тут сили css 🙂

  4. Дмитрий пишет:

    тегоv head /head

  5. servissoc пишет:

    Спасибо за статью!

  6. Недомосквич пишет:

    У меня были кнопки соцсетей, и лайков было немало. Но пришлось снести, так как плагин выводил второй тег body, из-за чего страницы не принимались в ggl.

    Сейчас снова устанавливать кнопки соцсетей не хочу — не особо понимаю, зачем они нужны.

    • vachevskiy пишет:

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

  7. Ольга пишет:

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

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

    Можете подсказать в чем может быть проблема?

  8. Игорь пишет:

    Спасибо за статью! 🙂

  9. Павел Сокуров пишет:

    Это я отвечал Недомосквич-у, нопочему то не к его сообщению добавлось 🙁

  10. Роман пишет:

    Кнопочки класс есть из чего выбрать, благодарю. Себе поставил. 😀

  11. Екатерина пишет:

    Выбрала себе по вкусу, долго до этого искала ничего не нравилось, а у вас нашла интересные варианты. Спасибо. *unknw*

  12. Елена пишет:

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

  13. Елена Зенкова пишет:

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

  14. Александр Иванов пишет:

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

  15. Zorbasmedia.ru пишет:

    Классно, очень информативно. Пригодится, кидаю в закладки.