Вконтакте
Телефон для заказов: +7 (910) 487 81 94
Подписка на RSS

Самостоятельно изготавливаем иконки для добавления поста в социальные сервисы

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

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

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

Например, чтобы найти иконку Google Buzz, я написал запрос «Google Buzz Logo», и вот что передо мной открылось:

Я перешёл в картинки и выбрал самую большую, которую затем уменьшил в графическом редакторе до 32 пикселей. Редактор подойдёт, по всей видимости, любой. Photoshop, Illustrator, Gimp, Fireworks — да всё, что угодно, кроме, разве что, Paint.

Чаще всего в работе я использую Fireworks, поэтому и иконки я делал в нём.

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

Теперь нам нужно будет добавить текст. Здесь я решил немного схитрить и не писать его непосредственно в редакторе, так как пиксельные шрифты — некрасивые, а те же Arial и Verdana при маленьком размере выглядят очень неаккуратно.

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

Для тех, кому интересно, воспроизведу примерный код той странички. Это HTML:

<p class="twitter">Добавить<br />в Twitter</p> <p class="vkontakte">
<span class="vkontakte">Поделиться<br />Вконтакте</span></p> 
<p class="fb"><span class="fb">Поделиться<br />на  Facebook</span></p> 
<p class="lj">Поделиться<br />на Livejournal</p> 
<p class="buzz">Добавить<br />в Живую Ленту</p>

Последний открывающий тег p — гадость, которую нужно удалить, если будете копировать мой код.

А это CSS:

body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-weight: bold;
line-height:140%;
} 
.twitter { 
color: #1CADD5; 
} 
.vkontakte {
color: #225193;
} 
.fb {
color: #3F63C2;
} 
body { 
background-color: #FFF; 
} 
.lj {
color: #366AB0;
} 
.buzz {
color: #007BF5;
}

А так выглядели тексты на скриншоте:

После компоновки иконок и текста оставалось порезать своё творчество на отдельные кнопки и добавить их в шаблон. Кнопки я сохранял как прозрачный .gif с белыми краями.

Покончив с резкой, я загрузил получившиеся файлы на сервер в папку /wp-content/themes/_мой_шаблон_/images/icons и отправился на в админку WordPress на страницу Внешний вид→Редактор→Основной шаблон (index.php).

Здесь перед контейнером, выводящим содержимое поста, который у меня начинается следующим образом:

<div class="entry

я вставил сами иконки:

<div class="topsocialicons">
<a href="http://twitter.com/?status=RT @artsaveliev <?php the_title(); ?>: <?php the_permalink() ?>" class="toptwitter" rel="nofollow"></a>
<a href="http://vkontakte.ru/share.php?url=<?php the_permalink() ?>" class="topvkontakte" rel="nofollow"></a>
<a href="http://www.facebook.com/sharer.php?u=<?php the_permalink() ?>&t=<?php the_title(); ?>&src=sp" class="topfacebook" rel="nofollow"></a>
<a href="http://www.livejournal.com/update.bml?event=<?php the_permalink() ?>&subject=<?php the_title(); ?>" class="toplivejournal" rel="nofollow"></a>
<a href="http://www.google.com/buzz/post?url=<?php the_permalink() ?>&type=small-count" class="topbuzz" rel="nofollow"></a>
</div>

Что это за открывающий тег p в коде — я не знаю, но меня достала эта самодеятельность моего блога. Будем разбираться. Если знаете, как прибить эту гадость, чтобы я мог делать нормальные примеры кода — поделитесь решением. Использование pre место code тоже как-то ни к чему не приводит хорошему.

Код с иконками я вставил также и в файл single.php, до и после содержимого страницы.

Затем мне осталось лишь отредактировать файл style.css, добавив туда необходимые стили:

.topsocialicons {
height:32px; 
display:block; 
margin-top:15px; 
padding-left:15px;
}
.bottomsocialicons {
height:32px; 
display:block; 
padding-top:15px; 
padding-left:15px; 
background-image:url(images/center_separator.jpg); 
background-position:top; 
background-repeat:repeat-x; 
padding-bottom:15px;
}
a.toptwitter {
background-image: url(images/icons/twitter.gif); 
width:93px; 
background-repeat:no-repeat; 
background-position:left top; 
height:32px; 
margin-right:15px; 
display:block; 
float:left;
}
a.topvkontakte {
background-image: url(images/icons/vkontakte.gif); 
width:106px; 
background-repeat:no-repeat; 
background-position:left top; 
height:32px; 
margin-right:15px; 
display:block; 
float:left;
}
a.topfacebook{
background-image: url(images/icons/facebook.gif); 
width:110px; 
background-repeat:no-repeat; 
background-position:left top; 
height:32px; 
margin-right:15px; 
display:block; 
float:left;
}
a.toplivejournal{
background-image: url(images/icons/livejournal.gif);
width:117px;
background-repeat:no-repeat; 
background-position:left top; 
height:32px; 
margin-right:15px; 
display:block; float:left;
}
a.topbuzz{
background-image: url(images/icons/buzz.gif); 
width:132px; 
background-repeat:no-repeat; 
background-position:left top; 
height:32px; 
margin-right:15px; 
display:block; 
float:left;
}

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

Надеюсь, у вас всё получится, а если будут вопросы — знаете куда обращаться =)

А вы используете какие-либо сервисы иконок/ретвитов или тоже предпочитаете, чтобы все иконки были в одном стиле?

Желаю вам всего самого вам подходящего!
Seogad

Понравилась статья?

Создание блога под ключ всего за 999 рублей!

«Самостоятельно изготавливаем иконки для добавления поста в социальные сервисы» — комментарии (6)

  • По-моему лучше самому сделать, а не подцеплять сторонние скрипты. К тому же 10-15% пользователей просматривает сайты без включенной поддержки явы скрипт. Я вот только не понял, зачем таким способом создавать нужные логотипы, когда уже давно все это есть в инете причем нужного размера и формата.

  • @lepus, чтобы все они были в одном стиле и гармонично смотрелись на сайте!

  • Ну так у вас на сайте они стандартные. Более того, например, для твитера и фейсбука можно было тоже подобрать иконки с прямыми углами. Вы не пробовали пользоваться сервисом http://www.iconfinder.com/ ? Там иногда можно подобрать целую группу однотипным картинок.
    Кстати, последнее поле (=15+4) когда-нибудь меняется, а то уже пять раз выводит одно и то же.

  • @lepus, поле не меняется. На сайте они не стандартные, к ним добавлены тексты, что и делает их в одном стиле.

  • @Seogad, заметно, что иконки в разном стиле. Я вот как делаю: в фотошопе рисую кнопку, а затем меняю кнопке цвета и логотипы (логотипы ищу в инете). Все получается в одном стиле.

    Еще текст можно сделать в виде обычного текста, а у фона отменить повторение. И лишние килобайты грузить не надо будет :) .

  • Класс, спасибо! Данная статья, довольно актуальна на сегодняшний день, спасибо автору за статью!

Ваш комментарий

Поля отмеченные * нужно в любом случае заполнить. Пожалуйста, воспринимайте буквально текст «Блог или профиль в соц. сети», не оставляйте ссылки на интернет-магазины, коммерческие сайты и страницы, на которых нельзя познакомиться с вами и вашей деятельностью - такое творчество будет удалено. Это dofollow блог.