Иконка in что за соцсеть
Кнопки соцсетей для сайта на чистом CSS
Социальные сети стали неотъемлемой частью современного интернета. Своим понятным функционалом они массово завлекли пользователей вызвав у них зависимость.
Хочу поделиться с достопочтенной аудиторий кнопками социальных сетей для сайта на чистом CSS и Font Awesome, которые я делал подгоняя стили целый день.
Кнопки социальных сетей
Набор круглых кнопок
Посидел денёк подбирая тени и стили для кнопок соцсетей. Теперь вот хочу поделиться с вами своим вариантом круглых кнопочек соцсетей:
Чтобы вставить кнопки на сайт, добавьте через HTML код нужных вам соцсетей.
Для тех кто плохо разбирается в HTML, подскажу что код одной кнопки соцсети состоит из трёх строк.
В классе открывающегося тега div есть названия соцсетей на английском. Ненужные кнопки можно удалить, а нужные отсортировать в том порядке который вас устраивает.
Надеюсь с вставкой HTML-кода кнопок разберётесь.
Ссылка на соц сеть
Так же обязательно добавьте CSS, чтобы ваши кнопки работали так же как в моём примере.
Код CSS
CSS кнопок добавляется в файл CSS темы или шаблона вашего сайта. Место для вставки кода CSS не принципиально. Можете вставлять код в самый низ файла css с новой строки.
Начиная со строки 15 идут стили для кнопок. Можете удалить ненужные вам соцсети.
Например:
Набор квадратных кнопок
Так же если вам не нравятся круглые кнопки, предложу вариант квадратных кнопок:
Иконки соц. сетей для сайта
Уже трудно себе представить современный сайт без иконок соц. сетей и мы их видим на большинстве сайтах. Откуда же берутся эти иконки? Насчет этого можно не беспокоиться, в сети распространяется огромное количество наборов бесплатных иконок на любой вкус в виде картинок.
Другой вопрос подходят ли они по стилю для вашего сайта, не отвлекают ли от контента? А сами то Вы как думаете, когда видите красно-сине-зеленые ляпистые кнопки, одинаковые на всех сайтах, как в инкубаторе.
В любом случае, если ваш сайт претендует хоть на какой-то дизайнерский стиль, то и иконки соц. сетей тоже должны стремиться к единообразию с дизайном сайта.
Иконочный шрифт Font Awesome
как нельзя кстати хорошо подходит для создания иконок соц. сетей на сайте. Давайте рассмотрим все преимущества:
Сделаем HTML разметку
Создадим контейнер div с классом box, внутри которого поместим пять пунктов списка ul. В каждый пункт списка li поместим блок dlv с классом icon, внутри которых теги i с классами нужных вам иконок.
На сайте fontawesome.com, находим нужные иконки и копируем код в свой HTML-файл.
Подключаем иконочный шрифт, путем копирования строки с кодом и вставки между тегами head.
Иконки соц. сетей появились на странице, теперь предстоит их стилизация.
CSS-код
Разместим иконки в центре, для этого пропишем контейнеру с классом box код ниже.
.box <
text-align: center;
Убираем у списков ul маркеры и задаем отступ сверху 60 пикселей.
.box ul <
list-style: none;
margin-top: 60px;
>
Прорисовываем блоки списка с заданной шириной и высотой, белого цвета с рамкой под цвет фон. Она не должна быть видна в обычном состоянии, а будет появляться более темного цвета только при наведении курсора.
.box ul li <
width: 40px;
height: 40px;
background: #fff;
border: solid 4px #ea86c6;
>
Отобразим список в строку: display: inline-block;
На картинке иконки стоят не по центру, маленького размера и неправильного цвета.
Работа с классом icon
Опускаем иконки на 15% вниз:
Задаем цвет такой же как у фона страницы и увеличиваем размер в любых относительных единицах. Это позволит на супер больших мониторах, не потерять в качестве.
color: #ea86c6;
font-size: 1.7em;
Можно было бы на этом остановиться, но тогда зачем мы делали рамку у пунктов списка?
Hover эффект для иконок
Создадим hover эффект, при котором при наведении курсора, у рамок меняться цвет.
.box ul li:hover <
border: solid 4px #b63a64;
>
У иконок изменится цвет и увеличится размер:
Демонстрация hover эффекта
Плавность hover эффекта достигается свойству transition. На codepen вы можете посмотреть, каким элементам это свойство задано.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.
Как добавить значки социальных сетей в меню WordPress
Опубликовано: ADv Дата 21.11.2015 в рубрике Плагины WP 4 комментария
Вы хотите добавить иконки социальных сетей на свой сайт WordPress? В WordPress по-умолчанию не предусмотрено раздела для профилей социальных сетей, но вы легко можете использовать навигационные меню WordPress для того, чтобы добавить и вывести иконки социальных сетей. В этой статье мы покажем вам как добавить иконки соц.сетей в меню WordPress.
Основным преимуществом добавления иконок в меню является возможность изменять порядок их отображения с помощью простого drag-and-drop интерфейса. Вы также сможете вывести их в любом месте, как например в сайдбаре или в другом меню.
Добавляем иконки соц.сетей в меню WordPress с помощью плагина
Первым делом вам необходимо установить и активировать плагин Menu Social Icons. После активации переходим в раздел Внешний вид » Меню для того, чтобы начать добавлять иконки соц.сетей.
Прежде, чем вы начнете добавлять ссылки, вам нужно будет создать новое меню, кликнув на ссылку создания нового меню. Ему можно дать соответствующее название вроде Social Menu.
Далее, кликните на вкладке Произвольные ссылки слева, и вы увидите социальные кнопки под текстом и полем ссылки. Все, что вам понадобится сделать, это кликнуть на нужную иконку и указать ссылку на профиль социальной сети. Когда вы закончите, нажмите на кнопку Добавить в меню. Повторяйте действие нужно количество раз, пока не добавите все нужные профили соц.сетей.
После того, как вы добавили все профили соц.сетей в меню, нужно будет указать расположение меню. В зависимости от вашей темы, у вас могут быть различные места под меню, где вы и сможете вывести свои соц.иконки.
Если же у вас нет области для меню, то всегда можно будет вывести соц.иконки в сайдбар WordPress.
Добавляем иконки соц.сетей в сайдбар
Вы сможете вывести ваше меню соц.иконок в любом сайдбаре WordPress, посетив раздел Внешний вид » Виджеты административной панели сайта. Там вам нужно просто перетянуть виджет произвольного меню в свой сайдбар.
В настройках виджета выбираем меню соц.сетей, которое мы создали ранее, далее нажимаем на кнопку сохранения изменений. Теперь можно посмотреть на сайте свои кнопки социальных сетей в действии.
Если в вашей теме WordPress есть несколько областей для виджетов в различных местах, то можно будет добавить соц.кнопки в футер, хидер, под записью и т.д.
Использование иконок FontAwesome в меню WordPress
Лучшей особенностью плагина Menu Social Icons является то, что он использует красивую библиотеку FontAwesome для добавления иконок соц.сетей. В плагине содержится полная библиотека FontAwesome, но он загружает только выбранные иконки в ваше меню.
Если вы захотите использовать другие иконки из FontAwesome, то это можно будет сделать.
Для начала переходим в библиотеку FontAwesome и выбираем нужную нам иконку. Например, мы добавим иконку RSS наряду с социальными. После выбора значка, вам понадобиться добавить следующий код в файл functions.php вашей темы или в плагин для сайта WordPress:
Для добавления других иконок вам понадобится заменить /feed на ссылку социальной сети, которую вы пытаетесь добавить. Также измените rss на название нужной иконки.
Добавляем свои собственные иконки соц.сетей в меню WordPress
Плагин Menu social icons использует иконки FontAwesome в меню WordPress, но что, если понадобится использовать собственные картинки иконок. Это возможно. Ниже описан способ добавления любого произвольного изображения для значков в меню WordPress.
Первым делом вам необходимо установить и активировать плагин Menu Image. После активации понадобится перейти на страницу Внешний вид » Меню, где вы заметите кнопки изображений для меню под каждым элементов. Просто загрузите туда свою картинку.
Мы надеемся, что эта статья помогла вам научиться добавлять значки социальных сетей в меню WordPress.
По всем вопросам и отзывам просьба писать в комментарии ниже.
Не забывайте, по возможности, оценивать понравившиеся записи количеством звездочек на ваше усмотрение.
Гайд по правильному использованию иконок соцсетей в офлайн-рекламе
Московское коммуникационное агентство PRT провело небольшое исследование о том, легко ли привлечь подписчиков в группы бренда в соцсетях, просто оставив ссылку на упаковке продукта.
Вопреки всем прогнозам, традиционная реклама все никак не умирает, а перед брендами, вступившими в эпоху вездесущего SMM, встает не самая простая задача — увести клиента с рекламы на печатных носителях (журналы, билборды, упаковка продуктов и так далее) в социальные сети, не потеряв его по дороге.
Оставим в стороне вопрос о том, зачем многим брендам вообще присутствовать в социальных сетях. Сфокусируемся на другой задаче: например, надо привлечь целевую аудиторию из офлайновой рекламы в глянцевом журнале в уютный бложик в Instagram. Как это сделать? Оглядимся по сторонам. Самый частый формат, который все мы видим каждый день, — это лаконичное размещение иконок социальных сетей в печатных материалах. Проще говоря, это реклама самих социальных сетей, которую осознанно оплачивают бренды без малейшей выгоды для себя. Возможно, в вашей жизни был случай, когда вы, увидев рекламу какого-нибудь корма для собак с аккуратным логотипом «ВКонтакте» в углу, хватались за смартфон с мыслью: «О! Сейчас найду и подпишусь». Но среди наших знакомых таких людей не нашлось.
Классика
И все же примерно в 80% случаев с билбордов и буклетов на нас смотрят симпатичные логотипы социальных сетей. Казалось бы, просто и со вкусом: не раздражает, не оттягивает на себя внимание, — но при этом совершенно неэффективно.
Жизнь положу, но найду этот бренд везде и подпишусь
В онлайне такое размещение работает по той причине, что иконка — это работающая гиперссылка, кликнув на которую (хотя бы случайно), можно куда-то уйти и зачем-то подписаться на сообщество. По крайней мере, чисто гипотетически.
В случае с печатными материалами можно до бесконечности любоваться милыми иконками на билбордах и на страницах журналов, но чуда, к сожалению, не произойдет. Учитывая, что в большинстве случаев пользователь даже не знает, как и зачем вас искать на просторах социальных сетей, вам нужно быть как минимум Apple, чтобы кто-то подумал: «О! Так они есть во “ВКонтакте”? Найду и подпишусь!» Но давайте будем реалистами: мало кто захочет в здравом уме искать бренд-сообщество вашей компании в Facebook, не имея для этого достаточно весомой причины (скажем, вы дарите каждому десятому подписчику iPhone 6). Следовательно, если у вас нет достаточно заманчивого CTA, не стоит занимать лишнее пространство в буклете или билборде иконками социальных сетей. Конверсия будет примерно нулевая.
Кстати, эксперименты с этим форматом зачастую выглядят довольно странно
Другой способ обратить внимание потребителя на то, что рекламодатель крут и присутствует в социальных сетях, — это непосредственное указание ссылки. Если вы компания Nike, то ссылку вида facebook.com/nike человек теоретически сможет запомнить и воспроизвести. Если же вы Abercrombie and Fitch, уже становится сложнее.
Давайте пойдем еще дальше: если Nike изобразит на билборде ссылку на локальное комьюнити https://www.facebook.com/NikeRunningRussia, то переход осилит лишь малая часть российских потребителей. Например, по оценкам «Левада-центра», только 15% россиян владеют иностранным языком. Но даже от тех, кто не поленился и осилил это знание, требовать запомнить длинные и не всегда логичные «урлы» кажется нам несколько циничным. Выходит, и этот способ не работает…
Была надежда на QR-коды, но и она не оправдалась. Не будем останавливаться на них подробно, заметим только, что, к сожалению, эта потенциально мощная механика не нашла отклика в сердцах наших потребителей. Большинство людей не понимают, зачем и как использовать QR-коды.
Вот это интрига!
Некоторые бренды сегодня используют хештег для связи непосредственно с брендом или текущей рекламной кампанией, но это достаточно смелый шаг. Стоит помнить, что хештег не имеет владельца, и вы никогда не спрогнозируете, кто еще и какой контент опубликует под ним. А уж нечистоплотные и особо продвинутые конкуренты наверняка с удовольствием воспользуются этой возможностью.
Надеюсь, там я найду именно то, что должен
Упс, нет. Там пицца
Но самая главная проблема при попытке конвертировать офлайновую целевую аудиторию из принта в чудесный мир социальных медиа кроется не в формате, а в отсутствии годной идеи. На избалованного потребителя нужно произвести действительное мощное впечатление и так круто его заинтересовать, чтобы вызвать в нем жгучее желание потратить время своей единственной и драгоценной жизни на взаимодействие с брендом в социальных сетях.
Ммм! Почитать про аксессуары для ванной в Twitter? Это я люблю!
Впрочем, как мы все знаем, критиковать — не делать. Так как же правильно? Примеров хватает, и каждый по-своему уникален. Однако и здесь есть несколько ключевых правил, объединяющих все успешные кейсы.
Совет первый
Ссылка на страницу в социальной сети должна быть максимально короткой и запоминающейся. Если название вашей компании состоит из нескольких слов, то необязательно объединять их в одно и в таком виде выносить в URL страницы. Даже если вы занимаетесь чем-то настолько интересным, что человек захочет вбить название вашей компании в адресной строке браузера, чтобы зафолловить в Facebook, не стоит усложнять ему жизнь.
Прописные буквы хоть как-то спасают ситуацию
Совет второй
Желательно, чтобы название сообщества вашего бренда было единым во всех социальных сетях. Понятно, что далеко не всегда это представляется возможным, так как самые «аппетитные» URL давно уже забиты фанатами или недоброжелателями, но стоит все же заранее проверить доступность имени во всех социальных сетях, чтобы найти компромисс. Тут же стоит учесть, что всякие нижние подчеркивания серьезно усложняют процесс запоминания ссылки.
Кажется, все запомнил. Лишь бы не перепутать
Стоит помнить, что если вы нашли оптимальное короткое и легко запоминаемое название, то пользователю легко будет найти вас в социальных сетях, руководствуясь банальной логикой.
Годно! GQ почитаем
Совет третий
Желательно, чтобы в печатном материале была не только ссылка на ваши группы в социальных сетях, но и CTA, подразумевающий причину, по которой пользователь должен подписаться на вас. Например, сеть кофеен «Шоколадница» регулярно предлагает разного рода «плюшки» за подписку на свои группы в социальных сетях. И даже возможность получить чайник вкусного чая зачастую оказывается достаточно весомым поводом, чтобы, сидя в кафе в ожидании заказа, подписаться на «Шоколадницу» в Instagram. Если у вас нет заманчивого CTA, то, по меньшей мере, стоит озадачиться вопросом: «А почему пользователи должны подписаться на мои сообщества?». Если вы можете сами себе искренне ответить на этот вопрос, то есть смысл попытаться завлечь к себе пользователей.
У «Шоколадницы» все в шоколаде
Совет четвёртый
Всегда есть возможность подать ссылку креативно, так что взбодрите вашего арт-директора или дизайнера. Нет, это не значит, что надо придумать альтернативный логотип Facebook или Twitter (и такие кейсы есть), но, как минимум, необязательно писать полностью всю ссылку на ваше сообщество, и уж точно не надо вот этих атавизмов http://www перед адресом социальной сети. Неплохо выглядит комбинированный вариант, когда сразу рядом с иконкой социальной сети размещается ссылка на сообщество.
Sony грамотно подошли к делу
Разумеется, это далеко не все, но только самые базовые правила, соблюдая которые, вы имеете все шансы получить конверсию офлайн-пользователей, увидевших вашу рекламу, в подписчиков бренда в social media. Стоит ли говорить, что примеров, когда возникает желание подписаться на бренд в социальных сетях, увидев его рекламу в журнале или на билборде, – единицы. Но они есть. Вопрос: попал ли в этот список ваш бренд?
В создании материала принимали участие Ирина Кобеляцкая и Симона Давлет-Кильдеева
Блоки » Блок «Значки социальных сетей»
Блок «Значки социальных сетей» позволяет добавлять значки социальных сетей на любую страницу или в любую запись, чтобы перенаправлять посетителей в ваши профили в социальных сетях.
Вставка блока «Значки социальных сетей»
Вы можете добавить блок «Значки социальных сетей», выбрав его при нажатии кнопки «Добавить блок». Или можно набрать /social и нажать клавишу ввода. При добавлении блока в первый раз также появится параметр «Размер», который позволит определить размер значков:
Вы можете ознакомиться с подробными инструкциями по добавлению блоков.
Добавление профилей социальных сетей
При добавлении блока в первый раз появится кнопка +. Нажмите кнопку +, чтобы добавить первый значок.
Появится список всех доступных значков. Вы можете выбрать нужный значок в списке или использовать специальную опцию для поиска значка, например «Facebook». Этим способом можно добавить значки для всех социальных сетей.
Затем можно связать значок с профилем социальной сети. Для этого нажмите значок однократно. Появится поле, где можно ввести адрес. Наберите или вставьте ссылку на ваш профиль социальной сети и нажмите значок стрелки, чтобы её ввести.
Если к значку не добавить ссылку, вы не увидите этот значок в режиме предварительного просмотра или на активном сайте.
Добавление новых значков
Нажмите кнопку «+» (добавить значок) справа от имеющихся значков. Появится список всех доступных значков. Можно выполнить поиск значка и выбрать нужный.
Если нужного вам значка нет, то вместо него можно воспользоваться кнопкой универсальной ссылки:
Список поддерживаемых значков
Доступны для использования следующие значки:
Удалить значок
Чтобы удалить значок, щёлкните его для вызова индивидуальной панели инструментов. Нажмите кнопку с изображением трёх точек для этого значка и выберите пункт «Удалить блок»:
Настройки блока
В дополнение к настройкам на панели инструментов для каждого блока имеются свои настройки на боковой панели редактора.Если вы не видите боковую панель, нажмите значок шестерёнки рядом с кнопкой «Опубликовать».
Стили
В настройках блока для значка можно выбрать один из трёх стилей:
Выравнивание макета
Вы можете выбрать режим выравнивания значков: по левой границе, по центру, по правой границе или с интервалом между элементами.
Настройки ссылок
Вы также можете выбрать режим открытия ссылок на новой вкладке с помощью опции «Открыть в новой вкладке». Если эта опция включена, ссылки в значках социальных сетей будут открываться на новой вкладке.
Настройки цвета
В разделе «Параметры цвета» есть две опции, которые можно изменять.
Дополнительно
На вкладке дополнительных настроек можно добавить к блоку класс CSS, что позволяет настраивать стиль блока по своему усмотрению с помощью собственных таблиц CSS. Подробнее.
Каждый значок социальной сети может также иметь свой отдельный класс. Чтобы добавить значку класс, выберите его и измените поле «Дополнительный класс CSS»:
Разнообразие тарифных планов и ценовых предложений
Бесплатно
Оптимальный вариант для студентов
Personal
Оптимальный вариант для представления своего хобби