Плавающие кнопки социальных от share42.com

Опубликовано: 01.09.2018

Для начала переходим на сайт http://share42.com/ru

Скачать исходники для статьи можно ниже

В первом пункте нам предлагается выбрать размер иконок (32×32, 24×24, 16×16) и сами иконки сервисов, советую выбрать следующие:

ВКонтакте, Facebook, Mail.ru, Twitter, Google Plus

а в прочих иконках можно выбрать следующее:

Распечатать и RSS

Причем порядок выбора разницы не имеет, что очень плохо, так как сами кнопки будут располагаться в том порядке, который нравиться разработчику http://share42.com/ru , а не нам (пользователям), хотя если покопаться в коде, то и этот недостаток можно изменить — про решение данной проблемы расскажу в конце статьи.

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

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

Следующий пункт «Выбор нужных опций».

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

Далее выбираем кодировку UTF-8, язык подсказки Русский, остальные три (или две если вы не выбрали RSS кнопку) опции можете настроить на свое усмотрение.

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

В четвертом пункте (он состоит из 7 подпунктов) рассказывается как нужно установить данный скрипт на ваш сайт:

Скачиваем архив со скриптом (в третьем пункте есть кнопка «Скачайте готовый скрипт» нажмите на нее), разархивируем его на своем компьютере, далее закачиваем его на свой хостинг (ну например через программу Filezilla), закачайте в корневую папку (на моем хостинге она такая /public_html/), если вы закачали в корневую папку, то во 3-м подпункте указываете путь как в примере, то есть http://вашсайт.ru/share42/

В 4-м подпункте выбираем тип сайта WordPress.

В 5-ом подпункте появился код, который нужно вставить в шаблон вашего сайта, копируем данный код.

<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div> <script type="text/javascript" src="http://mnogoblog.ru/share42/share42.js"></script> <script type="text/javascript">share42('http://mnogoblog.ru/share42/',150,20)</script>

Следующие цифры в коде можете поменять:

150 — расстояние от начала страницы до плавающей панели (в пикселях);

20 — расстояние от верха видимой области страницы до плавающей панели (в пикселях).

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

На своем сайте я вставил данный код в шапке (header.php) сразу после тега body, у меня это выгладит так:

</head> <body> <div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div> <script type="text/javascript" src="http://mnogoblog.ru/wp-content/plugins/socicon/share42.js"></script> <script type="text/javascript">share42('http://mnogoblog.ru/wp-content/plugins/socicon/',0,0)</script> <div id="page"> <div id="header">

После этого на вашем сайте должны уже появиться кнопки, но для того, чтобы они выглядели красиво, необходимо добавить еще стиль css для этих кнопочек, поэтому переходим опять в Панель управления вашим сайтом выбираем в левом меню закладку «Внешний вид», далее подпункт «Редактор», и выбираем справа самый последний шаблон «Список стилей» (style.css).

Переходим в нем в самый конец и вставляем код, который расположен в подпункте 6 сайта http://share42.com/ru

#share42 { position: fixed; z-index: 1000; } #share42 { padding: 6px 6px 0; background: #FFF; border: 1px solid #E9E9E9; border-radius: 4px; } #share42:hover { background: #F6F6F6; border: 1px solid #D4D4D4; box-shadow: 0 0 5px #DDD; } #share42 a {opacity: 0.5} #share42:hover a {opacity: 0.7} #share42 a:hover {opacity: 1}

Вот и все ваши кнопки стали плавающими и красивыми.

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

Для решения этой проблемы вам нужно поменять код в файле share42.js в архиве, который мы скачали в 3 пункте http://share42.com/ru . Для этого откройте файл share42.js в редакторе кода (я использую Dreamweaver) и поменяйте порядок ссылок, вот в этой части кода:

onclick="window.open(\'http://www.facebook.com/sharer.php?u='+u+'&t='+t+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0\');return false" title="Поделиться в Facebook"','"http://www.google.com/bookmarks/mark?op=edit&output=popup&bkmk='+u+'&title='+t+'" title="Сохранить закладку в Google"','"#" onclick="window.open(\'https://plusone.google.com/_/+1/confirm?hl=ru&url='+u+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0\');return false" title="Добавить +1 и поделиться в Google+"','"http://www.liveinternet.ru/journal_post.php?action=n_add&cnurl='+u+'&cntitle='+t+'" title="Опубликовать в LiveInternet"','"http://connect.mail.ru/share?url='+u+'&title='+t+'" title="Поделиться в Моем Мире@Mail.Ru"','"#" onclick="window.open(\'http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl='+u+'&title='+t+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0\');return false" title="Добавить в Одноклассники"','"#" onclick="window.open(\'http://twitter.com/share?text='+t+'&url='+u+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=550, height=440, toolbar=0, status=0\');return false" title="Добавить в Twitter"','"#" onclick="window.open(\'http://vk.com/share.php?url='+u+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0\');return false" title="Поделиться В Контакте"','"http://zakladki.yandex.ru/newlink.xml?url='+u+'&name='+t+'" title="Добавить в Яндекс.Закладки"','"http://my.ya.ru/posts_add_link.xml?URL='+u+'&title='+t+'" title="Поделиться в Я.ру"','"#" onclick="print();return false" title="Распечатать"','"http://mnogoblog.ru/feed" title="Подписаться на RSS сайта"','"http://share42.com/" title="Share42.com - Бесплатный скрипт кнопок социальных закладок и сетей"'

Далее вам нужно поменять файл icons.png, откройте его в редакторе изображений (я использую Photoshop) и поменяйте расположение кнопок в соответствии с тем как вы изменили ссылки файла share42.js.

Вот и все!