Создаем собственные иконки социальных сетей на CSS3
Практически на всех сайтах, блогах, журналах и корпоративных сайтах в интернете сегодня можно наткнуться на кнопки публикации контента в социальные сети. Будь то интересная статья, профиль, работа в портфолио, кнопка «Like» или «Follow». Это руководство посвящено тому, как можно самостоятельно поэтапно создать кнопки социальных сетей. Итак, давайте приступим!
Этап 1 – Разрабатываем кнопки
Чтобы начать разработку наших кнопок социальных сетей, давайте сначала создадим саму кнопку. Добавьте этот простой код HTML.
<html>
<head>
</head>
<a class="share__btn" href="#">Tweet</a>
</div>
<a class="share__btn" href="#">Like</a>
</div>
<a class="share__btn" href="#">+1</a>
</div>
</html>Теперь, когда HTML-код на своем месте, можно приступить к стилизации и приданию формы кнопке. Нижеприведенный CSS будет использован для создания границ и стилизации как самих кнопок, так и счетчика.
body {
font: 0.875em/1.5 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 42px 40px;
}
a {
text-decoration: none;
}
.share {
display: inline-block;
margin-right: 20px;
}
.share__count {
background-color: #fff;
border: solid 1px #a5b1bd;
border-radius: 3px;
/* add in vendor rules */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #424a4d;
float: left;
font-weight: bold;
margin-right: 10px;
padding: 4px 10px;
position: relative;
text-align: center;
}
Мы уже практически закончили разработку базового шаблона для кнопок и счетчика, и теперь нам нужно добавить CSS-код, чтобы завершить наши кнопки.
.share_size_large > .share__count {
display: block;
float: none;
font-size: 18px;
margin-right: 0;
margin-bottom: 12px;
padding: 10px 0;
}
.share__btn {
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
/* add in vendor rules */
box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15);
/* add in vendor rules */
color: #fff;
display: inline-block;
font-size: 13px;
font-weight: bold;
padding: 5px 10px;
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}Этап 2 – Стилизуем кнопку Share (Поделиться)
Так как мы закончили разработку шаблона для нашей кнопки, мы можем приступить к их стилизации, добавив HTML-код, который указывает на CSS-элемент.
Давайте добавим нижеприведенный HTML-код к нашим кнопкам публикации контента. Теперь важно помнить о том, что стиль к кнопкам посредством CSS-кода мы добавим позже. Если вы хотите сделать кнопки в стиле Facebook, то добавьте “type_facebook”. Если же вам нужен стиль Twitter, то используйте “type_twitter”. Вы всегда можете оформить цвета и стили разных кнопок, руководствуясь вашим профилем в социальной сети.
.share_size_large > .share__btn {
padding: 5px 0;
width: 100%;
}
.share_type_twitter > .share__btn {
background-color: #4099FF;
}
.share_type_facebook > .share__btn {
background-color: #3B5999;
}
.share_type_gplus > .share__btn {
background-color: #F90101;
}
Этап 3 – Создаем счетчик
Сейчас нам нужно заняться разработкой счетчика поделившихся пользователей. Давайте начнем с добавления простого HTML-кода к каждой из 4 наших кнопок, если вам нужен счетчик рядом со всеми кнопками. Вы всегда можете использовать счетчик рядом с вашими кнопками. В 5 этапе сегодняшнего руководства вы узнаете, как это сделать.
Теперь давайте добавим некоторые стили к счетчикам. В общем, это создаст шаблон для блока счетчика.
.share__count:before, .share__count:after {
content: '';
display: block;
height: 0;
top: 50%;
position: absolute;
right: -14px;
width: 0;
margin-top: -6px;
}
.share_size_large > .share__count:before, .share_size_large > .share__count:after {
content: '';
display: block;
height: 0;
left: 50%;
position: absolute;
top: auto;
width: 0;
}Этап 4 – Завершаем стилизацию кнопок
Мы завершаем стилизацию наших кнопок социальных сетей и счетчиков, добавив к ним стили и небольшой указатель рядом с кнопками. Следующий код также поможет вам решить проблемы с границами и шаблоном ваших кнопок.
.share__count:before {
border: solid 7px transparent;
border-color: transparent transparent transparent #a5b1bd;
}
.share_size_large > .share__count:before {
border-color: #a5b1bd transparent transparent transparent;
bottom: -14px;
margin-left: -7px;
}
.share__count:after {
border: solid 6px transparent;
border-color: transparent transparent transparent #fff;
right: -12px;
margin-top: -5px;
}
.share_size_large > .share__count:after {
margin-left: -6px;
bottom: -12px;
border-color: #fff transparent transparent transparent;
}
Этап 5 – Добавляем работающий счетчик
Так как мы уже завершили разработку дизайна наших кнопок и счетчиков, пришло время заняться «начинкой» счетчиков. Для этого мы воспользуемся PHP. Сейчас, если вам нужно, чтобы счетчик работал правильно, получите API счетчиков публикаций, отметок Like и комментариев для Facebook/Twitter/Google Plus, и замените URL в параметре file_get_contents на URL к вашему API.
PHP-код представлен ниже, просто не забудьте назвать ваш файл social.php, если вы не хотите использовать предложенный нами код.
'; $fbend = '';
$fbpage = $facebook;
$fbparts = explode($fbbegin,$fbpage);
$fbpage = $fbparts[1];
$fbparts = explode($fbend,$fbpage);
$fbcount = $fbparts[0];
if($fbcount == '') { $fbcount = '0'; }
}
function twit_count() {
global $tcount;
$twit = file_get_contents('http://api.twitter.com/YOURPOST/PAGE');
$begin = ''; $end = '';
$page = $twit;
$parts = explode($begin,$page);
$page = $parts[1];
$parts = explode($end,$page);
$tcount = $parts[0];
if($tcount == '') { $tcount = '0'; }
}
?>Так как мы создали social.php, теперь мы можем связать наши кнопки социальных сетей со счетчиком. Поместите этот небольшой отрывок PHP-кода на место ненастоящих цифр счетчика, которые расположены рядом с вашей кнопкой. Не забудьте заменить fbcount корректным названием в PHP-файле.
Процесс создания счетчика для Google+ немного отличается. Просто добавьте следующий код туда, где вы хотите отображать цифру счетчика. Есть вероятность, что счетчик Google+ вам захочется сделать немного шире. Таким образом, он будет выглядеть лучше, так как счетчик Google+ немного отличается от счетчиков Twitter и Facebook API.
Завершение
На этом мы закончили разработку наших кнопок социальных сетей, и теперь вы можете использовать их в вашей CMS или сайте. Не забудьте раздобыть ваш API Facebook до того, как начнете тестировать счетчик. Надеемся, что вам поможет наше руководство.
Комментариев 0