Добавляем кнопку “Google +1” в панель от Share42.com
На своем другом блоге я недавно объяснил, почему в данный момент кнопка “Google +1” не может быть добавлена в моем сервисе Share42.com, о чем все просят.
Однако прямо сейчас на данном блоге вы можете наблюдать, что кнопка “Google +1” в панельке присутствует. Расскажу, как это можно сделать.
Сразу хочу предупредить, что для этого будет использоваться jQuery, поэтому, если он у вас на сайте еще не подключен, то в этом случае вам лучше отказаться от затеи подключения кнопки “Google +1” тем способом, который я расскажу ниже, поскольку подключать фреймворк весом примерно 30 килобайт ради лишь одного простого действия не есть гуд. Но это, конечно, ваше дело.
Процесс установки
В шаблоне сайта добавьте такую строку перед тегом
</head>:<script type="text/javascript" src="https://apis.google.com/js/plusone.js">{lang: 'ru'}</script>Добавьте на сайт следующий jQuery-скрипт (надеюсь, вы уже умеете это делать, я не раз писал об этом на блоге):
(function($) { $(function() { $('#share42').prepend('<g:plusone size="medium" count="false"></g:plusone>'); }) })(jQuery)- Ну и, естественно, сам фреймворк jQuery также должен быть подключен на сайте.
В 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}
Все вышеобозначенное было рассказано для вертикальной панели. Чтобы это сработало и для горизонтальной панели, нужно дополнительно выполнить следующие действия:
Находим в своем шаблоне такую строку:
<script type="text/javascript">share42('тут_различные_параметры')</script>и вместо нее делаем вот так:
<div id="share42"><script type="text/javascript">share42('тут_различные_параметры')</script></div>Вместо тех стилей, что указаны выше в 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>
на один из следующих вариантов:
24×15:
<g:plusone size="small" count="false"></g:plusone>38×24:
<g:plusone count="false"></g:plusone>
На этом всё.
* * *
Если вам необходимо создание веб-сайтов, нацеленных на извлечение с их помощью дополнительной прибыли, обращайтесь к профессионалам, в компанию “Фларис и партнеры” (www.Flaris.ru). Кроме этого здесь вам готовы предложить разработку дизайна и фирменного стиля, а также продвижение вашего сайта в Интернете.
Комментарии (68)
А где видно ,добавилось +1 или нет ,и как отказаться от поставленной +1,как это делается в стандартной кнопке
При засчитанном + кнопка становиццо синей, при повторном нажатии она становиццо такой как и была, а + отменяеццо.
После добавления кнопки гугл +1 к горизонтальной панели почему то получается что сами кнопки соц сетей в диве, перед дивом, слева +1 и все это обрамляется еще одним дивом. Что делаю не так? Возможно ли перенести +1 вправо?
В скрипте замените слово
prependнаappend.Так похоже я пошел не потому пути. Я использовал скрипт который автоматически генерируется на share42 – share42.js и там нет ни prepend ни append. Зато они есть в скрипте socializ_3.js И добавить кнопку +1 я хотел именно к share42.js, он мне более симпатичен тем что иконки сделаны одной картинкой. Может и из-за того что я не к тому скрипту добавлял +1 у меня и получилось что див с соц. кнопками вложен в див с +1 ? Собственно вопрос возможно ли для share42.js добавить 1, избавиться от вложенности дивов (чтоб див был один) и перенести +1 вправо?
Установите скрипт с сайта Share42.com, потом сделайте то, что описано в этой статье, плюс то, что я написал в предыдущем комментарии. И получится то, что хотите.
Это сервис решил проблему с преобразованием кнопки +1 в ссылку http://www.addthis.com/
Нет, там тоже подключается гугловский скрипт.
Так и не понял куда и как вставлять
Проясните пожалуйста!?
Создайте файл с расширением .js и вставьте в него этот код. Затем подключите к сайту (перед тегом
</head>):Ребята, все давно хочу вам написать, но складывается такое впечатление, что вы свой сервис share42 не поддерживаете или давно не обновляли, в частности столкнулся с косяками в кнопках:
1)vkontakte – не передается title, не всегда парситься картинка, а если и парситься то обычно не та, что нужно, приходится писат свой скрипт каждый раз.
2)facebook – то же самое
3)google buzz – вообще не работает.
А так сам по себе у вас сервис замечательный, т.к. может сэкономить много времени.
Лично у меня и Фейсбук, и Вконтакте работает, можно убедиться прямо на сайте скрипта. По поводу “не всегда парситься картинка” – скрипт передает только ссылку и название страницы.
А проект Google Buzz закрыт Гуглом, поэтому ничего и не работает. Эта кнопка будет убрана.
как добавить кнопку в datalife engine shortstory.tpl?
Все получилось, спасибо. Но пришлось убрать +1 этот. Работает и отображается только в хром :), в Опере не видать, ИЕ вообще не знает что там отступ слева, Лису не пробовал.
Не знаю, может совпадение, но после установки плагина соц-кнопок у меня начали падать сайты. Пока что убрал от греха подальше.
Совпадение.. А кнопка у меня заработала все-таки. Только сайт в РФ, сделал.. плюнул, через неделю появилась. А в горизонтальную панельку кнопку +1 установить не удалось, смещается на пару пикселей.
В каком смысле падать? Рейтинги снижаться? Или вообще, “падать”.
Нужна подсказка.
Не могу правильно установить Share42 на свой блог. При первом редактировании файла style.php допустил ошибку и панелька “влезла” в сайдбар раздвинув статью и футер. Я уже изменил файл style.php как надо, но эти изменения не вступают в силу. Т.е. они вступают в силу только после рефреша страницы сайта.
При первой загрузке страницы сайта используется старая редакция файла style.php, после обновления страницы – вступают в силу сделанные мной обновления файла style.php.
В чем может быть причина? Только не предлагайте обновить кэш браузера.
Панель у вас в данный момент не отображается из-за этого свойства:
Нужно удалить строку
overflow: hidden;.Спасибо за ответ, но, увы мне увы, ничего не изменилось. Или, может быть, нужно было удалить все строчки overflow: hidden; (их в style.css – 44 шт.)? Или я вопрос изложил мутно. Панель отображается, но неправильно – с теми настройками, что были выставлены в самый первый раз. А вот все последующие изменения в файле style.css не вступают в силу. Вернее, они вступают в силу после рефреша страницы. И вот еще что, я для эксперимента изменил цвет шрифта контента, так вот он тоже изменяется только после рефреша страницы. Собственно получается, что дело и не в Вашей панельки, а с обновлением файла style.css. Но с другой стороны, при самой первой установке панельки, изменения style.css сразу вступили в силу. Уж больно мне панелька Ваша нравится. Лучшая. А прикрутить не могу.
Изменять больше ничего нужно. Я сейчас вижу панель, так что причина в кэше.
Спасибо за панельку и помощь. Все заработало. Теперь буду к ней +1 прикручивать… )))
dimox, спасибо, отличный скрипт. Но вот чего не хватает, так это rss ленты или уведомлений на мыло. Вот обновишь ты завтра иконки, да добавишь пару фич, а пацаны-то и не узнают. Прикрути ;)
Я уже думал об этом и даже пытался сделать, но не нашел удобного способа создавать RSS-фид.
А чего его искать? Положи в корень feed.xml, да вручную обновляй. Новостей же на сайте раз в месяц-два, по-идее.
Пришел к такому же выводу. Скоро, наверное, добавлю RSS.
Пожелание выполнено =)
+1 подписчик
Все работает-поставил по порядку как написано. Но есть 1 но. Немного не в тему стала иконка . Встала на 1 позицию, а уменя 1 стояла + в избранное… Мне так не подходит-буду ставить отдельно. Сервис относительно новый-буду пиарить его отдельно…. В общем все работает автору сп за труды!