Главная > Создаем сайт > Кнопки «Поделиться в соц.сетях»

Кнопки «Поделиться в соц.сетях»

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

Я предлагаю рассмотреть три варианта таких кнопок: от Яндекса, от сайта Share42.com и от сайта «Одна Кнопка».

 

Кнопки от API — Яндекс

 

Установка кнопок от API — Яндекс очень проста и займет буквально несколько минут.

Кнопки "Поделиться в соц.сетях" от API - Яндекс помогут получить новых посетителей на ваш сайт или блог.

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

Для блогов на WordPress, установку кнопок распишу более подробно.

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

Размещаем код кнопок "Поделиться в соц.сетях" от API - Yandex в файле шаблона index.php

На картинке показаны два кода, но разместить, естественно, нужно один.

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

Все точно так же нужно сделать с файлом archive.php, если вы хотите, чтобы кнопки были видны на страницах Архива.

 

Кнопки от Share42.com

 

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

  • Выберите размер иконок и отметьте соц.сети, которые вы хотите видеть на своем сайте.

Устанавливаем кнопки "Поделиться в соц.сетях" от Share42.com. Подробная инструкция с картинками.

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

Устанавливаем настройки, в соответствии с вашим сайтом.

  • Распакуйте архив со скриптом и поместите папку share42 в корневой каталог вашего сайта или блога, для WordPress это папка www.
  • Выберите тип сайта, который вам наиболее подходит.
  • Скопируйте код скрипта и разместите его на сайте или блоге так, как было описано выше, для кнопок от API — Яндекс. В коде обязательно вставьте вместо site.ru имя своего сайта.

Сделайте необходимые настройки для блока кнопок "Поделиться в соц.сетях" от Share42 и установите код.

Что бы редактировать внешний вид блока кнопок, в файл style.css добавьте код стилей, но это не обязательно.

 

«Одна Кнопка»

 

  • Выбираем внешний вид блока кнопок.
  • Выбираем подходящий вид сайта.
  • Сервис «ОднаКнопка» предлагает установку блока кнопок в виджете боковой колонки — на мой взгляд, не лучшее для него место. Можно воспользоваться способом, описанным выше и разместить скрипт в файлах index.php, single.php и archive.php.

Устанавливаем блок кнопок "Поделиться в соц.сетях" от OdnaKnopka.ru

  • Для блогов на WordPress можно сделать установку блока кнопок с помощью плагина. О плагинах более подробно можно почитать здесь.
Подпишитесь на обновления блога по e-mail

Подпишитесь на обновления блога по e-mail

  1. NiL
    3 августа 2012 в 22:34 | #1

    @вася

    Спасибо за замечание. Исправил.

  2. вася
    3 августа 2012 в 21:41 | #2

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

  3. maximus
    31 октября 2012 в 21:33 | #3

    По мне так на них мало кто жмёт,так если только для солидности, да для себя)

  4. 31 октября 2012 в 22:21 | #4

    Спасибо за статью. А про плагин кнопок из реактивного ранца WP статьи у вас нет? А именно — как туда кнопки добавлять?

  5. 1 ноября 2012 в 22:33 | #5

    Спасибо за инфу!

    Поставлю на свой сайт! Надеюсь будет больше посетителей ну и визуально приятно.

  6. Марк
    2 января 2013 в 21:48 | #6

    от Share42.com хороший очень... советую всем!

  7. 11 января 2013 в 20:45 | #7

    А ничего, что ссылка вместе с кнопками ставится, индексируемая! Даже на этом сайте стоит на апи.яндекс

  8. NiL
    11 января 2013 в 21:57 | #8

    @Валера

    Скрипт для каждой ссылки прописывает атрибут rel со значением nofollow. Div с кнопками-ссылками я закрыл тегом noindex, откройте исходный код и вы все увидите сами.

  9. Виктория
    29 января 2013 в 10:04 | #9

    Одна кнопка — супер!

  10. Магомед Саадулаев
    13 марта 2013 в 10:59 | #10

    Добавил в закладки. Теперь буду почаще читать!

  11. Владислав
    1 апреля 2013 в 08:53 | #11

    Здравствувйте! Нигде не могу найти описания — как вставить вот такие кнопки на сайт:

    www.dropbox.com/s/hp8ru3fy0p3e1r9/соц%20сети.png

    В конце каждой статьи, очень стильные, небольшие

    Все сервисы и плагины не дают именно такого результата. вручную что ли все делается?

    • NiL
      1 апреля 2013 в 16:53 | #12

      @Владислав

      Я такого плагина не знаю. Делайте вручную, плагин вряд ли найдете.

  12. 1 апреля 2013 в 16:09 | #13

    От яндекса кнопки самые четкие и удобные. Все получилось

  13. Роман
    16 апреля 2013 в 21:45 | #14

    Огромное спасибо! наконец нашел!

  14. 14 июля 2013 в 05:35 | #15

    тоже наверное заменю на яндексовские. шара уже не катит.

  15. vlad
    26 августа 2013 в 23:32 | #16

    По мне так на них мало кто жмёт,так если только для солидности, да для себя)

  16. 22 ноября 2013 в 18:49 | #17

    Спасибо установил Кнопки от API — Яндекс

  17. forumroditeley.ru
    8 февраля 2014 в 17:28 | #18

    А мне нравится от яндекса — просто и удобно!

  18. Елена
    23 февраля 2014 в 18:59 | #19

    Как интересно. Нужно попробовать)

  19. 11 января 2015 в 18:07 | #20

    а как сделать кнопки как у вас? скажите что и как используете. у вас 2 панели отдельные для кнопок и лайков?

  20. NiL
    11 января 2015 в 20:23 | #21

    @Vundar

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

  21. 12 января 2015 в 10:27 | #22

    Всё сделал одна кнопка вписалась идеально. Опишу свой опыт перебрал и плагины которые все хвалили, и прочую бороду. И яндекс кнопки и шару, но была проблема с вписыванием картинок. Теперь в компании с сео плагином YOST, сервис одна кнопка идеально работает и картинки и описание на ура идёт. Нет торможений вконтакте как у яндекс кнопок. Как бэ можете заценить hramputi.ru понравилось что просто скрипт и никакой левой рекламы и ссылок индексируемых и скрытых

  22. NiL
    13 января 2015 в 20:37 | #23

    @Vundar

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

  23. 17 января 2015 в 13:20 | #24

    @NiL

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

  24. 17 января 2015 в 13:22 | #25

    Рекомендую вам плагин поставить Simple Comment Editing он лёгкий, никакой нагрузки на сервер, чтоб ошибки комментаторы могли исправлять:) думаю в вашу систему идеально впишется

  25. 27 января 2015 в 13:30 | #26

    оказывается в одной кнопке нет g+1 а g+ это другое немножко. поставил отдельно. пробовал ставить лайки, но как то оно лишнее как по мне если уже есть поделиться.

  1. Пока что нет уведомлений.