Как добавить иконки социальных сетей на сайт в REG.Site
Современные компании стремятся к мультиканальности при общении со своими клиентами. Организации создают не только сайты и корпоративные почты, но и аккаунты в ВК, Telegram и на других площадках. Чтобы посетители сайта узнали обо всех каналах связи c компанией, на сайте можно разместить иконки социальных сетей.
Где разместить иконки социальных сетей
Чаще всего список социальных сетей находится в 3-х частях сайта:
- в шапке (header),
- в подвале (footer),
- в теле сайта (body) на странице с контактами.
Если вы активно публикуете новости, ссылки на соцсети можно размещать под публикациями, чтобы у пользователей была возможность репостить заинтересовавший их контент на свои странички.
В REG.Site есть удобный модуль, с помощью которого можно легко добавить значки социальных сетей в любое место на сайте.
Как добавить иконки социальных сетей через модуль REG.Site
С помощью модуля REG. Site можно добавить разные иконки.
Весь список иконок социальных сетей
- Amazon,
- Bandcamp,
- Behance,
- BitBucket,
- Buffer,
- CodePen,
- DeviantArt,
- Dribbble,
- Flickr,
- FlipBoard,
- Foursquare,
- GitHub,
- Goodreads,
- Google,
- Google+,
- Houzz,
- iTunes,
- Last.fm,
- 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.
Чтобы добавить одну из перечисленных социальных сетей:
- 1.
Перейдите в режим редактирования страницы.
- 2.
Выберите строку, где должна быть кнопка соцсети.
- 3.
Добавьте модуль «Социальные сети». Для этого нажмите на серый плюс.
- 4.
Выберите модуль Социальные сети:
- 5.
Перед вами появится меню настройки модуля. Нажмите Добавить Социальная сеть:
- 6.
Из списка выберите одну социальную сеть:
- 7.
Вставьте ссылку на аккаунт вашей социальной сети:
- 8.
Сохраните изменения. Для этого нажмите на белую галочку в зелёном прямоугольнике.
Готово, вы добавили иконку социальной сети. Теперь вы также можете добавить иконки других социальных сетей.
Как настроить дизайн иконки
Можно настроить как общий дизайн иконок, так и проработать их внешний вид по отдельности.
Как настроить общий вид иконок
Для начала рассмотрим общую настройку модуля. Каждое изменение будет менять внешний вид всех созданных иконок в модуле. Выше мы создали иконку VK. На её примере покажем, как работают общие настройки.
- 1.
Перейдите в настройки модуля:
- 2.
Настройте внешний вид иконок.
Контент
В блоке «Иконка» можно выбрать, как будет открываться окно социальной сети: в том же окне или в новой вкладке.
Совет: пользователю удобнее, когда ссылка открывается в новом окне. Так он не теряет вкладку с вашим сайтом.
Также здесь можно добавить кнопку «Подписаться» для каждой иконки социальной сети. Для этого просто переведите переключатель в положение ВКЛ:
В блоке «Фон» можно создать плашку для иконок. Фон может быть как однотонным, так и с градиентом.
Дизайн
В блоке «Выравнивание» можно выбрать расположение иконок: слева, по центру или справа.
В строке «Иконка» можно настроить цвет рисунка социальной сети.
Если включить Использовать пользовательский размер иконки, появится настройка размера иконок:
Если на вкладке «Контент» вы включили кнопку подписки, во вкладке «Дизайн» в блоке «Текст» можно выбрать один из двух вариантов кнопки: светлую или темную, а также настроить тени текста:
Если вам недостаточно стандартных кнопок подписки, в блоке «Кнопка подписки» переведите переключатель «Использовать пользовательские стили для элемента» в положение ДА. Теперь вы сможете настроить размер и форму кнопки, цвет текста и фона, шрифт, тень и толщину надписи, а также отступы:
Кроме основных описанных настроек, во вкладке «Дизайн» можно настроить обводку иконок, установить анимацию для их появления на сайте.
Дополнительно
На вкладке «Дополнительно» находятся настройки параметров для опытных веб-дизайнеров — атрибуты CSS и HTML.
Как сделать индивидуальные настройки иконок
Если вам нужно, чтобы некоторые параметры иконок были разными (например, их цвет), нужно настраивать каждое изображение отдельно.
Для индивидуальной настройки:
- 1.
Перейдите в настройки модуля во вкладку Контент.
- 2.
Выберите нужную иконку, которую вы добавили.
- 3.
Нажмите на значок шестеренки:
- 4.
Настройте внешний вид каждой иконки на вкладках «Контент», «Дизайн», «Дополнительно».
Контент
Здесь можно настроить только ссылку на социальную сеть и фон иконки.
Дизайн
Настройка параметров схожа с общими настройками модуля. Во вкладке «Дизайн» можно изменить цвет и размер иконки, включить и настроить кнопку «Подписаться».
Совет. Многие элементы можно включить/выключить для мобильной версии сайта. В качестве примера рассмотрим, как убрать пользовательский размер иконки:
- 1. Справа от названия параметра наведите курсор на значок телефона и нажмите на него:
- 2. Выберите устройство, на котором хотите включить/отключить элемент и переведите переключатель в нужное положение:
Дополнительно
Этот раздел предназначен для настройки CSS и различных видов анимаций.
Помогла ли вам статья?
Да
раз уже
помогла
5 лучших советов ✔️ Как добавить социальные иконки на сайт.
От простой ссылки до встроенного канала миллионы веб-сайтов интегрируются в социальные сети.
Почему бы и нет? Это идеально подходит.
Цели маркетинга в социальных сетях — продвигать контент, обслуживать клиентов и строить отношения.
Таким образом, вы должны подключить свой сайт к социальным сетям всеми возможными способами.
Существует довольно много вариантов подключения сайта к соц. сетям.
Пять основных типов интеграции социальных сетей:
- Иконки Соц. Сетей
- Кнопки Поделиться в социальных сетях
- Социальные виджеты страниц Facebook
- Единый вход (позволяет посетителям создать новую учетную запись или войти в систему с использованием социальных учетных данных)
- Встроенный социальный канал
Есть тысячи статей с лучшими практиками и практическими советами для каждого из этих вариантов. Поэтому вместо другого руководства мы показываем, как НЕ подключать социальные сети к веб-сайту.
Иногда интеграция с социальными сетями получается неуклюжей, отвлекающая и неэффективной.
Содержание | Быстрая навигация
1. Не помещайте социальные иконки в шапку сайта.В шапках веб-сайтов есть большие красочные иконки социальных сетей. А поскольку они красочные, они часто находятся на вершине визуальной иерархии, наиболее визуально заметного элемента на странице.
Представьте, что вы идете в магазин, а на самой большой вывески написано «выход». Это было бы полезно? Возможно нет. Тогда почему на каждой странице вашего сайта есть большие знаки выхода?
Не поощряйте посетителей сайта уходить. Не приглашайте их покинуть ваш сайт.
Отправка посетителя на платформу социальных сетей дает им возможность получить прибыль в миллиардной компании, которая полностью сосредоточена на сохранении и монетизации этого посетителя. Это хорошо для вашего маркетинга?
Вот как это выглядит в шапке:
Небольшое исследование стандартов веб-дизайна обнаружило, что в 2015 году 26% ведущих маркетинговых сайтов имели социальные иконки в заголовке. В 2019 году это число сократилось до 20%. Это выходит из моды.
Лучший способ добавить ваши социальные иконки.Мы рекомендуем переместить их в нижний колонтитул и выделить их серым цветом. Здесь их могут найти люди, которые хотят следить, делиться и упоминать вас. И они не будут мотивировать посетителей уходить с сайта.
Обратите внимание, что кнопка регистрации по электронной почте (более ценное взаимодействие для бренда) более заметна. Кнопки социальных сетей (которые являются менее значимыми для бренда) менее заметны.
Это не юридическая консультация, но …Твиттер не хочет, чтобы вы портили их логотип.
Это может фактически являться нарушением товарных знаков этих компаний, поскольку вы изменяете их логотипы, которые являются зарегистрированными товарными знаками. Я никогда не слышал о каких-либо юридических действиях.
Какие социальные иконки чаще всего нажимают ваши посетители?Мало кто когда-либо проверяет, но на вопрос можно ответить через Google Analytics.
По умолчанию GA отслеживает только перемещение со страницы на страницу, а не каждый выход с сайта. Но если вы настроите отслеживание событий для кликов выхода , вы можете увидеть, какие из них нажимаются на любой странице. Вот URL каждого клика для каждого выхода из веб-сайта с нашей домашней страницы.
Ваши иконки социальных сетей похожи на опрос, показывающий, какие социальные сети использует ваша аудитория.
Где лучшее место для добавления социальных иконок?Помимо нижнего колонтитула, вот три из лучших, наиболее эффективных мест, чтобы предложить посетителям следовать за вами в социальных сетях
- На странице вакансий. Посетители на этой странице мотивированы. Они профессионалы, которые ищут работу. Сообщите им, что вы размещаете вакансии в социальных сетях, и предлагайте им следить за вами в соц. сетях.
- В блоге. Кнопки «Поделиться». Но блоги могут сделать еще больше для развития ваших соц. страниц. Попробуйте написать текстовый призыв к действию и мотивировать посетителей подписаться на ваши страницы в социальных сетях.
- На странице благодарности, спасибо страницы является отличным способом , чтобы получить больше пользы от одних и тех же посетителей. Они стали подписчиком, клиентом или соискателем работы, почему бы не предложить им другое? Добавьте CTA (Призыв к Действию) и поощряйте их следовать вашему бренду.
Веб-сайты повсюду ссылаются на аккаунты в социальных сетях, которые едва активны или полностью мертвы. Это как неработающая ссылка или отключенный телефон.
Итак, когда вы должны добавить значок социальной сети?
Когда эта социальная сеть является ключевой частью вашей стратегии интернет маркетинга. Прежде чем добавить значок Facebook или Twitter на новый сайт, задайте себе два вопроса.
- Вы размещаете контент там постоянно? (активный канал публикации)
В социальной сети по крайней мере столько же релевантного контента, сколько на вашем сайте. - Вы общаетесь с людьми в этой социальной сети? (активный сетевой канал)
Вы не просто присутствуете, но вы общаетесь с людьми, общаетесь и строите отношения. Если кто-то задает вопрос, вы отвечаете на него.
Ответ должен быть «да» для обоих. Если это не так, отложите интеграцию с социальными сетями, пока у вас не будет стратегии для социальных сетей. Гораздо лучше не иметь иконок, чем кнопки, которые никуда не ведут.
Следующий вопрос: куда поместить эти социальные иконки?
3. Не добавляйте кнопки общего доступа на служебные страницы.Вы когда-нибудь делились сервисной страницей? Вы когда-нибудь видели, чтобы кто-то делился страницей сервиса? Это почти никогда не происходит.
Задача сервисной страницы — превратить посетителей в потенциальных клиентов. Кнопки социальных сетей просто отвлекают, особенно если они большие и яркие. Они добавляют визуальный шум, но не ценность, поэтому они должны быть удалены. Вырежьте их и удалите плагин WordPress, который их добавил.
А как насчет кнопок на страницах продуктов электронной коммерции?Люди когда-либо делятся продуктами? Да, но почти никогда. Когда мы посмотрели веб-сайт электронной коммерции и сравнили просмотры страниц (Google Analytics) с социальными акциями (Buzzsumo) и обнаружили, что такие акции редки.
Только тогда, когда аудитория увлечена продуктом, есть какие-то акции вообще.
В онлайн-каталоге Vienna Beef самые популярные продукты делятся примерно на 1 из 1000 посетителей. И эти акции почти все в Facebook.
Зная это, мы разработали кнопки общего доступа, чтобы они были визуально менее заметными, чем кнопка добавления в корзину. Потому что цель — продажи, а не акции.
Мы обнаружили, что обмен информацией между 1 и 1000 посетителями (это 0,001%).
Поэтому установите очень низкие ожидания в отношении акций на странице продукта и будьте очень осторожны, чтобы не отвлекать посетителей от кнопки покупки.
4. Не показывайте низкие цифры.Социальное доказательство в обоих направлениях. Если цифры большие, это положительно. Если они маленькие, это отрицательно, что делает когда контент выглядит непопулярным? Печальный.
Не расстраивайтесь … но следите за своими виджетами.
Тщательно выбирайте свои виджеты. Если доли в некоторых сетях низкие, вы можете показать только одно совокупное число для всех социальных сетей. Это то, что делают многие. Или просто используйте виджеты без номеров.
У более простых виджетов есть еще одно преимущество. Они загружаются быстрее.
5. Остерегайтесь тяжелых Javascript.Социальные иконки практически невесомы. Но виджеты социальных сетей (поделиться, подписаться и т. Д.) Создаются с использованием Javascript. И чтобы загрузить, они должны общаться с серверами в Facebook, Twitter, LinkedIn или Pinterest.
Эти дополнительные запросы могут увеличивать время загрузки страницы на полсекунды или более, особенно для модных виджетов.
Есть несколько способов избежать раздувания кода, который создают социальные виджеты:
- Используйте простые виджеты… избегайте тех, у которых есть счетчики (акции, фанаты, подписчики).
- Используйте сверхлегкие кнопки обмена
- Загружайте социальные виджеты с помощью асинхронного Javascript, чтобы им не приходилось загружать их по очереди… или просто запрограммируйте сайт, чтобы они загружались после того, как вся остальная часть страницы уже загружена.
Беспокоитесь, что социальные виджеты замедляют вас? Проведите аудит ваших страниц с помощью Lighthouse в Chrome Dev Tools.
Сделайте свой бренд социальным и представительным на своем веб-сайте. И подключите свой сайт к сетям, где вы общаетесь. Это полезные действия.
Ссылайтесь на социальные сети, где вы активны
Размещайте социальные виджеты так, чтобы не отвлекать посетителей и не замедлять сайт
Вы нашли это полезным? Если это так, вы можете присоединиться ко мне в Facebook, где публикую интересные статьи или подписаться на Youtube канал.
По материалам статьи: https://www.orbitmedia.com/blog/website-social-media-integration/
✓ Зачем нужна интеграция социальных сетей на сайт?
Для получения возможности пользователям делится вашим сайтом или его услугами, новостями.
✓ Как добавить кнопку социальных сетей на магазин?
Использовать виджет или соответствующий плагин.
✓ Почему не стоит использовать плагины соц. сетей с счетчиками?
Зачастую такие плагины сильно тормозят сайт и увеличивают время открытия страницы от полу-секунды до 6 и более.
✓ Где лучше размещать кнопки социальных сетей?
На страницах благодарности, блогах, вакансий сайта.
✓ Как добавить иконки социальных сетей в HTML?
Во-первых, мы должны ввести код Html в любом текстовом редакторе или открыть существующий файл Html в текстовом редакторе, в который мы хотим добавить липкие значки социальных сетей.
Теперь нам нужно разместить курсор сразу после тега title в теге
✓ Как связать значок в HTML?
Чтобы вставить значок, добавьте имя класса значка к любому встроенному элементу HTML. Элементы i и span широко используются для добавления значков. Все иконки в библиотеках являются масштабируемыми векторными значками, которые можно настроить с помощью CSS.
✓ Как добавить значки социальных сетей в Font Awesome?
Перейдите на страницу иконок на сайте Font Awesome. Здесь вы увидите список доступных для использования значков. Любые значки серого цвета на самом деле являются частью премиум-пакета, поэтому вам необходимо обновить их, чтобы использовать.
Отображение значков социальных сетей на вашем веб-сайте
Март
18
2020
Работая в сфере интерактивного маркетинга, первое, на что я обращаю внимание при первом посещении веб-сайта, — это активное присутствие в любых социальных сетях, таких как Facebook, Twitter или LinkedIn.
Хотите верьте, хотите нет, но много раз я сталкивался с веб-сайтом без значков социальных сетей или кнопок «Подписаться» и «Поделиться».
Еще чаще я посещаю веб-сайты с плохо расположенными значками социальных сетей, обычно спрятанными в самом низу страницы и настолько маленькими, что их трудно распознать.
Любой, кто экспериментировал с социальными сетями для брендов, понимает, что для успешного присутствия в социальных сетях требуется тяжелая работа, так зачем же прятать эти ссылки и кнопки там, где их никто не увидит?
Вот один конкретный пример того, почему важно держать эти ссылки и кнопки видимыми: согласно тематическому исследованию 2018 года, проведенному популярной службой закладок и обмена в социальных сетях AddThis, кнопки обмена в социальных сетях могут способствовать значительному увеличению количества репостов и новых пользователей.
Готовы убедиться, что ваши социальные кнопки не потеряются в случайном порядке? Ниже приведены несколько советов по отображению кнопок социальных сетей на веб-сайтах.
Как отображать значки социальных сетейЗначки социальных сетей будут направлять посетителей на страницы вашей компании в социальных сетях. На веб-сайте они должны быть легкодоступными и относительно большими.
Идеальным местом для их размещения является верхняя половина страницы или «выше сгиба», то есть та часть страницы, которую посетитель может увидеть, не прокручивая ее вниз. Чем дальше посетитель должен прокручивать страницу, тем меньше вероятность того, что он увидит кнопки, ведущие на его профили в социальных сетях.
Отображение кнопок социальных сетейВ отличие от значков социальных сетей, которые ведут посетителей к вашим профилям в социальных сетях, кнопки обмена социальными сетями побуждают их продвигать контент с вашего веб-сайта в свои личные профили.
Если ваш веб-сайт предлагает качественную информацию и контент, важно предусмотреть кнопки социальных сетей для каждого элемента контента, который вы создаете, чтобы у посетителей сайта был простой способ поделиться контентом, который они считают наиболее интересным.
В статье, предлагающей рекомендации по размещению кнопок общего доступа, AddThis рекомендует пользователям сделать следующее:
· Разместите кнопки на видном месте и в верхней части страницы
· Разместите кнопки общего доступа рядом с контентом, которым хотите поделиться
… в то время как служба закладок/совместного использования не рекомендует:
· Размещение кнопок общего доступа в инструментах навигации по страницам, в нижнем колонтитуле страницы или на боковой панели
· Размещение кнопок общего доступа в нескольких местах на странице
В отличие от того, чтобы люди посещали и покидали ваш сайт без каких-либо других взаимодействий, эффективное отображение этих кнопок является ключом к действию и взаимодействию с вашим брендом.
Имейте в виду, что также может быть хорошей идеей протестировать различные места для кнопок социальных сетей, чтобы увидеть, какое из них способствует наибольшей активности. То, что работает для одного веб-сайта, может оказаться не таким успешным для другого.
Как вы используете значки социальных сетей и кнопки обмена на своем веб-сайте?
Комментарии
27 Иконки социальных сетей CSS
Коллекция отобранных бесплатных HTML и CSS иконок социальных сетей примеров кода из Codepen, GitHub и других ресурсов. Обновление октябрьской коллекции 2021 года. 4 новых предмета.
- CSS-иконки и наборы иконок
- Пунктирные значки меню CSS
- Иконки меню гамбургеров CSS
- Значки погоды CSS
О коде
3D-кнопка социальных сетей
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome. css
О коде
Социальная анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: bootstrap.css, font-awesome.css, font-awesome-animation.css
О коде
Кнопки со стеклянным эффектом для социальных сетей с неоновым свечением
Реализация только CSS стеклянных неоновых светящихся кнопок с текстовыми градиентами и box-shadow
s.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: —
О коде
Социальные ссылки
Только CSS-анимация для социальных ссылок.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Темные социальные иконки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome. css
О коде
Необычная анимация парения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Иконки социальных сетей
Иконки социальных сетей с наведением и обратными действиями.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
3D — Социальные плитки CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Иконки социальных сетей
Плавающие иконки социальных сетей в HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Социальный ящик
Еще один ящик для ваших социальных ссылок .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Групповая кнопка со значками SVG
Групповая кнопка с иконками svg , на основе проекта dribble: https://dribbble.com/shots/694671-Buttons-Free-PSD
О коде
Социальные иконки
Социальные иконки с трехмерным эффектом видения в HTML и CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Социальные кнопки
Социальные кнопки на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Социальные кнопки CSS3, том 2
Социальные кнопки с CSS3 переход
с.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome. css
О коде
Социальные кнопки CSS3, том 1
Социальные кнопки с CSS3 переход
с.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Только социальные ссылки CSS Direction-Aware Cube
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Социальные кнопки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: нет
Зависимости: font-awesome.css
О коде
Социальные кнопки с всплывающими подсказками
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ionicons.css
О коде
Социальные кнопки с иконочными шрифтами
Еще один набор кнопок социальных сетей, которыми каждый может воспользоваться или черпать вдохновение. Этот набор использует пакет значков Font Awesome.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Ответ: да
Зависимости: font-awesome.css
О коде
Социальная связь
Это дизайн, который я нашел на Dribbble и сделал Paul Flavius Nechita. Это простой дизайн, но он один из моих любимых. Мне придется немного поработать, чтобы получить тени так, как показано на картинке.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: ionicons.css
О коде
Чистые социальные кнопки
Бесплатные HTML и CSS социальные кнопки .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Стильные социальные кнопки
Несколько классных социальных кнопок с плавной анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Социальные иконки SVG
Round социальных иконки в SVG, HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
О коде
Социальные ссылки
Ссылки на социальные сети в формате HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Иконки социальных сетей
Иконки социальных сетей с всплывающими заголовками.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: font-awesome.css
О коде
Иконки социальных сетей
Значок социальных сетей раскрывается с переходом
.