Главная JavaScript

Добавляем кнопку «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 или нет, и как отказаться от поставленной +1,как это делается в стандартной кнопке

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      .Sheet {
        overflow: hidden;
        ...
      }

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

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

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

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