Добавляем кнопку “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). Кроме этого здесь вам готовы предложить разработку дизайна и фирменного стиля, а также продвижение вашего сайта в Интернете.
Смотрите также
Плавающая панель «Добавить в социальные сервисы»
Недавно я решил отказаться от использования своего скрипта “Добавить в закладки” и создал новый скрипт на jQuery – плавающую панель с кнопками добавления статьи в социальные сервисы. Эту панель вы ...
Скрипт для плавной прокрутки на верх страницы (на JavaScript и на jQuery)
Предлагаю вашему вниманию скрипт, который плавно прокручивает страницу наверх при клике на соответствующую ссылку. Я сделал 2 варианта: на чистом JavaScript и на jQuery. Выбирайте тот, который вам больше по ...
Красивые всплывающие подсказки с помощью jQuery
Внимательные пользователи моего сайта Share42.com заметили, что на нем с определенной поры появились красивые всплывающие подсказки, и меня попросили рассказать, как такое сделать. Поэтому я хочу поделиться с вами моим ...
Цифровые часы на чистом CSS и jQuery
Глядя на днях на циферки на счетчике ли.ру, в моей голове неожиданно зародилась весьма дурная идея – мне захотелось создать цифровые часы, которые бы в точности повторяли те самые циферки ...
Комментарии (68)
Dimox
Большая просьба по-конкретней все-таки как подключать в нашем случае jQuery
Перечитал много дискуссий на сайте по этому поводу но так коротко и конкретно и не понял как это сделать в нашем случае проще всего.
Подскажите пожалуйста – у меня проблема, как я понял, в этом
Наконец, кнопка появилась, но в топе шаблона www.varich.com
Код
function($) {$(function() {
$('#share42').prepend('<g:plusone size="medium" count="false"></g:plusone>');
})
})(jQuery)
разместил в шаблоне между тегами
<head></head>Это правильно??
Dimox
Извини, что наворотил тут кучу писанины, надеюсь ты почистишь эту дурь :)
“Благодаря” тому что мне никто не отвечал на мои глупые (как я уже понял) вопросы, я во всём разобрался
Значек +1 появляется где надо, но появляется описанный в инете
конфликт между библиотеками jQuery и MooTools и у меня перестают работать слайдеры на MooTools
Но к, сожалению, советы пока не помогли и жаль убитого времени и отказа от +1 в твоей чудесной панели. Придется пока отключить эту затею и подождать лучших времен. Может найдется другое решение.
В последнюю минуту всё удалось разрешить и снять конфликт согласно рекомендациям
Всё решено! Спасибо! Правда, приходится подгружать jQuery с Google
Ну вот и замечательно. Я даже не успел ничего ответить.
Но так просто счастья не бывает :)
Уже писали, что 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>
Ошибся, через плагин грузится исправно но не видится.
Пока отключил кнопку +1 от Share42. – Надо подумать как поступить.
я пробовал сделать точно как написано! но нифига не работало! так что просто я отказался от такой затеи!
Всё отлично работает, берите молоточек и стучите по ручкам, пока прямыми не станут…
А где видно ,добавилось +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 стояла + в избранное… Мне так не подходит-буду ставить отдельно. Сервис относительно новый-буду пиарить его отдельно…. В общем все работает автору сп за труды!