Главная › JavaScript

Добавляем кнопку “Google +1” в панель от Share42.com

68 комментариев

Добавляем кнопку “Google +1” в панель от Share42.com

На своем другом блоге я недавно объяснил, почему в данный момент кнопка "Google +1" не может быть добавлена в моем сервисе Share42.com, о чем все просят. Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка "Google +1" в панельке присутствует. Расскажу, как это ...

Смотрите также

Плавающая панель «Добавить в социальные сервисы»

603 комментария

Недавно я решил отказаться от использования своего скрипта “Добавить в закладки” и создал новый скрипт на jQuery – плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы ...

Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)

66 комментариев

Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...

Красивые всплывающие подсказки с помощью jQuery

144 комментария

Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...

Цифровые часы на чистом CSS и jQuery

41 комментарий

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

Комментарии (68)

  1. MAX
    13 лет 2 месяца назад

    Там можно проще сделать. В апи кнопки есть пример с gapi.plusone.render() и валидный div.g-plusone. Или посмотри пример у меня в последней MaxSite CMS: плагин addzakl. ;-)

  2. Андрей Гурылёв
    13 лет 2 месяца назад

    Dimox, MAX, спасибо большое!

  3. Domen
    13 лет 2 месяца назад

    Dimox
    А скажи пожалуйста ссылку для добавления в соцзакладки “+1”, чтобы я ее мог вручную на сайте установить в панельку – пользуюсь твоей горизонтальной панелькой из твоей темы dimox.name/socializ-floating-panel/ , где надо вручную все заносить в js-скрипт.

  4. Sonikelf
    13 лет 2 месяца назад

    Спасибо за статью, Дим :) Пойду добавлю полегоньку ;)

    ЗЫ: Меня удивляет, что многие так адски переживают за наличие jQuery и его использование. По-моему, его присутствие на сайте это стандарт, а не дурной тон. Развели, понимаешь ли, панику :)

  5. webm42
    13 лет 2 месяца назад

    Спасибо! Несмотря на то, что всё и так не сложно, просто приятно читать такие подробные инструкции, которые поймёт каждый.
    Только пару вопросов: почему в IE 7-8 кнопка, вставленная таким образом, не отображается? И зачем, всё-таки, jQuery? Можно ведь просто в необходимое место вставить

    <g:plusone count="false"></g:plusone>

    • Dimox
      13 лет 2 месяца назад / ответ на коммент webm42

      Только пару вопросов: почему в IE 7-8 кнопка, вставленная таким образом, не отображается?

      Хм, действительно. Даже и не знал, забыл в них проверить. Не знаю, в чем причина.

      И зачем, всё-таки, jQuery?

      Уже писал выше, что мне так было проще добавить кнопку.

  6. Sonikelf
    13 лет 2 месяца назад

    Кстати код скрипта:

    (function($) {
$(function() {

  $('#share42').prepend('<g:plusone size="medium" count="false"></g:plusone>');

})
})(jQuery)

    Можно просто вставить в файл share42.js, чтобы не подключать отдельно.
    Это я так, к слову ;)

    ЗЫ: Кстати кнопочку бы потолще сделать, а то выглядит мелковатой на фоне остальных, – http://clip2net.com/clip/m10803/1311617000-clip-43kb.jpg

    • Dimox
      13 лет 2 месяца назад / ответ на коммент Sonikelf

      Можно просто вставить в файл share42.js, чтобы не подключать отдельно.

      Да, верно.

      ЗЫ: Кстати кнопочку бы потолще сделать, а то выглядит мелковатой на фоне остальных

      Уж какую Гугл сделал, такая и есть.

  7. Sonikelf
    13 лет 2 месяца назад

    Ну дык не обязательно же использовать именно ту, что сделал google. Я, например, для поиска иконок очень люблю сервис IconFinder. Так, например, там кнопка Google+ отрисована многими людьми, а посему представляет собой кучу вариантов на любой вкус, размер, цвет и тэпэ:
    http://www.iconfinder.com/search/?q=%2B1 ;)

  8. Sonikelf
    13 лет 1 месяц назад

    Тогда ясненько.. :)

  9. Dzantiev
    13 лет 1 месяц назад

    хороший плагин, много функций, но не помешала бы более гибкая настройка дизайна панели с иконками

  10. Cappie
    13 лет 1 месяц назад

    Спасибо за кнопку, хорошо что не отстаете от последних тенденций=)

    • Юрец
      13 лет 1 месяц назад / ответ на коммент Cappie

      Огромное спасибо, поставил. Вродь всё правильно но шото не так с стилями… Кнопка +1 перемигуеццо с панелью… http://www.dialog.org.ua/news/65-np_seminar.html Стили все перепроверял, всё правильно…

      #share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  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;
  vertical-align: bottom;
}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

#___plusone_0 {
   cursor: pointer;
   margin: 0 6px 0 0 !important;
   vertical-align: top;
}

#share42:hover #___plusone_0 {opacity: 0.7}
#share42 #___plusone_0:hover {opacity: 1}

      Может подскажите что не так
      Ну ив IE не отображаеццо как писалось выше. А так – огромное спасибо за труд!

      • Dimox
        13 лет 1 месяц назад / ответ на коммент Юрец

        Не вижу, чтобы что-то было не так.

        • Юрец
          13 лет 1 месяц назад / ответ на коммент Dimox

          Вобщем немного пораскинул я мозгами и получилось вот такое )) Правильный код на горизонтальное меню в CSS там кой-чего не хватало )

          #share42 {
  display: inline-block;
  padding: 6px 0 0 6px;
  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;
  vertical-align: bottom;
}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

#___plusone_0 {
   opacity: 0.5;
   cursor: pointer;
   margin: 0 6px 0 0 !important;
   vertical-align: top;
}

#share42:hover #___plusone_0 {opacity: 0.7}
#share42 #___plusone_0:hover {opacity: 1}
  11. Юрец
    13 лет 1 месяц назад

    И ещё одно… в IE до 8 версии включительно кнопка не фурычит. А на IE 9 Всё нормаль пашет. Вывод – или не юзайте IE или юзайте обновления )))

  12. Vlad
    13 лет 1 месяц назад

    Dimox
    Я хвастался какую я красивую панель соорудил а вот добавить +1 никак не получается не появляется в панели
    Похоже, я что-то не так совместил с CSS
    Привожу CSS верхняя часть работающая сейчас,
    а в нижней части добавил рекомендуемую часть для +1

    /* share42  */


#share42 {
  position: fixed;
  top: 100px;
  left: 2px;
  padding: 3px 3px 0;
  background: #0A4510;
  border: 1px solid #11701A;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  }
* html #share42 {display: none}
#share42:hover {
  background: #0A4510;
  border: 1px solid #D4D4D4;
  -webkit-box-shadow: 0 0 4px #DDD;
  -moz-box-shadow: 0 0 4px #DDD;
  box-shadow: 0 0 4px #DDD;
  }
#share42 a {opacity: 1.5}
#share42:hover a {opacity: 1.7}
#share42 a:hover {opacity: 0.5}
#share42 img {margin: 0 !important; padding: 0 !important; border: none !important;}

#___plusone_0 {
  opacity: 0.5;
  cursor: pointer;
  margin: 0 0 6px !important;
}
#share42:hover #___plusone_0 {opacity: 0.7}
#share42 #___plusone_0:hover {opacity: 1}
  13. Vlad
    13 лет 1 месяц назад

    Dimox
    Большая просьба по-конкретней все-таки как подключать в нашем случае jQuery
    Перечитал много дискуссий на сайте по этому поводу но так коротко и конкретно и не понял как это сделать в нашем случае проще всего.
    Подскажите пожалуйста – у меня проблема, как я понял, в этом

  14. Vlad
    13 лет 1 месяц назад

    Наконец, кнопка появилась, но в топе шаблона www.varich.com

    Код

    function($) {
    $(function() {

    $('#share42').prepend('<g:plusone size="medium" count="false"></g:plusone>');

    })
    })(jQuery)

    разместил в шаблоне между тегами

    <head></head>

    Это правильно??

  15. Vlad
    13 лет 1 месяц назад

    Dimox
    Извини, что наворотил тут кучу писанины, надеюсь ты почистишь эту дурь :)
    “Благодаря” тому что мне никто не отвечал на мои глупые (как я уже понял) вопросы, я во всём разобрался
    Значек +1 появляется где надо, но появляется описанный в инете
    конфликт между библиотеками jQuery и MooTools и у меня перестают работать слайдеры на MooTools
    Но к, сожалению, советы пока не помогли и жаль убитого времени и отказа от +1 в твоей чудесной панели. Придется пока отключить эту затею и подождать лучших времен. Может найдется другое решение.

  16. Vlad
    13 лет 1 месяц назад

    В последнюю минуту всё удалось разрешить и снять конфликт согласно рекомендациям
    Всё решено! Спасибо! Правда, приходится подгружать jQuery с Google

  17. Vlad
    13 лет 1 месяц назад

    Но так просто счастья не бывает :)
    Уже писали, что IE 7 не видит, но у меня не просто не видит а сайт вообще не грузится – повисает броузер. Убираю кнопку – всё нормально. Не хочется терять посетителей. По статистике это 10% посетителей от всех версий IE. А у меня продажи на сайте. Вот и счастье. Но что интересно +1 внедренная через плагин Контент – LikeButton+ исправно видится и в IE 7.
    А от внедрения через рекомендации самого гугла тоже страницы на которых это стоит тоже виснут. Вот такие мои изыскания.

    <!-- Разместите этот тег в теге head или непосредственно перед закрывающим тегом body -->
    <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

    <!-- Разместите этот тег в том месте, где должна отображаться кнопка +1 -->
    <g:plusone></g:plusone>

  18. Vlad
    13 лет 1 месяц назад

    Но что интересно +1 внедренная через плагин Контент – LikeButton+ исправно видится и в IE 7.

    Ошибся, через плагин грузится исправно но не видится.
    Пока отключил кнопку +1 от Share42. – Надо подумать как поступить.

  19. сергей
    13 лет назад

    я пробовал сделать точно как написано! но нифига не работало! так что просто я отказался от такой затеи!

  20. Юрец
    13 лет назад

    Всё отлично работает, берите молоточек и стучите по ручкам, пока прямыми не станут…