Кнопка социальных закладок. Меняем текст и изображение

Социальные закладки это сервис, который помогает сохранить на сервере закладки на сайты. Это очень удобно, так как где бы вы ни находились - ваши закладки у вас всегда под рукой. Сервисы, предлагающие услуги по размещению закладок на сервере также предлагают вебмастерам кнопки для размещения на сайте, для того чтобы посетители, находящиеся на сайте, могли бы добавить себе этот сайт в закладку. Об кастомизации этих кнопок и пойдёт речь.


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

Давайте рассмотрим изменение кнопки социальной закладки выданной русскоязычным сервисом социальных закладок Mister Wong.

Изначально нужно определиться что мы хотим на выходе получить,например ту же самую кнопку, только с изменённым текстом или же вообще другое какое-нибудь изображение, но в любом случае код на выходе будет выглядеть как переход по гипертекстовой ссылке при щелчке по изображению.

Конечно нужно осознавать, что если вы на кнопку повесите красивого зайчика, то эта кнопка не будет ассоциироваться с социальными закладками и поэтому изображение на ней должно напоминать посетителю о том, что здесь можно создать закладку! Как например в верхнем правом углу сайдбара есть у меня кнопочка Забобрить - это русскоязычный сервис социальных закладок, один из самых популярных. Я на этой кнопке разместил изображение бобра.

Заходим в меню выбора изображений кнопок в сервисе, определяемся с изображением которое нам нравится, но всё же хотелось изменить и правой кнопкой по изображению сохраняем его на своём компьютере, мне например понравилось вот это я бы с ним поработал.

Открываем его в каком либо графическом редакторе стираем то что не устраивает, добавляем то что нам надо. Тут фантазии можно дать разгуляться!
Сохраняем полученное изображение и заливаем его на какой-нибудь сервис по хранению изображений. Я постоянно использую Googlepages.com.

Теперь нам нужно получить код кнопки, он обычно бывает рядом с картинкой которая вам понравилась. Если внимательно рассмотреть код кнопки то можно увидеть два адреса. Первый - на что ссылается эта кнопка, а мы знаем что она ссылается на сервис добавления закладок, второй адрес как раз нам и надо заменить - он говорит вашему броузеру откуда брать картинку для кнопки.

Меняем адрес старого изображения сервиса закладок на адрес вашей новой картинки и вставляем в рекомендованное место.

Почему я не объясняю куда вставлять? Во первых на самих сервисах подробно расписан весь процесс установки кнопки, а во вторых если сложный случай и нужно вставлять в шаблон, то это тема отдельной статьи, но в любом случае ваш изменённый код рабочий и использовать его можно везде и всегда!

Нравится пост? Подпишись на RSS!