Нестандартное изображение для кнопки Google +1

15 ноября 2011 г.

Доброго времени суток! На днях решил сделать красивые социальные кнопки для своего сайта. Спросил Гугла, и он выдал мне чудесный ресурс share42.com. Меня сразу зацепили кастомные иконки и количество настроек. Но вот незадача, Google Plus не был представлен среди них! Естественно, хотелось сделать единую панель со всеми популярными кнопками, причем одного размера и стиля. Немного поискав, я так и не нашел приемлемого решения. В итоге пришлось делать костыль.

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

image image

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

image

Далее начинается самое интересное. Так как менять размеры, а тем более изображение кнопки +1 нам нельзя, приходится немного по извращаться. Мы используем CSS для изменения тэга div, который имеет вполне статичный ID.

#___plusone_0
{ opacity:0; /* Задаем прозрачность 0%, чтобы скрыть старое изображение */
position: absolute;
 right: 5px;
 top: 22px;
 width:32px;
 height:32px; }

В итоге получаем скрытую кнопку. Теперь только осталось разместить её под тем изображением что вы хотите. Не забываем разместить основной скрипт кнопки, который можно получить здесь.. В нашем случае открываем share42.js, в котором меняем 2 значения. Первое — очищаем элемент массива отвечающий за ссылку для кнопки-болванки.

var s=new Array('"#" onclick="window.open(\'http://vkontakte.ru/share.php?url='+u+'\', \'_blank\', \'scrollbars=0, resizable=1, menubar=0, left=200, top=200, width=554, height=421, toolbar=0, status=0\');return false" src="~images\nestandartnoe-izobrazhenie-dlya-knopki-google-1_3.png" alt="image"/>
Теги: рубрика Сайтостроение