Share42.com — меняем иконки социальных сетей на произвольные

как сменить иконки share42Данная статья для тех, у кого на сайте установлен скрипт социальных кнопок Share42.com. Изменить иконки самих кнопок на произвольные - это дело одной минуты. Вся трудность - это подобрать новые изображения, которые будут удовлетворять вашим требованиям.

Будем считать, что вы уже подобрали себе иконки. Есть условие - их нужно делать одинаковыми по ширине (по высоте. если у вас вертикальное расположение).

Я себе подобрал следующие:
социальные кнопки share42

Выше представлен скрин с уже установленными кнопками. А вот так выглядит сама заготовка у меня на сервере:
сменить иконки share42

Обратите внимание, что все кнопки расположены на одной картинке и между самими иконками нет отступов - все подогнано до пикселя друг к другу. Это очень важно, т.к. скрипт share42.com отрезает автоматически данные картинки и вешает на них функционал по заданному параметру отрезки (об этом далее).

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

По умолчанию скрипт отрезает картинки размером 32px. Как видите - у меня они намного шире. Делается это просто:

<a rel="nofollow" style="display:inline-block;vertical-align:bottom;
width:32px;height:32px;margin:0 6px 6px 0;padding:0;outline:none;
background:url('+f+'icons.png) -'+32*j+'px 0 no-repeat" href='+s[j]+' target="_blank">

Здесь представлена последняя часть кода из файла share42.js, который мы сейчас скорректируем под свои размеры кнопок

<a rel="nofollow" style="display:inline-block;vertical-align:bottom;
width:80px;height:28px;margin:0 6px 6px 0;padding:0;outline:none;
background:url('+f+'icons.png) -'+80*j+'px 0 no-repeat" href='+s[j]+' target="_blank">

Здесь я сделал ширину (width) в 80px, а высоту (height) 28px, т.к. именно такого размера мои кнопки. Далее необходимо было увеличить длину "отрезки" кнопки до нужных 80px (было '+32*j+' и стало '+80*j+').

При помощи параметра margin можете скорректировать отступ между кнопками социальных сетей.

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 29 комментариев
  1. tanichka (38 комм.):
    http://sak-voyag.ru/

    А еще можно поставить кнопки со своей картинкой, например, как у меня :).

  2. Anna (7 комм.):
    http://krasavolos.com

    Симпатичные кнопочки)) А как можно в коде прописать расстояние между кнопками, чтобы они не были слиты в одну картинку, а было расстояние, и его можно было бы менять? Заранее спасибо за ответ))

    • Виталий (1674 комм.):

      а чем вам не нравится предпоследний абзац статьи? в нем аккурат про отступы говорится.

      • Anna (7 комм.):
        http://krasavolos.com

        Сорри, не доглядела.. 🙂 уже иду читать, спасибо!))

  3. Андрей Долгов (7 комм.):
    http://smartrunet.ru

    Так-то вроде и неплохо все смотрится, но как ты узнаешь, сколько человек разместило твой пост в социалках и в каких именно?

    • Виталий (1674 комм.):

      скрипт share42.com и не предполагает отображение счетчика. для этого ставим кнопки самих социалок, либо пользуемся плагином типа такого http://mojwp.ru/social-metrics.html

  4. Никита Рябин (11 комм.):
    http://pro97.ru/

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

    • Виталий (1674 комм.):

      полностью согласен с вами, Никита.

      "Создать и раскрутить блог" так же может каждый программист и специалист по оптимизации и поисковому продвижению.

      Есть предложение - закроем свои блоги, т.к. они не нужны никому)))

  5. Илья (2 комм.):

    Подскажите как сделать кнопку "Порекомендуйте это под именем в Google+" в шаре42?

    • Илья (2 комм.):

      можете ответить мне?
      Поставил скрипт кнопок, но там кнопка Google+ другая.
      мне нужна кнопка как у вас - как это сделать?
      или плагин надо ставить?

      • Виталий (1674 комм.):

        кнопка g+ как у меня где?
        справа плавающий набор через плагин http://mojwp.ru/socialize-it.html
        снизу простая подмена картинок

  6. Валентин (4 комм.):
    http://ssor.net.ru

    Виталий, а с кнопками от яндекс такое же прокатит?
    Вот их скрипт:

     
    Картинки у меня есть - это не проблема. Для меня проблема настроить код и прописать путь к картинке, и ещё в каком формате файла она должна быть?

    Просто в ССК лезть никак не хочу. У меня сайт на Друпале 7, хочется, как Яндекс кнопочки просто в блок поставить..

  7. Сергей (2 комм.):

    А можно взять ваши кнопки и поставить себе на блог?

  8. alf2012 (1 комм.):
    http://komfortnyj-dom.info

    На блоге стоит скрипт share42.com и скрипт сервиса get.2leep.com. Кнопки появляются только после загрузки картинок get.2leep, а этот сервис часто тормозит. Как сделать, чтобы кнопки грузились раньше?

    • Виталий (1674 комм.):

      Вам нужна асинхронная загрузка. Обращайтесь к разработчикам 2leep, либо гляньте, может у них есть такое (когда код предоставляют).

      Если что-то сильно грузит сайт - от этого нужно избавляться чем скорее, решать проблему. Если Вам, как владельцу сайта, не нравится такая штука, то что можно сказать о посетителях, который первый раз на сайт приходят?

  9. yriim (1 комм.):

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

    • Виталий (1674 комм.):

      а зачем указывать путь? разве вы не можете просто подменить стандартные на свои с таким же именем?)))

  10. Belverk (2 комм.):

    Здравствуйте. У меня возникла проблема с share42 на Joomla 1.5. Ставил по инструкции,настроил иконки, скачал скрипт, выбрал "статический сайт", прописал css, теперь появляется только бокс для иконок, а иконки не отображаются. В чем может быть проблема?
    З.Ы. сайт на локалке.

    • Виталий (1674 комм.):

      З.Ы. скорее всего и будет ответом на ваш вопрос

      • Belverk (2 комм.):

        И какая разница, ведь доступ в интернет свободный, и иконки которые не отображались, тоже на локалке

        З.Ы. включил плагин "cash">использовать кеш браузера>yes и все заработало.

  11. Александр (2 комм.):
    http://www.uznatvse.ru

    Скажите, а как сделать кнопки полупрозрачные как на сайте share42 ??

    • Виталий (1674 комм.):
      http://mojWP.ru/

      http://mojwp.ru/prozra4nost-css.html

  12. Александр (2 комм.):
    http://www.uznatvse.ru

    Спасибо большое, всё получилось! )

  13. Рита (2 комм.):

    Здравствуйте, Виталий! А как отрегулировать отступ кнопок от контентной части. Они прямо прилипли к ней вот скрин. Посмотрите, потом уберете ссылку. http://prntscr.com/8ffalw И еще вопросик, как контентную часть уменьшить или расширить?Спасибо!

    • Виталий (1674 комм.):
      http://mojWP.ru/

      Для блока с кнопками задайте margin-right: 10px;

  14. Сваха.Net (1 комм.):
    http://xn--80aae3dwa.net

    Спасибо! Все, меняю иконки социальных сетей)

  15. Евгения (1 комм.):
    http://www.davai-pojenimsya.ru/

    А мне вот какие кнопочки сделали )) круглинкие и крутятся ))

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 12.81MB | MySQL:91 | 0,379sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html