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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки: ,

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

  • Noory SanСайт автора комментария:
    http://NoorySan.ru
    14.01.2014

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

  • ВиталийСайт автора комментария:
    http://nashagotovka.ru
    14.01.2014

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

  • Алексей ЕршовСайт автора комментария:
    http://wordpress-life.ru
    17.01.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    17.01.2014

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

  • Андрей
    20.01.2014

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

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

  • AntonСайт автора комментария:
    http://sonnik.mus3.ru/blog/
    22.01.2014

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

  • АндрейСайт автора комментария:
    http://spb-autoschool.ru
    24.01.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    24.01.2014

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

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

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

  • СергейСайт автора комментария:
    http://mgluka-blog.ru/
    24.01.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    29.01.2014

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

  • АлександрСайт автора комментария:
    http://sunduk.com/blog
    29.01.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    29.01.2014

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

  • СергейСайт автора комментария:
    http://mgluka-blog.ru
    30.01.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    30.01.2014

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

  • ThunderboltСайт автора комментария:
    http://remontiruemvannu.ru/
    03.02.2014

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

  • ZdorovkoСайт автора комментария:
    http://zdorovko.info/
    09.02.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    09.02.2014

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

  • Ирина
    11.02.2014

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

  • АлександрСайт автора комментария:
    http://www.statejka.ru/
    02.03.2014

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

  • ВиталийСайт автора комментария:
    http://asianvilla.ru
    02.03.2014

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

  • ЕвгенийСайт автора комментария:
    http://websektor.ru
    15.03.2014

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

  • ShadowСайт автора комментария:
    http://noorysan.ru/
    23.03.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    23.03.2014

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

  • spasiboСайт автора комментария:
    http://samuchi.ru/
    24.03.2014

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

  • Артем
    02.05.2014

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

  • Маняша
    03.05.2014

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

  • Фрол
    14.05.2014

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

  • Тарас
    15.05.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    16.05.2014

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

  • ЕленаСайт автора комментария:
    http://seportal.ru
    24.05.2014

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

  • AndreyСайт автора комментария:
    http://youwebcams.net
    27.05.2014

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

  • GeekuzСайт автора комментария:
    http://geekuz.com/
    30.05.2014

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

  • mvin
    02.06.2014

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

  • ЮрийСайт автора комментария:
    http://bloger-man.ru
    18.06.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    18.06.2014

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

  • Ира
    20.06.2014

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

  • Бурул
    21.06.2014

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

  • KontenСайт автора комментария:
    http://divier.ru/
    26.06.2014

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

  • СергейСайт автора комментария:
    http://yurist-online.at.ua
    01.08.2014

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

  • УкрДомофонСайт автора комментария:
    http://ukrdomofon.in.ua
    02.08.2014

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

  • ЮлияСайт автора комментария:
    http://k-kolorit.ru
    29.08.2014

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

  • seoonly.ruСайт автора комментария:
    http://seoonly.ru/
    28.09.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    28.09.2014

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

  • F5SeoСайт автора комментария:
    http://f5seo.ru/
    11.10.2014

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    12.10.2014

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

  • ЕленаСайт автора комментария:
    http://sitesforu.ru
    14.10.2014

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

  • ВладимирСайт автора комментария:
    http://1st-finstep.ru
    16.01.2015

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    16.01.2015

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

  • GiesgratСайт автора комментария:
    http://www.giesgrat.ru/
    25.02.2015

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    25.02.2015

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

  • АлексейСайт автора комментария:
    http://bombatelo.ru
    10.03.2015

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

  • SalikСайт автора комментария:
    http://salik.biz
    23.10.2015

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

  • Александр
    20.12.2015

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

  • Ivan
    14.06.2016

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

  • ViktorСайт автора комментария:
    http://anekdotikitut.blogspot.com/
    21.08.2016

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

  • XstroyСайт автора комментария:
    http://xstroy.com
    22.08.2016

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

  • Радик
    22.11.2016

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

  • Радик
    22.11.2016

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

  • ВикторияСайт автора комментария:
    http://ideikin.ru/
    15.02.2017

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

Оставить комментарий:

Условия комментирования:
Допускается использование тегов (href, strong, em, code).
Не по теме или неуместные комментарии будут удалены или отредактированы.
Адрес электронной почты никогда не будет опубликован.

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

Все поля, отмеченные "*" обязательны к заполнению.