Плавающая Панель Кнопок Социальных Сетей

марта 26 20:58 2012

Доброго времени суток! Сейчас я вам расскажу про один очень интересный плагин, который отображает кнопки соц сетей и таким образом дает возможность вашим читателям поделиться со своими друзьями в социальных сетях вашими статьями. Думать о том, нужно это или нет, не стоит. Нужно! Однозначно нужно! Так как бизнес в кибер-пространстве, да и в реальном мире, строится на трафике, а с социальные сети — это один из поставщиков трафика. Вот...

Плагин называется Scrolling Social Sharebar. У меня на блоге вы можете видеть его справа. Если включить все социалки разом, то выглядеть он будет так:

Scrolling Social Sharebar
Но так как у нас профессиональная (даже так) сеть Linkedin не особо популярна (о ней я вообще не слышал до сих пор), значит, соответствующая кнопка не особо-то и нужна. Кстати, во время русификации я вообще удалил ее из кода. Так же я удалил кнопку коммерческого сервиса поиска web-страниц Stumbleupon.

Scrolling Social Sharebar на русском

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

Скачать русифициированный плагин (с кнопкой Вконтакте) можно здесь. Если он вдруг по каким-то причинам не функционирует, то английскую версию можно скачать здесь.

Настройки плагина Scrolling Social Sharebar

Перейдем к настройкам. Настройка данного плагина довольна проста. Взглянем на скриншот с настройками.

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

Где показывать

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

Выберите иконки, которые нужно отобразить

Изначально их было 7 (см. скриншот ниже). Но так как Linkedin и Stumbleupon не используются, то я их удалил из кода плагина. Оставил только 5: «Мне нравится» и «Поделиться» вFacebook, Google +1, Twitter и AddThis. Кнопку AddThis в принципе тоже можно было удалить, но так как там есть кнопка «Поделиться с друзьями в ВКонтакте», то ее я оставил.

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

Из всех этих кнопок я пользуюсь, как вы видите на скриншоте и на нашем блоге, кнопки твиттера, Google +1 и поделиться с друзьями в Facebook. Почему? Потому что эти кнопки дают возможность делиться статьями.

Позиционирование блока с кнопками

Этот пункт настроек позволяет поместить блок с кнопками туда, куда вы хотите.

Чтобы сдвинуть блок с кнопками туда, где он сейчас находится на нашем блоге, я задал отступ слева 944px.

Подвижность блока

Можно выбрать плавающий или зафиксированный блок. Но советую вам выбрать все-таки плавающий блок, так как он привлекает внимание, и соответственно будет больше ретвитов, +1 и рекомендаций в Facebook.

Стиль блока

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

Свой стиль блока с кнопками подгоняйте под дизайн своего блога. Обязательно укажите Отступы между кнопками (я задал 5px), иначе они будут друг на друга налипать, и смотреться это будет не очень красиво. Если хотите, укажите Радиус закругления углов (задание радиусов начинается с верхнего левого угла).

Meta Tags and Links

Что это такое я, признаюсь, не знаю. Поэтому не стал ни переводить, ни удалять. Кто-нибудь из вас в курсе?

Не показывать в конкретных статьях и страницах

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

Вот и все. Как видите, настройки плагина Scrolling Social Sharebar просты.

Преимущества плагина

Данный плагин мне нравится тем, что он компактный в отличие от, например, плагина N Social Slide или WP Social Slider.

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

Расскажи своим друзьям в социальных сетях об этой статье! Мой хозяин будет тебе искренне благодарен 🙂 

А это самое главное. И все! Зачем еще что-то???

Благодаря тому, что плагин плавающий, он ВСЕГДА привлекает внимание посетителя. Человек прокрутил страницу — блок с кнопками за ним. И тут уж никуда не денешься, боковым зрением-то видно.

Плагин, как вы уже убедились, прост в настройке.

Он не сильно тормозит блог.

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

Внешний вид блока можно подогнать под дизайн своего блога. Это тоже важно.

Решенные недостатки плагина Scrolling Social Sharebar

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

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

вставьте выделенный код в тег head

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

На этом я заканчиваю свое повествование о плагине Scrolling Social Sharebar. Плагин прекрасный практически во всех отношениях. Так что смело ставьте его на свой блог.

По традиции прошу рассказать об этой статье своим друзья в социальных сетях. Спасибо! Пока-пока!

write a comment

20 комментариев

  1. Дмитрий
    апреля 07, 02:22 #1 Дмитрий

    Плагин хорош, это точно. Но думаю из за слишком выраженного контраста (окно плагина и черный фон за ним) вызывает у меня как у пользователя некоторый дискомфорт. Через пару-тройку прокруток страницы так и хочется его (окно плагина) закрыть. Думаю если за ним фон будет посветлей, то есть не будет такого резкого контраста то и данное окно плагина будет и заметно и раздражать глаз не будет. К сожалению на моем сайте именно по этой причине я его поставить не смогу, но плагин действительно хорош! Твитнул.

    Reply to this comment
    • Альберт Александров
      апреля 09, 23:15 Альберт Александров Author

      Да, придется постараться, чтобы вписать плагин в общий дизайн.

      Но видимо я к нему привык, и он мне глаз не мозолит =)

      Спасибо за ретвит =)

      Reply to this comment
  2. Антон Куликов
    апреля 10, 00:32 #2 Антон Куликов

    Здравствуй, Альберт!

    Скажи пожалуйста значёк Фейсбука специально не показывается или у меня что-то с настройками экрана?

    Замечательный плагин. Обязательно утяну к себе. Спасибо!

    Reply to this comment
  3. Дмитрий
    апреля 26, 21:10 #3 Дмитрий

    А что у вас за плагин внизу статьи, который соц. кнопки отображает?

    Reply to this comment
  4. Илья
    апреля 27, 08:57 #4 Илья

    Как увеличить ширину блока?

    Reply to this comment
  5. Юра
    мая 23, 18:03 #5 Юра

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

    Reply to this comment
    • Альберт Александров
      мая 23, 19:22 Альберт Александров Author

      Юрий, для настройки сайдбара не может быть универсального для всех сайдбаров видео-урока по настройке =) Я глянул Ваш сайт. У элементов сайдбара нет стилей оформления, так как Вы вставляли их как есть и им нужно придать стилей с помощью CSS. Есть бесплатный курс Евгения Попова по CSS 1popov.ru/bonuscourse/cssform. Если сами не хотите разбираться, можете нанять кого-нибудь

      Reply to this comment
  6. Дарья
    июня 12, 14:22 #6 Дарья

    Привет,очень интересная статься и прочитав её полностью я сразу хотела проголосовать- *ДА* Классный плагин...и тут у меня возник вопрос,а как можно установить эти голосования на своём сайте и так чтоб они ссылались на социальные сети?в данном случае проголосовать можно через Вконтакте Facebook и Twetter...зарание благодарна за ответ. =) =) =)

    Reply to this comment
  7. Надежда Пинчук
    сентября 19, 01:01 #7 Надежда Пинчук

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

    Пока сама такое решение не нашла. Очень хочется!!!

    Reply to this comment
  8. Алексендр
    октября 30, 23:49 #8 Алексендр

    Спасибо! Классная штука. Еще раз спасибо и за перевод!!!

    Reply to this comment
  9. Константин
    декабря 24, 20:36 #9 Константин

    Может плагин и неплох, но ввиду отсутствия кнопки Вконтакте абсолютно неактуален... Все-таки ВК — самый популярный в рунете ресурс, и игнорировать его невозможно. И еще момент. Как организовать размещение этого блока справа на «резиновом» сайте?

    Reply to this comment
    • Альберт Александров
      декабря 25, 18:57 Альберт Александров Author

      Да, Константин, я с Вами полностью согласен. Сам над этим размышлял. И попробовал встроить кнопку от ВК. Вроде получилось. Скачайте, проверьте на работоспособность business-vzakone.ru/downloads/scrolling-social-sharebar.zip. Не забудьте какой-то там код в тег HEAD вставить. Я уж не помню, какой это код... Насчет позиционирования для резиновых сайтов не знаю. Надо знания CSS освежить... Думаю, это возможно. Если найду решение, я Вам сообщю

      Reply to this comment

Add a Comment

Your data will be safe! Your e-mail address will not be published. Also other data will not be shared with third person.
All fields are required.