Inter-Net.PRO
Кнопки для соцсетей

  Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.

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

  Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.


Кнопки социальных сетей


Набор круглых кнопок

  Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:

 

 

 

 

 

Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.

<div class="social github">
    <a href="#" target="_blank"><i class="fa fa-github fa-2x"></i></a>
</div>
<div class="social youtube">
    <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
<div class="social google-pluse">
    <a href="#" target="_blank"><i class="fa fa-google-plus fa-2x"></i></a>
</div>
<div class="social twitter">
    <a href="#" target="_blank"><i class="fa fa-twitter fa-2x"></i></a>
</div>
<div class="social instagram">
    <a href="#" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social facebook">
    <a href="#" target="_blank"><i class="fa fa-facebook fa-2x"></i></a>    
</div>
<div class="social skype">
    <a href="#" target="_blank"><i class="fa fa-skype fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="#" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
</div>
<div class="social odnoklassniki">
    <a href="#" target="_blank"><i class="fa fa-odnoklassniki fa-2x"></i></a>   
</div>
<div class="social pinterest">
    <a href="#" target="_blank"><i class="fa fa-pinterest fa-2x"></i></a>
</div> 
<div class="social linkedin">
    <a href="#" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a>
</div>
<div class="social telegram">
    <a href="#" target="_blank"><i class="fa fa-paper-plane fa-2x"></i></a>
</div>
<div class="social tumblr">
    <a href="#" target="_blank"><i class="fa fa-tumblr fa-2x"></i></a>
</div>
<div class="social windows">
    <a href="#" target="_blank"><i class="fa fa-windows fa-2x"></i></a>
</div>
<div class="social whatsapp">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
<div class="social weibo">
    <a href="#" target="_blank"><i class="fa fa-weibo fa-2x"></i></a>
</div>
<div class="social dropbox">
    <a href="#" target="_blank"><i class="fa fa-dropbox fa-2x"></i></a>
</div>

 

  Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.

  Начинается он с <div class... и заканчивается </div>

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

Надеюсь с вставкой HTML-кода кнопок разберётесь.

Ссылка на соц сеть

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


Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.

Код CSS

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);
.social a {
    text-align: center;
    width: 46px;
    height: 46px;
    float: left;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 46px;
    margin: 0 10px 10px 0;
    padding: 6px;
    color: #000;
}
.github a:hover {background: #191919; color: #fff;}
.youtube a:hover {background: #c4302b; color: #fff;}
.google-pluse a:hover {background: #DD4B39; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}
.skype a:hover {background: #00aff0; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.odnoklassniki a:hover {background: #f93; color: #fff;}
.pinterest a:hover {background: #c8232c; color: #fff;}
.linkedin a:hover {background: #0e76a8; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
.tumblr a:hover {background: #34526f; color: #fff;}
.windows a:hover {background: #125acd; color: #fff;}
.whatsapp a:hover {background: #50b154; color: #fff;}
.weibo a:hover {background: #d52b2b; color: #fff;}
.dropbox a:hover {background: #1087dd; color: #fff;}

 

CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта.

Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.

  Если у вас к сайту уже подключен иконочный шрифт Font Awesome (по умолчанию подключен в бутстрап 4), то можете удалить из кода первую строчку.

  Так же начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.

Например:

.github a:hover {background: #191919; color: #fff;}

Набор квадратных кнопок

  Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:

 

 

 

 

 

  Для применения квадратных кнопок нужно всё тоже самое что и для круглых, только в CSS заменить в 10-строчке значение и вместо:

border-radius: 46px;

изменяем на:

border-radius: 6px;

 

  Надеюсь вам понравится мой вариант и оформление кнопок для соц сетей. Ну а если у вас возникли трудности, то можете задавать свои вопросы ниже в комментариях.

 

Войдите чтобы комментировать

Inter-Net PRO аватар Inter-Net PRO ответил в теме 26 апр 2019 16:24 #1

ВарфейСкилл_Ютуб пишет:   Упростим написание задачки)))

А в чём упрощение? Обернуть в тег ul чтобы потом стили user_agent_stylesheet браузера затирать?
ВарфейСкилл_Ютуб  аватар ВарфейСкилл_Ютуб ответил в теме 25 апр 2019 23:10 #2

ВарфейСкилл_Ютуб пишет:   Упростим написание задачки))) ! Лунный свет открывает портал программирования когда ты не спишь  !                                                                                                                                
копия 
jsfiddle.net/Kolotokon/qL3kcneu/

ВарфейСкилл_Ютуб  аватар ВарфейСкилл_Ютуб ответил в теме 25 апр 2019 23:08 #3
  Упростим написание задачки))) ! Лунный свет открывает портал программирования когда ты не спишь и не сообщаешь об этом)!
<div class="social-icon-header">
    <ul>
        <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
        <li><a href="#"><i class="fab fa-vk fa-x1"></i></a></li>
        <li><a href="#"><i class="fab fa-google-plus-g"></i></a></li>
        <li><a href="#"><i class="fab fa-twitter"></i></a></li>
        <li><a href="#"><i class="fab fa-instagram"></i></a></li>
    </ul>
</div>
копия 
jsfiddle.net/Kolotokon/qL3kcneu/
Сергей Пересунько аватар Сергей Пересунько ответил в теме 26 март 2019 08:39 #4
Сделал так:
в .php
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"><div class="social instagram">
    <a href="https://instagram.com/" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
</div>
<div class="social vk">
    <a href="https://vk.com/" target="_blank"><i class="fa fa-vk fa-2x"></i></a>
    </div>
в .css
.social a {    text-align: center;
    width: 36px;
    height: 36px;
    float: left;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
    border-radius: 8px;
    margin: 0 10px 1px 0;
    padding: 2px;
    color: #000;
}
.youtube a:hover {background: #c4302b; color: #fff;}
.instagram a:hover {background: #fc54ff; color: #fff;}
.vk a:hover {background: #5d84ae; color: #fff;}
.telegram a:hover {background: #249bd7; color: #fff;}
Заработало. =)
Шрифты подключены, но почему не заводилось - без понятия.
Inter-Net PRO аватар Inter-Net PRO ответил в теме 25 март 2019 19:27 #5

Сергей Пересунько пишет: подтягивается ТОЛЬКО иконка телеграмма 
все остальное пусто, только описанные в CSS круги, меняющие цвет при наведении.

А какой у вас иконочный шрифт подключен к сайту - FontAwesome?
По скриншоту впечатление что у вас на сайте используется устаревшая версия где нет брендированных иконок. Тогда нужно заменить на FontAwesome 4.7.0 или FontAwesome 5.
А если у вас FontAwesome 5, то там нужно вместо fa проставить fab, но не похоже на пятёрку. В ней если иконка не найдена мигающий вопросик выводится.
Уточните версию иконочного шрифта или киньте ссылку на сайт (я потом её затру).
Сергей Пересунько аватар Сергей Пересунько ответил в теме 25 март 2019 16:26 #6
Добрый день. Подскажите пожалуйста, не могу понять где беда.
Вставляю в php код
вставляю в CSS код
результат = подтягивается ТОЛЬКО иконка телеграмма 
все остальное пусто, только описанные в CSS круги, меняющие цвет при наведении.
Inter-Net PRO аватар Inter-Net PRO ответил в теме 01 фев 2019 18:15 #7

Анжела пишет: Я не могу понять следующее! Что вставлять в HTML разметке вместо #

Вместо решётки вставляется ссылка на вашу страничку в соцсети.

Анжела пишет: Мне требуется, чтобы в (мобильной версии особенно) так как 90% трафика из мобильной, чтобы пользователю при нажатии на кнопку открывалось приложение (не лично его аккаунт) и пользователь мог поделится постом.

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

Вот в документации для Android есть такой пример для HTML ссылки открывающей приложение, с альтернативной ссылкой на страницу в соцсети если у пользователя не установлено приложение:
<a href="intent://scan/#Intent;scheme=zxing;package=com.google.zxing.client.android;S.browser_fallback_url=http%3A%2F%2Fzxing.org;end"> Take a QR code </a>
Схема не сложная, но нужно искать название полей для инициализации приложений.
Ну и наверно нужно прикрутить библиотечку определяющую устройства, чтоб для тех же андроидов выводит ссылку по такой схеме, для компов - обычную ссылку, ну и для айфонов смотреть что да как они делают в IOS.


А вот кнопки поделиться - это отдельная штука, для неё отдельные кнопки делаются. Для разных CMS (движков сайта) полно готовых реализаций.
Но можно и самостоятельно повставлять их. Соцсети предоставляют готовый код для вставки. Вот пример для ВК , а вот документация . Такие же есть в фейсбук, одноклассниках и т.д.
Я где то делал себе список на доки кнопок поделиться, но ищу не могу найти. В принцепе гугл к ним должен легко привести.

Анжела пишет: ВКонтакте Одноклассники Фейсбук Маилру Почта Вайбер Вацап Телеграм Гугл+ Ринтерест
Если вас не затруднит сделайте HTML разметку с выше перечисленными мессенджерами.

Вот одна кнопка соцсети (в данном случае YouTube):
<div class="social youtube">
   <a href="#" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
</div>
В классе открывающего дива транслитом прописано название соцсети.
В чём проблема из списка вырезать ненужные и отсортировать в нужном для вас порядке?
Анжела аватар Анжела ответил в теме 01 фев 2019 14:21 #8
И чтобы без дополнительного обращения к иным серверам.
Анжела аватар Анжела ответил в теме 01 фев 2019 14:13 #9
Благодарю что откликнулись.

Я не могу понять следующее! Что вставлять в HTML разметке вместо #
Мне требуется, чтобы в (мобильной версии особенно) так как 90% трафика из мобильной, чтобы пользователю при нажатии на кнопку открывалось приложение (не лично его аккаунт) и пользователь мог поделится постом.

ВКонтакте
Одноклассники
Фейсбук
Маилру
Почта
Вайбер
Вацап
Телеграм
Гугл+
Ринтерест

Если вас не затруднит сделайте HTML разметку с выше перечисленными мессенджерами.
Inter-Net PRO аватар Inter-Net PRO ответил в теме 30 янв 2019 23:34 #10

Анжела пишет: Меня интересует как код работает в мобильной версии?
И как target="_blank" для мобилки нужен или нет?

1. Для Android 2 работать точно не будет, а для всех остальных норм:  caniuse.com/#feat=svg
2. Лично я за target="_blank". В мобилках в браузере ведь тоже есть вкладки.

Авторизация

Войти через соцсети: