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

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

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

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

Сразу хочу предупредить, что для этого будет использоваться jQuery, поэтому, если он у вас на сайте еще не подключен, то в этом случае вам лучше отказаться от затеи подключения кнопки «Google +1» тем способом, который я расскажу ниже, поскольку подключать фреймворк весом примерно 30 килобайт ради лишь одного простого действия не есть гуд. Но это, конечно, ваше дело.

Процесс установки

  1. В шаблоне сайта добавьте такую строку перед тегом </head>:

    <script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ru'}</script>
    
  2. Добавьте на сайт следующий jQuery-скрипт (надеюсь, вы уже умеете это делать, я не раз писал об этом на блоге):

    (function($) {
    $(function() {
    
    	$('#share42').prepend('<g:plusone size="medium" count="false"></g:plusone>');
    
    })
    })(jQuery)
    
  3. Ну и, естественно, сам фреймворк jQuery также должен быть подключен на сайте.
  4. В CSS-файл вашего сайта добавьте следующие стили:

    #___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}
    

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

  1. Находим в своем шаблоне такую строку:

    <script type="text/javascript">share42('тут_различные_параметры')</script>
    

    и вместо нее делаем вот так:

    <div id="share42"><script type="text/javascript">share42('тут_различные_параметры')</script></div>
    
  2. Вместо тех стилей, что указаны выше в 4-м пункте, добавляем такие:

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

И еще один момент. В зависимости от такого, какую панель вы установили (вертикальную или горизонтальную), и в зависимости от размера иконок в панели, можно подобрать наиболее подходящий размер иконки «Google +1». Для этого в скрипте поменяйте вот этот код кнопки (ее размер 32×20):

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

на один из следующих вариантов:

  1. 24×15:

    <g:plusone size="small" count="false"></g:plusone>
    
  2. 38×24:

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

На этом всё.

* * *

Если вам необходимо создание веб-сайтов, нацеленных на извлечение с их помощью дополнительной прибыли, обращайтесь к профессионалам, в компанию «Фларис и партнеры» (www.Flaris.ru). Кроме этого здесь вам готовы предложить разработку дизайна и фирменного стиля, а также продвижение вашего сайта в Интернете.

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

    А где видно ,добавилось +1 или нет ,и как отказаться от поставленной +1,как это делается в стандартной кнопке

  2. 2

    При засчитанном + кнопка становиццо синей, при повторном нажатии она становиццо такой как и была, а + отменяеццо.

  3. 3
    Виталий

    После добавления кнопки гугл +1 к горизонтальной панели почему то получается что сами кнопки соц сетей в диве, перед дивом, слева +1 и все это обрамляется еще одним дивом. Что делаю не так? Возможно ли перенести +1 вправо?

    • 4

      В скрипте замените слово prepend на append.

      • 5
        Виталий

        Так похоже я пошел не потому пути. Я использовал скрипт который автоматически генерируется на share42 — share42.js и там нет ни prepend ни append. Зато они есть в скрипте socializ_3.js И добавить кнопку +1 я хотел именно к share42.js, он мне более симпатичен тем что иконки сделаны одной картинкой. Может и из-за того что я не к тому скрипту добавлял +1 у меня и получилось что див с соц. кнопками вложен в див с +1 ? Собственно вопрос возможно ли для share42.js добавить 1, избавиться от вложенности дивов (чтоб див был один) и перенести +1 вправо?

  4. 7
    Виталий

    Это сервис решил проблему с преобразованием кнопки +1 в ссылку http://www.addthis.com/

  5. 9
    wufer

    Так и не понял куда и как вставлять

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

    Проясните пожалуйста!?

  6. 11
    Марк

    Ребята, все давно хочу вам написать, но складывается такое впечатление, что вы свой сервис share42 не поддерживаете или давно не обновляли, в частности столкнулся с косяками в кнопках:
    1)vkontakte — не передается title, не всегда парситься картинка, а если и парситься то обычно не та, что нужно, приходится писат свой скрипт каждый раз.
    2)facebook — то же самое
    3)google buzz — вообще не работает.

    А так сам по себе у вас сервис замечательный, т.к. может сэкономить много времени.

    • 12

      Лично у меня и Фейсбук, и Вконтакте работает, можно убедиться прямо на сайте скрипта. По поводу «не всегда парситься картинка» — скрипт передает только ссылку и название страницы.

      А проект Google Buzz закрыт Гуглом, поэтому ничего и не работает. Эта кнопка будет убрана.

  7. 13
    Ivan

    как добавить кнопку в datalife engine shortstory.tpl?

  8. 14
    Захар

    Все получилось, спасибо. Но пришлось убрать +1 этот. Работает и отображается только в хром :), в Опере не видать, ИЕ вообще не знает что там отступ слева, Лису не пробовал.

  9. 15
    Леонид

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

  10. 18

    Нужна подсказка.
    Не могу правильно установить Share42 на свой блог. При первом редактировании файла style.php допустил ошибку и панелька «влезла» в сайдбар раздвинув статью и футер. Я уже изменил файл style.php как надо, но эти изменения не вступают в силу. Т.е. они вступают в силу только после рефреша страницы сайта.
    При первой загрузке страницы сайта используется старая редакция файла style.php, после обновления страницы — вступают в силу сделанные мной обновления файла style.php.
    В чем может быть причина? Только не предлагайте обновить кэш браузера.

    • 19

      Панель у вас в данный момент не отображается из-за этого свойства:

      .Sheet {
       overflow: hidden;
       ...
      }

      Нужно удалить строку overflow: hidden;.

      • 20

        Спасибо за ответ, но, увы мне увы, ничего не изменилось. Или, может быть, нужно было удалить все строчки overflow: hidden; (их в style.css — 44 шт.)? Или я вопрос изложил мутно. Панель отображается, но неправильно — с теми настройками, что были выставлены в самый первый раз. А вот все последующие изменения в файле style.css не вступают в силу. Вернее, они вступают в силу после рефреша страницы. И вот еще что, я для эксперимента изменил цвет шрифта контента, так вот он тоже изменяется только после рефреша страницы. Собственно получается, что дело и не в Вашей панельки, а с обновлением файла style.css. Но с другой стороны, при самой первой установке панельки, изменения style.css сразу вступили в силу. Уж больно мне панелька Ваша нравится. Лучшая. А прикрутить не могу.

  11. 23

    dimox, спасибо, отличный скрипт. Но вот чего не хватает, так это rss ленты или уведомлений на мыло. Вот обновишь ты завтра иконки, да добавишь пару фич, а пацаны-то и не узнают. Прикрути ;)

  12. 29
    Сергей

    Все работает-поставил по порядку как написано. Но есть 1 но. Немного не в тему стала иконка . Встала на 1 позицию, а уменя 1 стояла + в избранное… Мне так не подходит-буду ставить отдельно. Сервис относительно новый-буду пиарить его отдельно…. В общем все работает автору сп за труды!