Нестандартное изображение для кнопки Google +1
Доброго времени суток! На днях решил сделать красивые социальные кнопки для своего сайта. Спросил Гугла, и он выдал мне чудесный ресурс share42.com. Меня сразу зацепили кастомные иконки и количество настроек. Но вот незадача, Google Plus не был представлен среди них! Естественно, хотелось сделать единую панель со всеми популярными кнопками, причем одного размера и стиля. Немного поискав, я так и не нашел приемлемого решения. В итоге пришлось делать костыль.
Для начала, создадим интересующую нас панель кнопок, но при этом выбрав один лишний сервис, за место которого мы поставим +1. Заметьте, что иконки можно менять местами, и порядок готовых кнопок зависит от их расположения при выборе.
После того как скачаете готовый архив, откройте в фотошопе icons.png. В нем нужно заменить кнопку-болванку на желаемое изображение для +1. Не залезаем на соседнюю кнопку.
Далее начинается самое интересное. Так как менять размеры, а тем более изображение кнопки +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"/>