Создаем собственные иконки социальных сетей на CSS3

Создаем собственные иконки социальных сетей на 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;
}

Создаем собственные иконки социальных сетей на CSS3


Мы уже практически закончили разработку базового шаблона для кнопок и счетчика, и теперь нам нужно добавить 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;
}

Создаем собственные иконки социальных сетей на CSS3


Этап 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;
}

Создаем собственные иконки социальных сетей на CSS3


Этап 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.

Создаем собственные иконки социальных сетей на CSS3


Завершение

На этом мы закончили разработку наших кнопок социальных сетей, и теперь вы можете использовать их в вашей CMS или сайте. Не забудьте раздобыть ваш API Facebook до того, как начнете тестировать счетчик. Надеемся, что вам поможет наше руководство.

Добавить комментарий

Нам важно знать ваше мнение. Оставьте свой отзыв или ответ

Комментариев 0

Обновления на форуме