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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      Да, верно.

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

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

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

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

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

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

    • Огромное спасибо, поставил. Вродь всё правильно но шото не так с стилями… Кнопка +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 не отображаеццо как писалось выше. А так – огромное спасибо за труд!

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

        • Вобщем немного пораскинул я мозгами и получилось вот такое )) Правильный код на горизонтальное меню в 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. И ещё одно… в IE до 8 версии включительно кнопка не фурычит. А на IE 9 Всё нормаль пашет. Вывод – или не юзайте IE или юзайте обновления )))

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

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

    Код

    function($) {
    $(function() {

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

    })
    })(jQuery)

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

    <head></head>

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

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

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

  17. Но так просто счастья не бывает :)
    Уже писали, что 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. Но что интересно +1 внедренная через плагин Контент – LikeButton+ исправно видится и в IE 7.

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

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

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