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

Что это такое?

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

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

Кнопки, показываемые в строке:

Вы можете убрать некоторые социальные сети из строки:

ВКонтакте

Twitter

Facebook

Мой мир

Одноклассники

Google plus

Яндекс

Внешний вид кнопок:

Полученный HTML код:

<script type="text/javascript" src="http://yraaa.ru/share/share_32x32.d3sn"></script>

32x32

Как использовать?

Разместите полученный HTML код в коде своего сайта или блога. Обратите внимание, в коде нет ссылок на текущий веб-сайт, блок с кнопками и изображениями значков хранится на стороннем ресурсе. Этот ресурс - безопасный и работающий сервис для хранения файлов.

Живая демонстрация

Детальная документация

Скрытие плюса. Если Вам нужны из списка только три-четыре социальные сети, а в выпадающем вниз списке нет нужды, то вы можете убрать лишнюю кнопку, кнопку плюс. Для этого в CSS (таблицу стилей) добавьте следующую строчку кода:

Code

#plus_32x32 {display:none}

Красным выделен используемый размер. Если Вы используете средний размер, то укажите 24x24, для самого маленького - 16x16.

Одна кнопка для всех сервисов. Вы можете скрыть из строки все социальные сети и сервисы, тем самым сохранив в строке только знак плюса.

Используется простой JavaScript код без лишних вставок, и дополнительно CSS код, который позволяет скрыть лишние сервисы из строки.

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

Ниже CSS стили, которые Вы можете редактировать дополнительно:

Прозрачная темная обводка выпадающего списка

Code

.over_menu_b {background:rgba(0,0,0,0.5)}

Белый фон выпадающего списка

Code

.menu_b {background:#FFF}

Ссылки в выпадающем списке

Code

.shrs {color:#000;text-decoration:none}
.shrs:hover {color:#000;text-decoration:underline}

Заголовки в выпадающем списке

Code