Для начала переходим на сайт 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="https://mnogoblog.ru/share42/share42.js"></script>
<script type="text/javascript">share42('https://mnogoblog.ru/share42/',150,20)</script>
Следующие цифры в коде можете поменять:
150 – расстояние от начала страницы до плавающей панели (в пикселях);
20 – расстояние от верха видимой области страницы до плавающей панели (в пикселях).
</head>
<body>
<div class="share42init" data-url="<?php the_permalink() ?>" data-title="<?php the_title() ?>"></div>
<script type="text/javascript" src="https://mnogoblog.ru/wp-content/plugins/socicon/share42.js"></script>
<script type="text/javascript">share42('https://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="Распечатать"','"https://mnogoblog.ru/feed" title="Подписаться на RSS сайта"','"http://share42.com/" title="Share42.com - Бесплатный скрипт кнопок социальных закладок и сетей"'
Далее вам нужно поменять файл icons.png, откройте его в редакторе изображений (я использую Photoshop) и поменяйте расположение кнопок в соответствии с тем как вы изменили ссылки файла share42.js.
Вот и все!
Красивые кнопочки получаются, поставил себе на сайт такие же, спасибо за статью!
классный блок!! очень полузную информацию вы даете!!!
А у меня что-то не получается, не пойму в чем проблема?
Порядок иконок можно менять путем перетаскивания мышью)
Зачем всё усложнять то)?
Андрей спасибо, наверное не заметил.
Ну в принципе, мой способ изменения кнопок может пригодится для добавления в них своей какой-нибудь особенной кнопки (которой нет на сервисе) – нужно только создать иконку (более красивую нежели на сервисе) и прописать ссылку.
У меня сложность – кнопки не отображаются, куда бы я не вставляла код!
Добрый день!
Сколько не пытаюсь вставить данные иконки, не появляются и всё тут! Уже несклкьо часов мучаюсь. Может профессиональным взглядом поймете в чем дело?
Спасибо.
Здравствуйте! У меня что-то не появляется. В чем может быть причина не пойму. Кстати, по плагину My Videotag – его нет на официальных сайтах, которые вы указали. ((
На самом деле я пользовался этими share кнопками долгое время и был доволен, но постоянно не хватало функционала и гибкости! Поэтому, поискав, нашёл ещё один довольно популярный конструктор соц. кнопок – goodShare. Плюсы: нет рекламы, гибкие настройки, быстрая загрузка на странице, красивый внешний вид, наличие международного лого ВКонтакте “VK” (ни в одном подобном сервисе – этого нет.. ну разве что у AddThis). Короче говоря, классные кнопки и советую посмотреть. Вот ссылка: “share.cntrlmrktng.ru/”
А как сделать эти кнопочки прозрачными? Просто когда с телефона на сайт заходишь они мешают. Спасибо!
У меня всё работает