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

Здравствуйте, уважаемые подписчики и посетители блога 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”

  1. Евдокимов:

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

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

  2. WordPress уроки:

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

  3. Vic:

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

  4. Genfon:

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

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

  5. Дмитрий:

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

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

      Ответить

Оставить комментарий к Евдокимов

Уважаемые посетители, пожалуйста, пишите осмысленные и исчерпывающие комментарии. Короткие фразы типа «спасибо автору», «возьму на заметку», «мне помогло» и т.п. будут удаляться. Исключение, когда Вы отвечаете на чей-то вопрос или благодарите за помощь.

Ссылки на Ваш сайт получат статус DoFollow после третьего комментария.

Для вставки кода в комментарии можно использовать BB-коды:
[text] [/text], [php] [/php], [html] [/html]

Подписаться на обновления блога 4remind.ru по RSS
Новости блога в социальных сетях

4remind.ru - персональный блог вебмастера



Наверх
Наверх