Inter-Net.PRO

Кнопки соцсетей для сайта на чистом CSS

  • 410 104
09 окт 2018 15:03 #21 от Inter-Net PRO

Сергей пишет: Сейчас иконки справа, нужно что бы были по середине подвала.

Смотрите, во первых я вам предлагаю действительно перенести кнопки во внутрь футера (сейчас они у вас под футером). Просто перенесите их во внутрь
<footer></footer>
Так с точки зрения сематики будет правильно.

Сами кнопки соцсетей нужно обернуть отдельным дивом, чтобы было как отдельный блок. Вот так:
<div class="social__button">
    <div class="social youtube">
        <a href="https://www.youtube.com/channel/UCBwTf30zkiTV1-Iu8al0Efw" target="_blank"><i class="fa fa-youtube fa-2x"></i></a>
    </div>
    <div class="social instagram">
        <a href="https://www.instagram.com/vagnn.ru" target="_blank"><i class="fa fa-instagram fa-2x"></i></a>
    </div>
    <div class="social vk">
        <a href="https://vk.com/nemetskydom" target="_blank"><i class="fa fa-vk fa-2x"></i></a>    
    </div>
</div>

Потом добавьте в css:
.social__button {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

В файле style.css 410 строчка класс .social a замените так:
.social a {
    display: flow-root;
    width: 46px;
    height: 46px;
    margin: 0 10px 10px 0;
    padding: 6px;
    text-align: center;
    background: #fff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 46px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
}

09 окт 2018 16:07 - 16 фев 2019 03:28 #22 от Сергей
Inter-Net PRO, Вы просто гений! Спасибо Вам большое и процветания!!! ))

  • 410 104
09 окт 2018 16:09 - 09 окт 2018 16:11 #23 от Inter-Net PRO

Сергей пишет: Буду очень благодарен за помощь!

Не пойму почему у вас весь контент прописан внутри блока header. Логично в хедере (шапка сайта) оставить логотип и контакты, а остальное вынести в main (семантический тег HTML для основного контента)
<main>
    <!-- Основной контент -->
</main>


И ещё посмотрите сюда на валидатор HTML:  validator.w3.org/nu/?doc=http://vagnn.ru/
Это инструмент для проверки html-кода от самой главной конторы по интернету.
Надеюсь вы сможете понять его подсказки по ошибкам в коде. Например пункт 4 - Ошибка. Подсказывает, что в теге h1 есть открытые теги но нет закрывающих. И действительно, смотрим, а там два открывающих тега span. По задумке второй span должен быть закрывающим. Просто делаем этот тег закрывающим (добавляем в него слеш / ):
</span>
По такой схеме исправляем все ошибки. Они там не сложные.


Так же я в коде вижу, что у вас два раза подключён иконочный шрифт FontAwesome. Один раз в хэде (версия 4.6.3) и второй раз с CDN (версия 4.7.0).

И ещё для слик-слайдера подключены стили и скрипт, но самого слайдера нет. Возможно он появится в будущем, но если нет, тогда эти файлы нужно отключить.

19 окт 2018 12:46 #24 от Марина
Здравствуйте!

Подскажите, пожалуйста, как на кнопке указать свой значок? Например, blokspot.

  • 410 104
19 окт 2018 23:57 - 20 окт 2018 19:19 #25 от Inter-Net PRO

Марина пишет: Подскажите, пожалуйста, как на кнопке указать свой значок? Например, blokspot.

Я извиняюсь, а что такое blokspot? Я по этому запросу нашёл пустую белую страницу. Может опечатка?

В моём примере были использованы шрифтовые иконки FontAwesome 4.7.0 вот тут вся их коллекция  inter-net.pro/font-awesome#brends

Ещё больше иконок для брендов в FontAwesome 5.

А если вам иконки на сайте нужны только для кнопок соцсетей, то лучше вообще вставить svg или svg-спрайт сделать. Так лучше - меньше вес страниц сайта, быстрее загрузка сайта, меньше запросов к серверу.
Спасибо сказали: Марина

20 окт 2018 18:30 #26 от Марина
Действительно опечатка. Правильное название - blogspot. Спасибо за Ваш ответ и ссылку на значки!

  • 410 104
20 окт 2018 19:40 #27 от Inter-Net PRO

Марина пишет: Действительно опечатка. Правильное название - blogspot.

В Fontawesome 4.7.0 нет иконки для Blogger, она в 5 версии появилась  fontawesome.com/icons/blogger-b?style=brands
Просто статью написано когда ещё последней версией было 4.7.0

Но если только подключаете Fontawesome, то можно включить 5, только названия классов нужно поменять. У меня в футере иконки в кнопках из 5.
Спасибо сказали: Марина

21 окт 2018 14:03 #28 от Марина
Подскажите, пожалуйста, что я делаю не так. Вот это @import url не пропускается Вордпресс, он пишет, что это недопустимо. Попыталась подключить через "линк", но тоже ничего не вышло. Решила использовать спецсимволы типа '\2709'; и опять ничего не отображается на кнопках. У Вас в статье вроде простой код. Но почему спецсимволы не показываются и подключить вот это  maxcdn.bootstrapcdn.com/font-awesome/4.7...font-awesome.min.css не удается?

  • 410 104
21 окт 2018 21:03 #29 от Inter-Net PRO

Марина пишет: Решила использовать спецсимволы типа '\2709';

Не, это не то. Это уже из подключённого иконочного шрифта вытягивает иконки.

Марина пишет: Вот это @import url не пропускается Вордпресс, он пишет, что это недопустимо. Попыталась подключить через "линк", но тоже ничего не вышло. И подключить вот это  maxcdn.bootstrapcdn.com/font-awesome/4.7...font-awesome.min.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;}
Жмём Сохранить, потом Опубликовать.

Затем Внешний вид - Виджеты - добавляем виджет 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>
и сохраняем.
Кнопки появятся на сайте. Если будут какие кривости - цвет не тот, тени, отступы неправильные - можно подправить CSS. Если с этим не дружите, можете ссылку оставить, я подскажу как поправить.
Спасибо сказали: Марина

22 окт 2018 10:32 #30 от Марина
Большое спасибо Вам за подсказку. Не подозревала, что в админке можно выбрать - Внешний вид - Настроить - Дополнительные стили. Получилось подключить иконки.

18 дек 2018 11:00 #31 от Евгений Кедров
Спасибо, все работает.
Кнопки Viber нет случайно?

  • 410 104
18 дек 2018 20:20 - 16 фев 2019 00:57 #32 от Inter-Net PRO

Евгений Кедров пишет: Кнопки Viber нет случайно?

В FontAwesome 4.7.0 нет иконки с названием Viber.
Зато есть очень похожая иконка whatsapp, как вариант можно взять её.
<div class="social whatsapp" title="наш Viber">
    <a href="#" target="_blank"><i class="fa fa-whatsapp fa-2x"></i></a>
</div>
Добавил атрибут title - это всплывающая подсказка при наведении курсора мышки на кнопку. Желательно и остальным кнопкам его проставить, если логотипы могут вводить в заблуждение. Текст: наш Viber (внутри атрибута), можете изменять.

А в CSS изменить цвет фона вот так:
.whatsapp a:hover{background:#7b519c;color:#fff;}



Но попробуйте лучше сначала вот так:

Можно в кнопку всунуть SVG-иконку Viber`a.
<div class="social viber">
   <a href="#" target="_blank">
      <svg viewBox="0 0 512 512">
         <path fill="currentColor" d="M444 49.9C431.3 38.2 379.9.9 265.3.4c0 0-135.1-8.1-200.9 52.3C27.8 89.3 14.9 143 13.5 209.5c-1.4 66.5-3.1 191.1 117 224.9h.1l-.1 51.6s-.8 20.9 13 25.1c16.6 5.2 26.4-10.7 42.3-27.8 8.7-9.4 20.7-23.2 29.8-33.7 82.2 6.9 145.3-8.9 152.5-11.2 16.6-5.4 110.5-17.4 125.7-142 15.8-128.6-7.6-209.8-49.8-246.5zM457.9 287c-12.9 104-89 110.6-103 115.1-6 1.9-61.5 15.7-131.2 11.2 0 0-52 62.7-68.2 79-5.3 5.3-11.1 4.8-11-5.7 0-6.9.4-85.7.4-85.7-.1 0-.1 0 0 0-101.8-28.2-95.8-134.3-94.7-189.8 1.1-55.5 11.6-101 42.6-131.6 55.7-50.5 170.4-43 170.4-43 96.9.4 143.3 29.6 154.1 39.4 35.7 30.6 53.9 103.8 40.6 211.1zm-139-80.8c.4 8.6-12.5 9.2-12.9.6-1.1-22-11.4-32.7-32.6-33.9-8.6-.5-7.8-13.4.7-12.9 27.9 1.5 43.4 17.5 44.8 46.2zm20.3 11.3c1-42.4-25.5-75.6-75.8-79.3-8.5-.6-7.6-13.5.9-12.9 58 4.2 88.9 44.1 87.8 92.5-.1 8.6-13.1 8.2-12.9-.3zm47 13.4c.1 8.6-12.9 8.7-12.9.1-.6-81.5-54.9-125.9-120.8-126.4-8.5-.1-8.5-12.9 0-12.9 73.7.5 133 51.4 133.7 139.2zM374.9 329v.2c-10.8 19-31 40-51.8 33.3l-.2-.3c-21.1-5.9-70.8-31.5-102.2-56.5-16.2-12.8-31-27.9-42.4-42.4-10.3-12.9-20.7-28.2-30.8-46.6-21.3-38.5-26-55.7-26-55.7-6.7-20.8 14.2-41 33.3-51.8h.2c9.2-4.8 18-3.2 23.9 3.9 0 0 12.4 14.8 17.7 22.1 5 6.8 11.7 17.7 15.2 23.8 6.1 10.9 2.3 22-3.7 26.6l-12 9.6c-6.1 4.9-5.3 14-5.3 14s17.8 67.3 84.3 84.3c0 0 9.1.8 14-5.3l9.6-12c4.6-6 15.7-9.8 26.6-3.7 14.7 8.3 33.4 21.2 45.8 32.9 7 5.7 8.6 14.4 3.8 23.6z"></path>
      </svg>
   </a>
</div>

В CSS добавить:
.viber a:hover{background:#7b519c;color:#fff;}

Я в консоле браузера на примере кнопок в статье пробовал - отображается правильно, но возможно нужно будет размеры подобрать и добавить.

30 янв 2019 17:48 #33 от Анжела
Здравствуйте.

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

  • 410 104
30 янв 2019 23:34 #34 от Inter-Net PRO

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

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

01 фев 2019 14:13 #35 от Анжела
Благодарю что откликнулись.

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

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

Если вас не затруднит сделайте HTML разметку с выше перечисленными мессенджерами.

01 фев 2019 14:21 #36 от Анжела
И чтобы без дополнительного обращения к иным серверам.

  • 410 104
01 фев 2019 18:15 - 01 фев 2019 18:17 #37 от Inter-Net PRO

Анжела пишет: Я не могу понять следующее! Что вставлять в 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>
В классе открывающего дива транслитом прописано название соцсети.
В чём проблема из списка вырезать ненужные и отсортировать в нужном для вас порядке?

25 март 2019 16:26 #38 от Сергей Пересунько
Добрый день. Подскажите пожалуйста, не могу понять где беда.
Вставляю в php код
вставляю в CSS код
результат = подтягивается ТОЛЬКО иконка телеграмма 
все остальное пусто, только описанные в CSS круги, меняющие цвет при наведении.
Вложения:

  • 410 104
25 март 2019 19:27 - 25 март 2019 22:41 #39 от Inter-Net PRO

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

А какой у вас иконочный шрифт подключен к сайту - FontAwesome?
По скриншоту впечатление что у вас на сайте используется устаревшая версия где нет брендированных иконок. Тогда нужно заменить на FontAwesome 4.7.0 или FontAwesome 5.
А если у вас FontAwesome 5, то там нужно вместо fa проставить fab, но не похоже на пятёрку. В ней если иконка не найдена мигающий вопросик выводится.
Уточните версию иконочного шрифта или киньте ссылку на сайт (я потом её затру).

26 март 2019 08:39 #40 от Сергей Пересунько
Сделал так:
в .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;}
Заработало. =)
Шрифты подключены, но почему не заводилось - без понятия.

Авторизация

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