Плавающие кнопки социальных сетей от Share42.Com

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

 Для начала переходим на сайт 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.

Вот и все!

Введите свой email адрес для того, чтобы подписаться на мой блог:


knopkisoc

Плавающие кнопки социальных сетей от Share42.Com: 12 комментариев

    1. Константин

      Андрей спасибо, наверное не заметил.
      Ну в принципе, мой способ изменения кнопок может пригодится для добавления в них своей какой-нибудь особенной кнопки (которой нет на сервисе) — нужно только создать иконку (более красивую нежели на сервисе) и прописать ссылку.

  1. Алексей

    Добрый день!
    Сколько не пытаюсь вставить данные иконки, не появляются и всё тут! Уже несклкьо часов мучаюсь. Может профессиональным взглядом поймете в чем дело?
    Спасибо.

  2. Уведомление: Как узнать какие плагины использует сайт? - онлайн сервис whatwpthemeisthat.com | MnogoBlog

  3. Vikky

    На самом деле я пользовался этими share кнопками долгое время и был доволен, но постоянно не хватало функционала и гибкости! Поэтому, поискав, нашёл ещё один довольно популярный конструктор соц. кнопок — goodShare. Плюсы: нет рекламы, гибкие настройки, быстрая загрузка на странице, красивый внешний вид, наличие международного лого ВКонтакте «VK» (ни в одном подобном сервисе — этого нет.. ну разве что у AddThis). Короче говоря, классные кнопки и советую посмотреть. Вот ссылка: http://share.cntrlmrktng.ru/

  4. Уведомление: Мобильная и широкоформатная версия сайта: вручную и через плагины | MnogoBlog

Добавить комментарий