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

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

Рад представить вашему вниманию свой новый бесплатный сайт-сервис — Share42.com — генератор скрипта кнопок социальных закладок и сетей. Идея подобного сервиса давно витала в моей голове, еще примерно с тех времен, когда я выкладывал на этом блоге свои скрипты социальных закладок. Но воплотить ...

Полезные комментарии (2)
Комментарии (405)
  1. 1
    css

    Доброе время суток! Благодарю за чудесный скрипт!
    Но у меня тут небольшая проблема возникла, надеюсь на Вашу помощь (в сервисе отзывово на странице скрипта писать не стала, там почти все вопросы без ответа)
    Ставлю я скрипт на вп. Пока тестирую на локале. И счётчики не всплывают, а располагаются прямо на кнопках. Можно это как-то исправить, чтоб было как в демо?
    Заранее спасибо!

    • 2

      Вы выполнили не все пункты установки. В 6-м пункте указаны стили, которые нужно добавить для счетчика.

      • 3
        css

        Благодарю за ответ!
        Но стили же ствить не обязательно (там так написано), тем более, что там я не увидела никаких признаков стилей конкретно для display спана со счётчиками, лишь оформление для общего блока.
        И я вставила эти стили в таблицу сайта — никакого эффекта для счётчиков.

        • 4

          Но стили же ствить не обязательно (там так написано)

          Про счетчики такого не написано — http://hkar.ru/kVZq

          • 5
            css

            хм… Я не вижу этого кода. Вижу только первое окошко со стилями для контейнера.
            Пруф: http://i.imgur.com/XqafZuS.png
            Странно… Смотрю в лисе, скрипты включены. Наверное, какой-то косяк браузера.

            Спасибо за ответ! Виноват оказался мой браузер. :) Наверное.
            Ваш скрипт — лучший!

      • 6
        css

        Я криво, конечно, но решила.
        Если интересно:
        #share a span
        {visibility:hidden;display:block;text-align:center;padding:1px 2px;
        position:absolute;top:-30px;font-size:14px;line-height:14px;min-width:20px;
        background:#FFF;border:2px solid #E3E3E3;}
        #share a:hover span
        {visibility:visible !important;top:-24px;}
        #share a span:before,#share a span:after
        {position:absolute;left:0;z-index:0;content:»»;border-style:solid;border-width:8px 8px 0 8px;}
        #share a span:before
        {border-color:#E3E3E3 transparent;bottom:-10px;}
        #share a span:after
        {border-color:#FFF transparent;bottom:-8px;}

        #share — это у меня общий контейнер. С этим кодом счётчики появляются сверху. Если задать спанам транзишен, то из-за разницы в высоте спана до и после ховер-события, они будут красивенько опускаться к кнопкам ) И, да, кнопки у меня 20х20, поэтому, если делать их крупнее, то можно и контейнеры спанов увеличить.
        И, естественно, сами ссылки должны иметь position либо relative, либо absolute.

  2. 7
    Makk

    Здравствуйте!

    Спасибо за отличный скрипт!
    Но почему то у меня не работает счетчик. Ничего не отображается. Выше в комментариях вы писали про 6 пункт (стили), но на сайте в этом пункте написано «Готово». Подскажите пожалуйста как можно настроить счетчик?

  3. 12
    Петр

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

  4. 15

    Здравствуйте. А можно ли каким-то образом сделать так, чтобы на конкретных страницах (по ID, например) эти кнопки не показывались?
    (у меня джумла)…

  5. 17
    Scandal
    @

    Здравствуйте.. у меня не работает счетчик. На статью формируется ссылка вида
    news.php?id=37659&year=2014&today=12&month=11
    как удалось установить, причина в спецсимовле &

    если оставить ссылку news.php?id=37659 , то счетчики работают.. как можно решить эту проблему, не меняя формат ссылки?

  6. 23
    4Saken
    @

    Доброго времени суток!

    Мучал, мучал CSS — ничего так и не получается, поэтому решил обратится за советом.

    1) Как привязать плавающий блок с кнопками к отдельному другому блоку (виджету), например слева от виджета. Проблема в том, что в начале страницы динамический слайдер, который меняет свои размеры в зависимости от размеров окна?
    2) Прозрачность. Если ставлю:

    #share42 a {
    opacity: 0.5;
    }

    Блок становится прозрачным, но при наведении мыши не меняет свой цвет.

  7. 26

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

  8. 28
    Павел
    @

    Здравствуйте, спасибо большое за скрипт, полезная штука! Но есть проблема, нужно вставить ЮТМ метку на параметр data-url=»http://SITE.ru/?utm_source=repost&utm_medium=repost&utm_campaign=SITE» когда вставляю — счетчики не работают, когда меняю на data-url=»http://SITE.ru» все прекрасно работает. Но нужночто бы счетчики работали с ЮТМ меткой! подскажите как быть

  9. 36
    Елена
    @

    Привет всем! Как сделать счетчик активной ссылкой, чтобы можно было нажимать не только на кнопку, а на кнопку с счетчиком в целом? Спасибо за помощь!

  10. 37
    Валентин
    @

    Приветствую автора!
    Подскажите пожалуйста как сделать кнопки такие же, как у Вас в данной статье?
    Очень нравится.

  11. 39
    Валентин
    @

    Здравствуйте!
    Спасибо за Ваш быстрый ответ!
    Меня все же очень интересует Ваши кнопки, как на этом сайте…
    Мне нужно абсолютно такой же функционал + кнопка одноклассников и высотой примерно 25px в пропорциях от данных. Вам интересно это сделать за оплату? Если да, огласите стоимость пожалуйста.

  12. 41
    Дмитрий
    @

    Здравствуйте!
    Интересный комментарий выше от Валентина.
    Скачал себе вариант кнопок, как у Вас на этом сайте, мне он тоже понравился. Сложностей не возникло в принципе, но не получается подключить одноклассников.
    В тюннингованом скрипте добавил функцию для этой соц.сети и в css выел кнопку — все классно, все кнопки показываются и работают, но счетчик одноклассников ничего не показывает и не пойму в чем секрет.
    Значит в скрипт добавил:
    function odkl_count(url) {
    $.getScript(
    ‘http://www.odnoklassniki.ru/dk?st.cmd=extLike&uid=’ +
    idx + ‘&ref=’ + url);
    if (!window.ODKL) window.ODKL = {};
    window.ODKL.updateCount = function(idx,
    shares) {
    if (shares > 0 || z == 1) $(
    ‘div.share42init’).eq(
    idx).find(
    ‘a[data-count=»odkl»]’)
    .append(
    » +
    shares + »)
    }
    }
    odkl_count(u);
    и вывел кнопку:
    ‘»#» class=»odk» data-count=»odkl» onclick=»window.open(\’http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=’ +
    u + ‘&title=’ + t +
    ‘\’, \’_blank\’, \’scrollbars=0, resizable=1, menubar=0, left=100, top=100, width=550, height=440, toolbar=0, status=0\’);return false» title=»Добавить в Одноклассники»‘
    В скрипте вроде ничего больше нету для этой соцсети. Сравнивал с Вашим стандартным скриптом.
    На вскидку не расскажите что за хитрость может быть?

  13. 42
    Павел

    Здравствуйте!
    Установил Ваш скрипт. Работает хорошо.
    Скажите можно ли что-то придумать, чтобы страничка не так подлагивала.. После установки скрипта заметен небольшой тормоз при загрузке страницы..
    Можно ли что-то с этим придумать?
    Может как-то его асинхронным сделать?

  14. 46
    Наталья

    Спасибо вам за отличную работу. Я не вэб мастер. Просто последовала вашим инструкциям и все получилось. Просто делаю сайт-визитку.
    Только нюанс — кнопока фейсбук. На интернет эксплорере блокируется и пустое всплывающее окошко. Пишет, что IE изменил страницу для предотвращения запуска межсайтовых сценариев. Другой браузер — это конечно хорошо, но на компьютерах корпоративных часто это единственный браузер для людей, так что кнопку сложно пользовать :-(
    Отображенение окна перепоста в мобильном виде для фейсбука ооочень мелкое. Ну и конечно гугл при анализе сайта ругнулся.
    Будет очень здорово, если это можно исправить.
    Спасибо

  15. 47

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

  16. 48

    Здравствуйте! Классный У Вас скрипт. Но проблема в следующем. У меня на блоге плавающий вертикальный блок со счетчиками. На стандартных разрешениях он выглядит нормально, а вот в мобильных разрешениях счетчики мешают просмотру контента. Нельзя ли в мобильных разрешениях сделать счетчики под значками соц. сетей? Или если это невозможно, совсем убрать их?

  17. 49

    Здравствуйте, Dimox. Несколько дней, что-то около недели, на всех страницах моего блога перестал отображаться счетчик твиттера, хотя счетчики иных соц. сетей по-прежнему отображены. For example — например, эта страничка http://masterpro.ws/pogoda-po-ip-umnyj-informer Changelog не отображает никаких изменений на этот счет, поэтому обновлять скрипт не стал.. может, взглянете? Счетчик твиттера очень хотелось бы, для меня это одна из самых знаковых соц.сетей.

  18. 51
    Seratehi

    Dimox, громадное спасибо за скрип.
    Однако, возникла проблемка. Вчера только запилил Ваши кнопочки на сайт. Но счётчик Facebook’a отображался(если он вообще отображался с самого начала, увы, не успел обратить особого внимания) только первые минут 5-10. Теперь же — кнопка вообще без счётчика, в логе консоли выдаёт: «Uncaught TypeError: Cannot read property ‘shares’ of undefined share42.js:2».
    Перезалил скрипт — результат тот же.
    Учитывая, что я в скриптах… ну вообще никак…((
    …Уважаемые, может кто-то поможет разобраться в чём проблема?

  19. 52
    Seratehi

    Ох, это опять я, автор предыдущего поста…
    После тестов выявились ещё проблемы:
    а) счётчик facebook’a отсутствует(хотя должен быть)
    б) счётчик ВКонтакте не работает
    в) при шаре в Одноклассники: не цепляет параметры data-title, data-image, data-description(т.е. без картинки; левый заголовок; выдаёт текст из meta-description сайта, а не текст из data-description кода кнопок)
    г) при шаре в facebook — аналогичные проблемы как с Одноклассниками(хотя тег meta property=»og:image» content=»site.name/image.jpg» для него прописан)
    д) при шаре в google+ — те же проблемы как с FB и Ок. Ещё и счётчик не работает!
    А вот с шарой ВКонтакт — всё замечательно!(за искл. нерабочего счётчика) Без теста остались только Твиттер, МэйлРу и LiveJournal…

    На всякий случай задал подобный вопрос на Тостере, там же и скрин лога консоли есть:
    https://toster.ru/q/271859

  20. 53
    Андрей

    Здравствуйте. Используем ваш скрипт на Битриксе. Скрипт подключается на каждой странице с помощью одного и того же футера. Не могу понять, почему, но на главной странице кнопки отображаться не хотят. Не подскажите, что можно сделать?

  1. 1

    Да, вот так:

    #share42 {
     right: 0;
     top: 50% !important;
     margin: -150px 0 0 !important;
     }
    

    150 — это половина высоты панели, ее нужно поменять на свое число.

  2. 2

    Вот стили:

    .share42-item {
    	position: relative;
    }
    .share42-counter {
    	visibility: hidden;
    	position: absolute !important;
    	top: 0;
    	left: 100%;
    	z-index: 2;
    }
    .share42-item:hover .share42-counter {
    	visibility: visible;
    }
    
Ваш комментарий