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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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