Продолжаем социализировать наши сайты.Читателям часто удобно получать обновления блогов прямо в их любимую социальную сеть. Давайте дадим им такую возможность. Для этого нужно зарегистрироваться в этих самых соц.сетях. Можно создать профиль администрации или автора сайта, а можно публичную страницу компании или проекта. В дальнейшем нужно будет регулярно публиковать в новостные ленты профилей новости и обновления сайта, чтобы ваши подписчики могли с ними ознакомится. Это, кстати, удобно делать с помощью установленных нами ранее кнопок «поделиться статьёй». Ссылки на социальные профили оформим с помощью приёма CSS sprite или спрайты на CSS.
Что такое CSS спрайты и спрайты в общем?
Спрайты — набор маленьких картинок, которые объединены в одну. Это делается для того, чтобы не загружать 10-20 маленьких легковесных картинок с сервера на компьютер пользователя, а отдать их одним потоком, объединив в один файл. Спрайты в веб-дизайн пришли из игровой индустрии, там они использовались для создания анимированной 2D графики, например стреляющих монстров и т.п.
В дизайне сайтов тоже применяют приём, при котором различные иконки объединяют в один файл, например вот так:
Как можно увидеть в этом примере в один файл собрали не только иконки соц.сетей, но и другие элементы дизайна, такие как стрелочки, кнопки «мне нравится» и т.п. Но объединять абсолютно всю графику, которая используется на сайте в один спрайт не совсем правильно. Лучше поделить элементы на группы и подгружать только необходимые на определённом типе страниц.
На этой картинке я постарался схематически показать принцип работы css спрайтов. В случае когда блок больше фоновой картинки, то она по умолчанию помещается в левый верхний угол, если в css стилях задано no-repeat. Но мы можем менять положение фоновой картинки относительно левого верхнего угла блока. Особенно это полезно, если блок, например, по размеру равен отдельной иконке. У нас семь иконок размером 32х32 каждая. Они расположены по горизонтали, соответственно по вертикали нам положение фона изменять не нужно. Задаём положение фонового рисунка -32 px получаем в блоке иконку Твиттера, -64 px — иконку Фейсбук и т.д.
Как сделать кнопки-ссылки на профили в социальных сетях?
После регистрации в соответствующих сообществах и в FeedBurn я получил ссылки на профили, адрес моей RSS ленты и ссылку на форму подписки для получения обновлений по почте. Затем я их объединил в следующий код и вставил его в текстовый виджет в панели администрирования WordPress:
<div class="spmenu"> <A HREF="http://feeds.feedburner.com/seorubl" rel='external nofollow' title="Подписаться на RSS ленту"> <span class="sprite_rss"> </span> </A> <A HREF="https://twitter.com/Seorubl" rel='external nofollow' title="Следовать в Twitter"> <span class="sprite_twitter"> </span> </A> <A HREF="https://plus.google.com//102967354858915717090?rel=author" rel='external nofollow' title="Подписаться на G+ ленту"> <span class="sprite_gplus"> </span> </A> <A HREF="http://facebook.com/seorubl" rel='external nofollow' title="Читать в Facebook"> <span class="sprite_fbook"> </span> </A> <A HREF="http://feedburner.google.com/fb/a/mailverify?uri=seorubl&loc=ru_RU" rel='external nofollow' title="Получать обновления на почту"> <span class="sprite_email"> </span> </A> </div>
В анкоре ссылок в этом коде используется тег <span>: <span> </span>. Именно он и является тем самым блоком, в котором отображается нужная иконка. Сдвиг фонового изображения задаётся в файле стилей style.css через свойство background-position:
/* Кнопки подписки на обновления*/
.spmenu {
padding: 0px;
margin: 0px;
color: #4682B4;
text-align: left;
font-size: 100%;
}
.spmenu a, .spmenu a:hover {
cursor: pointer;
color: #1E90FF;
text-decoration: none;
font-size: 100%;
}
.spmenu span {
display: inline-block; width: 32px; height: 32px;
background: url("images/icons.png") no-repeat;
}
.spmenu span.sprite_gplus {background-position: 0px 0px;}
.spmenu span.sprite_twitter {background-position: -32px 0px;}
.spmenu span.sprite_fbook {background-position: -64px 0px;}
.spmenu span.sprite_rss {background-position: -96px 0px;}
.spmenu span.sprite_email {background-position: -128px 0px;}
Таким образом для каждого элемента <span> внутри класса «spmenu» задаётся фоновое изображение icons.png, которое представляет из себя набор иконок. Заметьте, что <span> является строчным встроенным элементов по спецификации HTML, поэтому, чтобы задать ему строгие размеры (ширину и высоту), мы должны изменить способ его отображения на блочный в CSS свойствах (строчка: display: inline-block;). Размеры блока 32х32 как раз соответствуют формату наших иконок.
Часто вместо <span> используют теги <i>, <img>, <em> и т.п., я считаю этот подход неправильным. Зачем изменять стили стандартных тегов, если есть универсальный <span>. А тег <img> вообще создаёт лишний запрос к серверу, а мы как раз, применяя спрайты, пытаемся сократить число этих запросов.
Где взять иконки для спрайта?
- Нарисовать самому.
- Поискать в поисковике среди картинок.
- В Сети есть специальные подборки иконок, которые часто раздаются бесплатно.
- Многие соц.сети и сервисы выставляют на сайтах официальные логотипы и иконки, которые можно использовать в своих приложениях.
- Чтобы сделать файл спрайтов иконок соц.сетей автоматически, можно воспользоваться сервисом share42.com. Выбираем иконки в нужном порядке, сохраняем архив со скриптом, распаковываем и видим картинку icons.png — готовый файл спрайтов.
Спрайты кроме отображения иконок полезны при разработке анимированного меню, когда при наведении на его пункт, он либо затемняется, либо загорается. Тогда в файле спрайтов хранят два набора кнопок и по событию «наведение мыши» динамически при помощи JS меняют положение фонового рисунка.
Обещанное вначале заметки меню кнопок-ссылок на каналы получения обновлений сделано, на этом заканчиваю статью. Подписывайтесь на обновления, самое интересное только начинается.