Как сделать соцсети на сайте html

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

Узнать, как стилизовать кнопки социальных сетей с помощью CSS.

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

Создать кнопки социальных сетей

Шаг 1) Добавить HTML:

Пример

Шаг 2) Добавить CSS:

Square Пример

/* Стиль все шрифты иконок */
.fa padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
>

/* Добавить эффект наведения, если вы хотите */
.fa:hover opacity: 0.7;
>

/* Установите определенный цвет для каждого бренда */

/* Facebook */
.fa-facebook background: #3B5998;
color: white;
>

/* Twitter */
.fa-twitter background: #55ACEE;
color: white;
>

Круглая кнопка

Совет: Добавить border-radius:50% для создания круглых кнопок и уменьшения width :

Rounded Пример

.fa <
padding: 20px;
font-size: 30px;
width: 30px;
text-align: center;
text-decoration: none;
border-radius: 50%;
>

Совет: Зайдите на наш учебник Иконки, чтобы узнать больше о значках.

Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.

Мы только что запустили
SchoolsW3 видео

ВЫБОР ЦВЕТА

курс сегодня!

Сообщить об ошибке

Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:

Ваше предложение:

Спасибо Вам за то, что помогаете!

Ваше сообщение было отправлено в SchoolsW3.

ТОП Учебники

ТОП Справочники

ТОП Примеры

Получить сертификат

SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.

Как добавить социальные кнопки на сайт?

В этой статье мы рассмотрим различные способы создания блоков «Поделиться» и «Мне нравится» в том числе включая вариант без использования сторонних сервисов (через URL-адреса прямого доступа). Кроме этого ещё разберём как можно оформить ссылки на официальные профили компании в социальных сетях.

Социальные сети на сайте

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

Социальные сети для компании (ресурса) — это тренд современного мира. Они нужны для того, чтобы не упустить значительную часть своей аудитории и потенциальных клиентов. В основном это связано с тем, что в социальных сетях зарегистрировано очень большое количество пользователей, многие из которых проводят там значительную часть своего онлайн времени.

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

Например, на сайте «mebel.ru» они находятся в правом нижней части:

Кроме ссылок на официальные страницы бренда, на сайтах ещё очень часто можно увидеть кнопки «share» (поделиться) и «like» (нравится). Их обычно располагают рядом со статьёй, товаром или услугой.

Например, на сайте «ferra.ru» кнопки «share» расположены сразу под заголовком статьи:

Кнопки «share» позволяют быстро поделиться этим контентом в социальных сетях. При нажатию на неё автоматически формируется ссылка на этот контент и пользователю останется только нажать «Отправить». После чего она будет опубликована в его личном аккаунте, которую увидят все его подписчики.

Кнопки «like» обычно кроме возможности быстро поделиться, позволяют ещё посетителям сайта одним кликом выразить своё отношение к контенту, т.е. зарегистрировать отметку «Нравится».

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

Ссылки на официальные профили в социальных сетях

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

Выполняется это очень просто.

Первое что нужно сделать — это создать HTML код:

Второе — написать стили для их оформления:

.social-icons { display: flex; justify-content: center; list-style: none; margin-top: 1rem; margin-bottom: 1rem; padding-left: 0; } .social-icons>li { margin-left: 0.25rem; margin-right: 0.25rem; } .social-icons a { position: relative; background-color: #eee; display: block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: background-color .3s ease-in-out; width: 2.5rem; height: 2.5rem; border-radius: .25rem; } .social-icons a:hover { background-color: #e0e0e0; } .social-icons a::before { content: ""; position: absolute; width: 1.2rem; height: 1.2rem; left: .65rem; top: .65rem; background: transparent no-repeat center center; background-size: 100% 100%; } .social-icons .social-icon-twitter::before { background-image: url(". "); } .social-icons .social-icon-fb::before { background-image: url(". "); } .social-icons .social-icon-vk::before { background-image: url(". "); } .social-icons .social-icon-telegram::before { background-image: url(". "); } .social-icons .social-icon-youtube::before { background-image: url(". "); } 

Кнопки «Поделиться» и «Мне нравится»

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

Наиболее простой способ вставить такие блоки на сайт — это воспользоваться сторонними сервисами .

Использование сторонних сервисов

Создание соцкнопок этим способом выполняется легко. Для этого достаточно перейти на любой сервис, представляющий такую возможность, выбрать в нём вид кнопок, вариант их оформления и нужный набор сервисов. Обычно все эти действия выполняются очень просто (через конструктор). Далее, после того как вы всё окончательно настроили, нужно скопировать полученный код и подключить его к себе на сайт.

Примеры сервисов, представляющий такую услугу:

Как это осуществляется в USocial:

Конструктор блока «Поделиться» от Яндекса:

Дополнительно, чтобы повысить эффективность от репостинга, на страницы сайта нужно добавить социальные мета-теги (микроразметку).

Мета-теги для социальных сетей

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

При этом для разных сетей код микроразметки может отличаться:

Данный код необходимо прописать в разделе .

• отладчик репостов для Facebook;
• средство проверки Twitter Card.

Без использования сторонних сервисов (официальные кнопки соцсетей)

Но, при добавлении блоков «Поделиться» и «Мне нравится» через сторонние сервисы они обычно загружают не только необходимые для работы скрипты социальных сетей (например, ВКонтакте, Facebook, Twitter и т.д.), но и многие другие вещи, которые для их нормальной работы вообще не нужны. Например, эти сервисы могут добавлять код, который будет собирать информацию о ваших пользователей, выполнять их отслеживание и многое другое. Кроме этого, они также могут приводить к увеличению времени полной загрузки страниц сайта.

При желании можно обойтись без этих дополнительных посредников и подключить скрипты социальных сетей к себе на сайт напрямую. Инструкции как это сделать приведены в соответствующих разделах документации социальных сетей.

Например, для того чтобы создать кнопку ВКонтакте необходимо выполнить следующие действия согласно официальной документации:

 -->     

Кроме кнопки «Поделиться» ВКонтакте предлагает ещё много других виджетов, которые вы также можете установить себе на сайт.

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

Если вас это не устраивает (вы не хотите иметь зависимость от внешнего кода), то тогда можно вообще отказаться от размещения сторонних JavaScript скриптов на своём сайте, и реализовать всё это дело через URL-адреса. Благо социальные сети это позволяют.

Социальные кнопки через URL-адреса прямого доступа

Этот способ настолько прост, насколько это возможно. Но о нём часто забывают. Он основном на простом создании ссылок.

Основные преимущества это способа:

• высокая скорость полной загрузки страницы, т.к. в этом случае не нужно подключать сторонние скрипты (их размер обычно превышает 100Кб);
• высокая степень защиты конфиденциальной информации пользователей на сайте (без сторонних скриптов отследить посетителей таким образом не получится).

Этот вариант делает сайт более независимым, быстрым и ответственным по отношению к конфиденциальности данных своих пользователей.

Однако этот способ кроме преимуществ, имеет также и некоторые ограничения. Например, используя его, вы не сможете уже так просто показать количество отметок «Нравиться» и «Поделиться» для текущей страницы. Если для вас это не является обязательным условием – то тогда нет причин не использовать этот вариант.

Каждая социальная сеть имеет свой собственный уникальный URL-адрес для публикаций. Необходимая для извлечения информация в этом случае передаётся в составе URL через GET-параметры. Подключать какие-то сторонние JavaScript скрипты при таком подходе не нужно.

URL-адреса прямого доступа для социальных сетей Twitter, Facebook, ВКонтакте, Telegram имеют следующий вид:

https://twitter.com/intent/tweet?text={текст твита}&url={адрес страницы}&via={имя пользователя} https://www.facebook.com/sharer/sharer.php?u={адрес страницы} https://vk.com/share.php?url={адрес страницы} https://t.me/share/url?url={адрес страницы}&text={заголовок страницы} 

Одни из них принимают только один параметр, а другие — несколько. При этом необходимо отметить, что значения параметров должны быть закодированы. Т.е. пробелы и некоторые специальные символы должны быть преобразованы в специальные последовательности.

В зависимости от используемого языка или фреймворка кодирования URL может выполняться по-разному.

Например, в PHP его выполнить можно с помощью функции urlencode :

$url = urlencode('https://itchief.ru/'); 

В JavaScript кодирование полного URI осуществляется посредством encodeURI , а одного значения параметра через encodeURIComponent :

const url = encodeURI('https://itchief.ru/'); 

Следовательно, HTML код ссылок для публикации материала в социальных сетях будут выглядеть следующим образом:

Поделиться ссылкой в Twitter Поделиться ссылкой в Facebook Поделиться ссылкой в ВКонтакте Поделиться ссылкой в Telegram 

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

Создание ссылок посредством JavaScript

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

На клиенте, т.е. с помощью JavaScript, это можно сделать так:

document.addEventListener('DOMContentLoaded', function () { const createShareHtml = function (title, shareData) { let anchorList = []; const anchorTemplate = function (item) { return '' + item.title + ''; } const wrapperTemplate = function (title, anchorList) { return '
' + title + '
' + anchorList.join('') + '
'; } shareData.forEach(function (item) { anchorList.push(anchorTemplate(item)); }) return wrapperTemplate(title, anchorList); } const $socialShare = document.querySelector('.social-share'); if ($socialShare) { const url = encodeURIComponent(location.protocol + '//' + location.host + location.pathname); const title = encodeURIComponent(document.title); const twitterUserName = 'itchief_ru'; const shareData = [{ title: 'Twitter', href: 'https://twitter.com/intent/tweet?text=' + title + '&url=' + url + '&via=' + twitterUserName, }, { title: 'Facebook', href: 'https://www.facebook.com/sharer/sharer.php?u=' + url, }, { title: 'ВКонтакте', href: 'https://vk.com/share.php?url=' + url, }, { title: 'Telegram', href: 'https://t.me/share/url?url=' + url + '&text=' + title, } ]; const $html = createShareHtml('Поделиться этим материалом в социальных сетях:', shareData); $socialShare.innerHTML = $html; } }); 

Место, в которое они будут помещены на странице в данном случае необходимо разметить посредством создания пустого элемента с классом social-share :

Это решение показывает, что самостоятельно создать набор кнопок «Поделиться» без зависимостей довольно просто.

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

Количество соцсетей в этом скрипте указывается в переменной shareData (в виде массива объектов):

const shareData = [ { title: 'Twitter', href: `https://twitter.com/intent/tweet?text=${title}&url=${url}&via=${twitterUserName}` }, . ]; 

В ключе « title » мы задаём название соцсети, а в « href » – её URL-адрес для публикаций.

Сам скрипт работает довольно просто. После загрузки DOM, он получает URL-адрес текущей страницы и её заголовок. Далее используя эти данные, он «пробегается» по соцсетям в shareData и формирует массив ссылок. После этого он получает элемент .social-share и вставляет туда HTML код ссылок, полученный посредством объедение всех элементов массива anchorList в строку.

Создание соцкнопок посредством JavaScript

Представленный выше вариант можно стилизовать, например, представив его в виде кнопок с иконками. А также ещё сделать так, чтобы при нажатии на них форма для публикации открывалась не в новой вкладке, а в popup окне. Чтобы провести эти изменения нам нужно будет создать стили и отредактировать JavaScript код.

Создание соцкнопок посредством PHP

Формировать блок кнопок «Поделиться» можно не только посредством изменения DOM (на клиенте), но и сразу на сервере.

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

Например, на PHP это можно сделать так:

// заголовок для блока "Поделиться" $shareTitle = 'Поделиться этим материалом в социальных сетях:'; // url страницы $url = urlencode((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? 'https' : 'http') . '://' . $_SERVER['HTTP_HOST'] . explode('?', $_SERVER['REQUEST_URI'], 2)[0]); // имя пользователя в Twitter $twitterUserName = urlencode('itchief_ru'); // title страницы $title = urlencode('. '); // share данные $shareData = [ 'twitter' => [ 'title' => 'Twitter', 'href' => 'https://twitter.com/intent/tweet?text=' . $title . '&url=' . $url . '.&via=' . $twitterUserName, 'onclick' => 'window.open(this.href, \'Twitter\', \'width=800,height=300,resizable=yes,toolbar=0,status=0\'); return false' ], 'fb' => [ 'title' => 'Facebook', 'href' => 'https://www.facebook.com/sharer/sharer.php?u=' . $url, 'onclick' => 'window.open(this.href, \'Facebook\', \'width=640,height=436,toolbar=0,status=0\'); return false' ], 'vk' => [ 'title' => 'ВКонтакте', 'href' => 'https://vk.com/share.php?url=' . $url, 'onclick' => 'window.open(this.href, \'ВКонтакте\', \'width=800,height=300,toolbar=0,status=0\'); return false' ], 'telegram' => [ 'title' => 'Telegram', 'href' => 'https://t.me/share/url?url=' . $url . '&title=' . $title, 'onclick' => 'window.open(this.href, \'Telegram\', \'width=800,height=300,toolbar=0,status=0\'); return false' ] ]; $anchorList = []; foreach ($shareData as $key => $value) { $anchorList[] = ' '; } $anchors = implode($anchorList); $html = '
' . $shareTitle . '
' . $anchors . '
'; echo '
' . $html . '
'; 

Как добавить иконки социальных сетей на сайт в Рег.сайте

Современные компании стремятся к мультиканальности при общении со своими клиентами. Организации создают не только сайты и корпоративные почты, но и аккаунты в ВК, Telegram и на других площадках. Чтобы посетители сайта узнали обо всех каналах связи c компанией, на сайте можно разместить иконки социальных сетей.

Где разместить иконки социальных сетей

Чаще всего список социальных сетей находится в 3-х частях сайта:

• в шапке (header),
• в подвале (footer),
• в теле сайта (body) на странице с контактами.

Если вы активно публикуете новости, ссылки на соцсети можно размещать под публикациями, чтобы у пользователей была возможность репостить заинтересовавший их контент на свои странички.

В Рег.сайте есть удобный модуль, с помощью которого можно легко добавить значки социальных сетей в любое место на сайте.

Как добавить иконки социальных сетей через модуль Рег.сайта

С помощью модуля Рег.сайта можно добавить разные иконки.

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

• Amazon,
• Bandcamp,
• Behance,
• BitBucket,
• Buffer,
• CodePen,
• DeviantArt,
• Dribbble,
• Flickr,
• FlipBoard,
• Foursquare,
• GitHub,
• Goodreads,
• Google,
• Google+,
• Houzz,
• iTunes,
• Last.fm,
• Line,
• Linkedin,
• Medium,
• Meetup,
• MySpace,
• Одноклассники,
• Patreon,
• Periscope,
• Pinterest,
• Quora,
• Reddit,
• ResearchGate,
• RSS,
• Skype,
• Snapchat,
• SoundCloud,
• Spotify,
• Steam,
• Telegram,
• TikTok,
• TripAdvisor,
• Tumblr,
• Twitch,
• Twitter,
• Viber,
• Vimeo,
• VK,
• Weibo,
• WhatsApp,
• XING,
• Yelp,
• Youtube.

Чтобы добавить одну из перечисленных социальных сетей:

Выберите строку, где должна быть кнопка соцсети.
Добавьте модуль «Социальные сети». Для этого нажмите на серый плюс.

Выберите модуль Социальные сети:

Перед вами появится меню настройки модуля. Нажмите Добавить Социальная сеть:

Из списка выберите одну социальную сеть:

Вставьте ссылку на аккаунт вашей социальной сети:

Сохраните изменения. Для этого нажмите на белую галочку в зелёном прямоугольнике.

Готово, вы добавили иконку социальной сети. Теперь вы также можете добавить иконки других социальных сетей.

Как настроить дизайн иконки

Можно настроить как общий дизайн иконок, так и проработать их внешний вид по отдельности.

Как настроить общий вид иконок

Для начала рассмотрим общую настройку модуля. Каждое изменение будет менять внешний вид всех созданных иконок в модуле. Выше мы создали иконку VK. На её примере покажем, как работают общие настройки.

Перейдите в настройки модуля:

Настройте внешний вид иконок.

Контент

В блоке «Иконка» можно выбрать, как будет открываться окно социальной сети: в том же окне или в новой вкладке.

Совет: пользователю удобнее, когда ссылка открывается в новом окне. Так он не теряет вкладку с вашим сайтом.

Также здесь можно добавить кнопку «Подписаться» для каждой иконки социальной сети. Для этого просто переведите переключатель в положение ВКЛ:

В блоке «Фон» можно создать плашку для иконок. Фон может быть как однотонным, так и с градиентом.

Дизайн

В блоке «Выравнивание» можно выбрать расположение иконок: слева, по центру или справа.

В строке «Иконка» можно настроить цвет рисунка социальной сети.

Если включить Использовать пользовательский размер иконки, появится настройка размера иконок:

Если на вкладке «Контент» вы включили кнопку подписки, во вкладке «Дизайн» в блоке «Текст» можно выбрать один из двух вариантов кнопки: светлую или темную, а также настроить тени текста:

Если вам недостаточно стандартных кнопок подписки, в блоке «Кнопка подписки» переведите переключатель «Использовать пользовательские стили для элемента» в положение ДА. Теперь вы сможете настроить размер и форму кнопки, цвет текста и фона, шрифт, тень и толщину надписи, а также отступы:

Кроме основных описанных настроек, во вкладке «Дизайн» можно настроить обводку иконок, установить анимацию для их появления на сайте.

Дополнительно

На вкладке «Дополнительно» находятся настройки параметров для опытных веб-дизайнеров — атрибуты CSS и HTML.

Как сделать индивидуальные настройки иконок

Если вам нужно, чтобы некоторые параметры иконок были разными (например, их цвет), нужно настраивать каждое изображение отдельно.

Для индивидуальной настройки:

Перейдите в настройки модуля во вкладку Контент.
Выберите нужную иконку, которую вы добавили.

Нажмите на значок шестеренки:

Настройте внешний вид каждой иконки на вкладках «Контент», «Дизайн», «Дополнительно».

Контент

Здесь можно настроить только ссылку на социальную сеть и фон иконки.

Дизайн

Настройка параметров схожа с общими настройками модуля. Во вкладке «Дизайн» можно изменить цвет и размер иконки, включить и настроить кнопку «Подписаться».

Совет. Многие элементы можно включить/выключить для мобильной версии сайта. В качестве примера рассмотрим, как убрать пользовательский размер иконки:

Справа от названия параметра наведите курсор на значок телефона и нажмите на него:
Иконки соцсетей 16

Выберите устройство, на котором хотите включить/отключить элемент и переведите переключатель в нужное положение:

Дополнительно

Этот раздел предназначен для настройки CSS и различных видов анимаций.

Помогла ли вам статья?

Спасибо за оценку. Рады помочь ��

Как добавить иконки соцсетей на сайт

Добавление значков социальных сетей на ваш сайт — это хороший способ установить связь с вашими клиентами через социальные сети, получить неформальную обратную связь с ними и вовлечь их в жизнь вашей компании.

Как можно добавить иконки на ваш сайт

Есть несколько способов добавить иконки социальных сетей на ваш сайт:

• Добавьте иконки в виде изображений в нужном формате .png, .svg или .eps.
• Добавьте их, используя иконки шрифтов — FontAwesome, Glyphicons и т. д.
• Реализуйте иконки, используя виджет WP.
• Добавьте иконки социальных сетей через плагин WP.

Вы можете выбрать наиболее подходящий для вас или попробовать их все.

Добавление иконок соцсетей как изображений (PNG, SVG, EPS, ETC.)

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

Наиболее популярными являются:

Vecteezy

Выберите набор иконок, который больше всего соответствует вашим требованиям, и загрузите его. Затем загрузите файлы в медиатеку и добавьте их следующим образом (для HTML сайтов):

class="social-icons">
  
href="http://www.facebook.com">src='path_to_your_image'/>
  
href="http://www.twitter.com">src='path_to_your_image'/>
  
href="http://www.youtube.com">src='path_to_your_image'/>

И добавьте стиль, чтобы настроить размер и положение иконок:
.social-icons < text-align: center; >.social-icons li < display:inline-block; list-style-type:none; -webkit-user-select:none; -moz-user-select:none; >.social-icons li a < border-bottom: none; >.social-icons li img

Flaticon

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

IconFinder

Вы также можете найти множество бесплатных иконок для соцсетей. Просто найдите стиль, который вам больше по вкусу, добавьте его в свой блок и наслаждайтесь ростом популярности в социальных сетях! Также, есть способ применить социальные иконки в качестве изображений SVG. Просто посмотрите на следующие примеры, чтобы увидеть, как их можно настроить:

ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ, ИСПОЛЬЗУЯ ИКОНКИ ШРИФТОВ

FontAwesome

FontAwesome, пожалуй, самый популярный значок шрифта в настоящее время. Это супер легко реализовать и использовать. Давайте посмотрим на пример.

1.Добавьте этот код в ваш HTML:

 rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">  class="wrapper">  target="_blank" href="your_url_here"> class="fa fa-3x fa-google-plus">  target="_blank" href="your_url_here"> class="fa fa-3x fa-facebook-square">  target="_blank" href="your_url_here"> class="fa fa-3x fa-twitter-square"> 

2.Добавьте стили в свой файл style.css (вы можете добавить свои или использовать этот пример):

body < text-align: center; >.wrapper < display: inline-flex; justify-content: center; >.wrapper i < padding: 10px; text-shadow: 0px 6px 8px rgba(0, 0, 0, 0.6); transition: all ease-in-out 150ms; >.wrapper a:nth-child(1) < color: #dd4b39; >.wrapper a:nth-child(2) < color: #4867AA; >.wrapper a:nth-child(3) < color: #1DA1F2; >.wrapper i:hover

3.И вот как это работает:

Кстати, вы можете найти все другие значки в чит-листе от FontAwesome.
Примеры реализации:

Socicon

Другой способ — использовать иконку шрифта Socicon.

1.Зайдите на сайт:

2.Выберите иконки, которые вам нужны и добавьте HTML код, как показано в примере:

 rel="stylesheet" href="https://d1azc1qln24ryf.cloudfront.net/114779/Socicon/style-cf.css?rd5re8">  class="socicons-list">  href='your_url_here' target='_blank'> class="socicon-facebook">   href='your_url_here' target='_blank'> class="socicon-instagram">   href='your_url_here' target='_blank'> class="socicon-twitter">   href='your_url_here' target='_blank'> class="socicon-googleplus">   href='your_url_here' target='_blank'> class="socicon-behance">  

3.И примените стили, например, такие как эти:

.socicons-list < list-style: none; display: flex; justify-content: center; >.socicons-list li < margin: 30px 10px; >.socicons-list li a < text-decoration: none; padding: 30px; font-size: 30px; border-radius: 50%; color: #fff; background-color: #f1f1f1; transition: all ease-in-out 150ms; >.socicons-list li a:hover < text-shadow: 0 5px 10px #212121; >.socicons-list li:nth-child(1) a < background-color: #3e5b98; >.socicons-list li:nth-child(2) a < background-color: #c13584; >.socicons-list li:nth-child(3) a < background-color: #4da7de; >.socicons-list li:nth-child(4) a < background-color: #dd4b39; >.socicons-list li:nth-child(5) a
4.Нажмите на демо, чтобы увидеть его в действии:

РЕАЛИЗАЦИЯ ИКОНОК СОЦСЕТЕЙ С ПОМОЩЬЮ WP ВИДЖЕТА

Если ваш сайт создан на WordPress, есть отличный способ добавить блок с иконками соцсетей, используя WordPress виджет.

Короче говоря, просто посмотрите этот урок:

ДОБАВЛЕНИЕ ИКОНОК СОЦСЕТЕЙ ЧЕРЕЗ WP ПЛАГИН

Здесь вы можете просмотреть различные плагины, которые могут быть полезны при добавлении учетных записей социальных сетей на вашу страницу — Плагины WordPress для добавления иконок социальных сетей. Обратите внимание на Flying Icons | Плагин Floating Social Media Icon от Accurax, инструмент, который сэкономит много времени при добавлении иконок на ваш сайт:

Я надеюсь, что эта статья была полезна для вас, и не стесняйтесь оставлять свои комментарии относительно различных способов добавления социальных иконок!

Как монетизировать свои умения?

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

Тендерные площадки

Советуем обратить внимание на специализированные площадки в сфере digital — там и регистрация простая, и бюрократии нет. Самая популярная такая площадка в Рунете — Workspace. Здесь клиенты организуют тендеры на digital-услуги, а агентства и веб-студии откликаются и участвуют в конкурсе. Неплохой способ получить достойный хорошо оплачиваемый заказ.

Биржи фриланса

Есть универсальные площадки для всех видов digital-услуг:

• Kwork,
• Weblancer
• биржа Workspace.

Есть специальные биржи для программистов и веб-дизайнеров: например, Upwork.

Соцсети, Telegram

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

• Дистанция. Фриланс, удаленная работа
• Удаленная работа: вакансии и фриланс
• ФРИЛАНС ВАКАНСИИ | УДАЛЕННАЯ РАБОТА

И профессиональные сообщества программистов и веб-дизайнеров.

Собственный блог

Свой проект можно вести везде: на своем сайте, на Хабре, Medium, YouTube и других ресурсах. Можно также писать гостевые статьи для СМИ и IT-блогов (хоть за деньги, хоть за пиар — давать ссылку на портфолио и сайт, например). Главное — чтобы контент был полезен потенциальным заказчикам, чтобы они стали к вам лояльными и обратились за оказанием услуг.

Копирайтер и человек, который отвечает за локализацию сайта TemplateMonster на русский и украинский языки. Любит читать и созерцать. Обучалась Анна на филологическом факультете в Черноморском Национальном Университете им. Петра Могилы. Владеет несколькими иностранными языками, такими как английский и немецкий. Обожает путешествовать, в свободное время описывает лайфхаки и гиды для путешественников. Личность с активной жизненной позицией, позитивный и ответственный работник.