Социальные кнопки на сайт: простое решение

Это лишь вариант установки социальных кнопок на сайт, причём на абсолютно любой и с минимумом телодвижений.

Уже давно убрал с блога плагины социальных кнопок, став использовать простенький скрипт кнопок от Яндекса. Их минималистичность и простота установки подкупает. До недавнего времени у меня сразу после статьи стоял вот такой социальный блочёк:

Простые социальные кнопки от Яндекса

Но его незаметность и наличие в зоне внимания только в районе окончания статьи меня не устраивала:

  • А как же лента комментариев и основная текстовая портянка?
  • Когда может возникнуть желание читателя жмакнуть социальную кнопку?

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

Кнопки счётчиков Фейсбук и Твиттер

Поэтому хотелось такие кнопки иметь всегда на виду, а примером такой реализации как раз был плагинчик счётчика подписчиков Фейсбука и Твиттера (Simple Counters), уже применяющийся на блоге в виде приклеенного блока справа…

Не ходя вокруг, да около, применил самый надёжный способ со времён Древнего Китая 🙂 Хочешь чему-нибудь научиться, слямзи похожее и допили под свои требования.

Как-то так сложилось, что основной мой браузер Опера, а в нём при правом щелчке мыши есть пунктик «Проинспектировать элемент», который прелестно показывает код любых элементов, вытягивая всё, что в данный момент связано с отображением выбранного блока в браузере. Поэтому выдрал всё css-оформление и был приятно удивлён простоте решения и лаконичности результата.

Собственно вот и сам код, уже с социальными кнопками-счётчиками, как у меня в блоге:

 

 

 

 

 

 

 

Блок прекрасно лепится к любой из сторон браузера, легко корректируются его размеры и параметры привязки, а внутренний div позволяет стандартными способами центрировать или жать влево-вправо. Кроме того, туда можно запилить не только социальные кнопки, но и любую текстовку или баннер.

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

Скажу честно, кроссбраузерность не тестировал, но ведь это результат многолетней положительной работы авторов плагина Simple Counters (именующего себя, как Простые счётчики), за что им большое спасибо 🙂 Работает в Опере, Мозиле и ИЕ8 последних версий на ура.

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

Мне в настоящий момент больше всего понравился блок со счётчиками, в котором пока представлены Фейсбук, ВКонтакте, Твиттер, Мой мир и Одноклассники, т.е. основной набор для русскоязычной аудитории. Счётчики раскрываются не сразу, а по мере получения информации о количестве социальных ссылок в своей сети, что, кроме всего прочего, тоже привлекает к ним внимание человека уже начавшего чтение статьи.

Новые социальные кнопки в статье 9 причин, не дающих мне заработать в сети

Этот блок путём нехитрых манипуляций в стиле первого div’а может быть расположен где угодно, но стоит понимать, что он плавает в собственном слое и, к примеру, в мобильных устройствах может оказаться над текстовой частью. Мои шаблоны достаточно пустынны, поэтому я чуть отодвинул кнопочки от края и отцентрировал их в блоке. Объёмность, оторванность от границ довольно интересно смотрится.
Я прав?

P.s. А вот пример прикручивания таких социальных кнопок за пару минут к недавно рождённому блогу NoorySan.ru со светлым фоном.

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

  1. Noory San:

    Подтверждаю!!!!
    И людям нравится. Им всегда нравится, когда удобно))

  2. Виталий:

    Да, это действительно самый простой способ. И самый рабочий. У меня на сайте так вставлены соц иконки. Никаких проблем за 2 года почти не было с ними.:)

  3. Алексей Ершов:

    Классные кнопочки! Очень быстро «лямзятся»! =) С настройками позже разберусь.
    А в примере кода у вас отсутствует ссылка на тот самый скрипт Яши share.js

  4. Xstroy:

    Точно потерялся 🙂 Ща поправлю.

  5. Андрей:

    А мне именно яндекс кнопки не очень впечатляют…
    С некоторыми экзотическими шаблонами они работают и в правду очень «кривовато»

    Ну так как у многих нет выбора плагин или скрипт, я склоняюсь к скрипту (меньше нагрузки )

  6. Anton:

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

  7. Андрей:

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

  8. Xstroy:

    Спасибо Андрей. Когда-то встречал уже его, но тогда не было интереса. Сейчас социалки правят бал.
    Это любопытный сервис для социального шаринга, хотя навскидку уже увидел то, что мне не понравилось:

        в конце ссылки добавляется код, очевидно для работы счётчика, но по факту ведь это новая страница и нужно сразу готовить редирект?
        обилие сервисов радует, но вот порулить их расположением так сразу не удалось (порядок меняется легко в коде, а вот как расположить их в 2 ряда, если выбирать весь список?)
        чужая ссылка (на сервис) всегда не нравилась мне на моих сайтах, а гугл давно читает скрипты…
        если выбрать отражение цифр возле каждого счётчика, то лента удлинится в два раза, хотя правильнее было бы сделать вывод в сторону, хотя возможно это пока проблема вертикального расположения
        опять же пришлось использовать свой блок, чтобы приклеить к одной стороне экрана…

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

  9. Сергей:

    Подскажите плиз! Установил плагин кнопок соц. сетей, но в нем много ошибок по валидности. Как и в каком файле плагина исправить этот код?

  10. Xstroy:

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

  11. Александр:

    Актуально. Сейчас уже все массово поставили, или только ставят соц. кнопки себе на сайты. Интересно то, что некоторые сайты этики кнопками просто завалены, по пару дублей одинаковой кнопки. А сегодня же встретил сайт, который вспаивающим окном умоляет поставить лайк и дает одну на выбор, из трех, соц. сетей, даже с коллегой пошутил на тему нового, секретного, меда продвижения.. «умоляние». Нужно что бы было 100%, но что бы не навязчиво, ибо представьте себе, что вы за 3 часа посетили 30 сайтов, 25 с которых было просто напрочь закиданы кнопками. Захотите ли вы даже просто нажимать на кнопки, или что хуже вообще их видеть? Одни и тоже, повсюду.. (в основном).

  12. Xstroy:

    Это лишь следствие активного учёта ссылочных сигналов. Исходя из цикличности сеопроцессов можно предположить смерть пользы от социалок к исходу этого года… Сейчас до лета грядёт пик подъёма.

  13. Сергей:

    Я не имею цель получить заветную ссылку с блога, а хотелось разобраться во всем в числе и с валидностью. Так как я новичок в этом деле. Многие блоггеры пишут о валидности, что от нее завит так же продвижение блога.
    Ваш совет учел и переделал. Количество ошибок уменьшилось с 169 до 13. Буду дальше разбираться. Спасибо!

  14. Xstroy:

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

  15. Thunderbolt:

    Разные мнения есть на счет соц.кнопок, но лично ставлю их везде, хуже от этого не станет.

  16. Zdorovko:

    А я поставил себе мелкие через «одна кнопка» или как там называется сервис. Поставил тогда по незнанию, а теперь мб сейчас поменяю на красивые. Хотя их никто никогда не клацает на большинстве блогов. За код спасибо)

  17. Xstroy:

    На большинстве блогов не клацают, но когда статья стоит внимания, тогда ищешь, как её оставить для себя и потомков )

  18. Ирина:

    Спасибо большое за качественное издание и думаю, буду постоянной вашей читательницей.

  19. Александр:

    Спасибо автору за такую хорошую статью! Видно, что старается.

  20. Виталий:

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

  21. Евгений:

    Хорошее решение не думал что кнопки от Яндекса можно использовать в вертикальной форме. Использую данный скрипт на своём блоге горизонтально.

  22. Shadow:

    Почему-то на NoorySan при share через Твиттер действуют двойные стандарты. В одних случаях счётчик сохраняется и видно 100-150 ретвитов. А в других случаях он обнуляется. Хотя ссылка ретвитнута нипоразу.

  23. Xstroy:

    Если ты на странице делаешь твиты без обновления через социальные кнопки, то цифры увеличиваются независимо от удачности попыток, но после обновления страницы счётчик покажет реальное число твитов (по идее столько, сколько отдаёт твиттер). Нулевых показаний не вижу.

  24. spasibo:

    Действительно, очень удобные кнопки, первый раз такие встречаю. Утащил:)

  25. Артем:

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

  26. Маняша:

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

  27. Фрол:

    Очень симпатично получается, и самое главное все просто и понятно, спасибо админу

  28. Тарас:

    Социальные кнопки это очень хорошо. Но стоит другой вопрос… Как людей привлечь к активному нажатию на них? большинство простых людей сёрфенгующих интернет, не знают что такое эти самые кнопки, зачем их жать, и какая от них польза. Мне кажется что идея кнопок должна измениться и давать человеку какую-то пользу помимо того что просто лайк куда-то улетел, или просто добавилась ссылка на страницу.

  29. Xstroy:

    Ссылки в социальные сети ставят те, кто там постоянно крутится. Одни делают закладки для себя, другие — делятся с социальным кругом.
    Хотя мысль интересная…
    Один из вариантом «заставить» лайкнуть или твитнуть — использовать плагины скрывающие контент, к примеру платный BoomSocial, хотя у меня на одном из блогов работает и его бесплатный аналог 🙂
    Это больше похоже на принудиловку, но во многих случаях работает на ура.
    В некоторых блогах используется схема трансляции чужих свежих твитов на блоге, что тоже является мотивирующим фактором для блогеров.

  30. Елена:

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

  31. Andrey:

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

  32. Geekuz:

    Я у себя в блоге писал про сервисы полезные на сайте (Кнопки шаринга, Сервисы комментирования, Сервисы онлайн консультации). Если что, вот ссылка — http://geekuz.com/2014/04/26/poleznye-servisy-dlya-bloga/
    Там их куча, и когда нахожу новые — пополняю список.

  33. mvin:

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

  34. Юрий:

    Лично я пользуюсь кнопками от Pluso. Внешний вид у них привлекательный. Удобно после публикации статьи ее анонсы в социалки закидывать.

  35. Xstroy:

    Попробовал у тебя ) Симпатично и цифирки радуют. Интересное решение.

  36. Ира:

    Неужели еще кто-то клацает на кнопочки эти? Я думала, что прошел век социального расшаривания. Хотя, если честно, я сама иногда, если статья интересная, нажимаю их. Ваши кнопочки мне очень нравятся. Стильно и аккуратно.

  37. Бурул:

    А использование плагина социальных кнопок уже утратило свою актуальность? Читаю и вижу, что никто им не пользуется? У меня на сайте такой плагин поставлен, и работает неплохо. Хотя сравнивать не с чем, потому что другими не пользовалась.

  38. Konten:

    Pluso меня тоже радует. Хотя вот есть приложение Uptolike раздражает что когда выделяется текст, то сразу выскакивает это приложение. А так вроде тоже хорошее + оно соединено с seopult. Вот если сравнивать эти 2 приложения то Uptolike делает меньше рекламу на себя, а на Pluso как нажимаешь выбрать сервис которым делиться, так мышка сразу на кнопке по переходу на их сервис.

  39. Сергей:

    Интересненько получилось с кнопочками, креативненько и всегда под рукой, но смотрю мало нажимают))

  40. УкрДомофон:

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

  41. Юлия:

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

  42. seoonly.ru:

    Все верно, яндекс апи проще и лучше всего

  43. Xstroy:

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

  44. F5Seo:

    Кнопки от Яндекса держатся без всяких сбоев, но тут проблема в другом, как часто на эти самые кнопки хотят нажимать? Стоит ли их вообще размещать, если за несколько месяцев может быть всего несколько нажатий (в лучшем случае).

  45. Xstroy:

    Тут вопрос уже не о кнопках, а о качестве того, что написано на странице с социальными кнопками.
    Сегодня соцсигналы двигают статьи в ТОП (лично проверял), да и сам частенько юзаю их для сохранения интересной статьи или чтоб поделиться с читателями социальных аккаунтов.
    Если же то, о чём пишешь никому особо не нужно, пользы от кнопок — ноль, только увеличение веса страницы и скорости загрузки её в браузер пользователя.

  46. Елена:

    Да, это действительно самый простой способ. И самый рабочий. У меня на сайте так вставлены соц иконки. Никаких проблем за 2 года почти не было с ними.:)

  47. Владимир:

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

  48. Xstroy:

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

  49. Giesgrat:

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

  50. Xstroy:

    Влияют, особенно когда до топа осталось чуть-чуть (правда не 1-2, а десятки и из разных социалок). На сайтах кнопки социалок работают лишь тогда, когда контент того стоит, а иначе … да, только ручками и регулярно.

  51. Алексей:

    Хорошая информация, долго искал где будет всё чётко написано, теперь люди запросто заходят на мой сайт и оставляют — понравилось) встречаю в инете свои статьи очень приятно. Рекомендую всем статью прочитать.

  52. Salik:

    Лично я, как пользователь не пользуюсь такими кнопками, если хочу показать ссылку на какой-то сайт или статью, то просто копирую ссылку и вставляю к себе на стену, но как веб разработчик на все сайты ставлю соц. кнопки, так как все-таки юзверь народ загадочный и любит тыкать на эти кнопочки :)(

  53. Александр:

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

  54. Ivan:

    Очень удобные кнопки. Спасибо огромное за статью!

  55. Viktor:

    Да,действительно кнопки от Яши хорошо смотрятся и ставятся легко.Но почему-то кнопка Фейсбука не работает,а остальные всё прекрасно показывают!Может при установке чего неправильно сделал или у всех такая проблема?

  56. Xstroy:

    Везде, где ставил эти социальные кнопки всё работает без проблем. В моей статье лишь предложен вариант изменения стилей для отображения кнопок сбоку страницы.
    Можно взять и опробовать оригинальный код скрипта блока «Поделиться» у Яши, ссылка есть в статье.

  57. Радик:

    Хоть я не сильно люблю это социальные кнопки. Но они помогаю иногда поделиться новостью со своим близким человеком или с друзьями. Пора бы их заменить более продвинутым решением в виде плюсом или минусом )

  58. Радик:

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

  59. Виктория:

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

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

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