4remind.ru » Продвижение, раскрутка сайта » Поисковые системы » Своя картинка, иконка для кнопки Google +1

Своя картинка, иконка для кнопки Google +1

10 апреля 2012 8 комментариев

Здравствуйте, уважаемые подписчики и посетители блога 4remind.ru. В предыдущей статье был опубликована инструкция по ручной настройке и использованию оптимального метода загрузки скрипта для кнопки Google «+1». Сегодня же я хочу Вам предложить несложный метод добавления своей собственной картинки, иконки (изображения) для кнопки Google «+1».

Своя картинка, иконка для кнопки Google +1

Для того, чтобы вывести свою картинку, иконку взамен стандартной кнопки Google +1, нам понадобится скрыть, а вернее сделать абсолютно прозрачной, исходную кнопку и на ее месте расположить свою картинку, иконку и при этом не нарушить функционирование родной кнопки сервиса Google. Поэтому в предлагаемом способе понадобится создать два DIV контейнера: родительский и дочерний.

Для дочернего DIV контейнера мы определим CSS класс «hidegplus» и внутри расположим стандартные код и скрипт кнопки Google +1. Для родительского DIV контейнера определим CSS класс «mygplus» и внутри разместим дочерний DIV и тэг IMG для своего изображения.

Обратите внимание на тэг IMG в самом низу родительского DIV контейнера — значением для «src» должен быть указан путь к Вашей картинке, иконке и самое главное, что имя файла вашей картинки для кнопки Google +1 должно быть именно googleplus.png!

Внутри дочернего контейнера Вы можете по собственному желанию произвести настройки кнопки и скрипта для Google +1 по рекомендациям, описанным в предыдущей статье Настройка кнопки Google +1. И не забывайте, что у кнопки и вашего собственного изображения для нее должны быть одинаковые размеры. О допустимых размерах можно прочесть в статье по указанной только что ссылке.

Вот пример использованных мной классов CSS:

/* класс родительского DIV контейнера */
.mygplus {
   /* здесь устанавливайте нужное Вам позиционирование будущей кнопки */
   position: relative;
}

/* класс для скрытия базовой кнопки Google +1 */
.hidegplus {
   opacity: 0;
   height: 32px;
   width: 32px;
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3; /* значение должно быть больше, чем z-index в классе .mygplusimage */
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
}

/* класс для Вашей картинки кнопки Google +1 */
.mygplusimage {  
   position:absolute;  
   top: 0;  
   left: 0;  
   z-index: 2; /* значение должно быть меньше, чем z-index в классе .hidegplus */
   margin-left: 0px;
}

Обратите внимание, что в класс CSS «hidegplus» добавлен фильтр «-ms-filter», и нужен он для того, чтобы в MS Internet Explorer нормально обрабатывалось свойство класса «opacity». Если фильтр не добавлять, то стандартная кнопка Google +1 просто напросто не будет скрываться и наша цель не будет достигнута.

Вот пример своей собственной кнопки Google +1. Можете навести на нее курсор мыши и опробовать — она работает, как настоящая и делает то, что и должна была делать родная кнопка от Google:

(function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

И еще, для тех, у кого сайт на движке WordPress. Если у Вас на сайте одновременно отображается много анонсов разных записей или страниц, и Вам захочется в каждый из анонсов добавить персональную кнопку Google +1, то Вы можете вставить в параметр «href» тэга кнопки Google +1 вызов функции the_permalink(), которая подставит нужную ссылку для кнопки:

Таким образом посетитель сможет с одной страницы «плюсануть» сразу несколько записей или страниц сайта.

Удачи Вам в экспериментах с кнопкой Google +1!

Метки: Google, PlusOne, кнопки

Другие статьи похожей тематики:

Рубрика: Поисковые системы

Поделитесь материалом с другими, воспользуйтесь этими кнопками:

Получать обновления и новые материалы блога по E-mail

8 комментариев к “Своя картинка, иконка для кнопки Google +1”

Евдокимов:

25.04.2012 в 11:08

Кнопка валидная получается? Все браузеры видят?

Ответить
- Владимир:
  
  25.04.2012 в 15:48
  
  Валидная, я сам естественно проверял. Для IE в CSS добавлена заплатка-фильтр, чтобы нормально срабатывал атрибут «Opacity».
  
  Ответить
WordPress уроки:

06.11.2012 в 07:39

Полезная статья, спасибо.

Ответить
Vic:

17.01.2013 в 13:30

Спасибо за полезную статью!

Ответить
Genfon:

19.01.2013 в 17:47

У меня есть чуть другая задача: Как убрать для гугл +1, присоединиться к группе, фон и рамку. То есть, оставить просто исходную кнопку Гугла и кнопку «Подписаться». Пока на сайте, в правом верхнем углу, есть кнопка. С фоном :(
Заранее спасибо за ответ.

Ответить
- Владимир:
  
  20.01.2013 в 13:38
  
  Genfon, что-то я не совсем понял, где Вы это хотите убрать? Я не вижу у Вас на сайте в правом верхнем углу кнопки Гугл +1. Может сделаете скриншот, выложите его куда-нибудь и дадите ссылку на него?
  
  Ответить
Дмитрий:

03.07.2014 в 13:12

Это здорово для оригинальности — если сделать свою кнопку, но как это скажется на «распознаваемости»(если так можно выразиться)этой кнопки — в том смысле что люди привыкли на многих ресурсах видеть, определенные уже запомнившиеся «брендовые» кнопки? И, к примеру если захотят «плюсануть» или «лайкнуть» будут, по привычке искать ту, которую знают все…

Ответить
- Владимир:
  
  03.07.2014 в 13:27
  
  Все зависит от вашей фантазии при создании своей кнопки, чтобы посетители обращали на нее внимание :)
  
  Ответить