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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

плагин Social Share Buttons

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

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

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

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

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

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

Для того, чтобы установить такие, нужно пойти в каждою социальную сеть, скопировать оттуда код, и вставить себе на сайт. О том, как это сделать, я подробно описывал в следующих постах:
Кнопка google + 1;
Кнопка «Мне нравится» от Вконтакте и 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. А если никак не получается, то выберете другой вариант.

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

  • Пишите качественный контент. Если ваши посты будут нравиться посетителям, то они с удовольствием будут делиться ими с друзьями. Контент – это самое главное.
  • Размещайте кнопки аккуратно, немного и на самом видном месте. Я часто вижу на разных ресурсах по несколько кнопок от одной социальной сети. Я бы не советовал такое делать. Если посетитель не хочет нажимать на кнопку, то установите хоть 10 штук от одной соц. сети, он все равно не нажмет.
  • Попросите посетителя нажать на кнопку. А почему бы и нет? Вы можете добавить какой-нибудь текст выше всех кнопочек и попросить человека поделиться с друзьями, это работает очень хорошо.
  • Если лайков нет, то счетчик лучше убрать. Когда человек увидит, что на кнопку еще никто не нажимал, то, скорее всего, он также не будет нажимать. Поэтому, если посещаемость сайта маленькая и никто не нажимает на кнопки, то луче не показывать это.
  • Накручивайте социальные сигналы. Сейчас в интернете есть немало сервисов для накрутки социальных факторов, например, я использую Userator, Forumok и Prospero. На всех трех сервисах можно накрутить сигналы за копейки.
  • Установите себе плагин «заплаты лайком». Если вы не знаете, этот плагин закрывает часть контента от посетителя. Человек может полностью прочитать текст только после того, как нажмет на кнопку социальных сетей. Таким образом вы сможете получать социальные сигналы на полном автомате. Я считаю что это самый лучший способ получить ссылки с социальных сетей.

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

vachevskiy 13 ноября 2013
  1. Александр

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

  2. vachevskiy

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

  3. Дмитрий

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

    ** Тут сили css smile

  4. Дмитрий

    тегоv head /head

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

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

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

    • vachevskiy

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

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

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

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

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

  9. Павел Сокуров

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

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

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

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