Приветствую вас, начинающие и опытные инфобизнесмены! Наполненность вашего ресурса, как вы уже наверняка поняли, очень важна. Качество контента также. На что еще следует обратить внимание, продвигая свой сайт? В статье я расскажу вам о том, как добавить в блог кнопки социальных сетей и стать еще популярнее на интернет-просторах. Готовы?
Тогда вперед!
Для чего это нужно?
Такие иконки-ссылки помогут гостям ресурса и его подписчикам, поделиться записью блога на своей странице или добавить запись в закладки. Таким образом, человек привлечет внимание своих друзей и весьма вероятно, что они заинтересуются вашим веб-шедевром и подпишутся на него. J Всего один клик гостя в состоянии бесплатно разрекламировать ваш ресурс. Супер, не правда ли?
Как добавить на ютуб канале значок на соц-сети
О плагинах и скриптах кнопок соцсетей для WordPress
Если вы уже познакомились с CMS WordPress, то уже имеете понятие о том, как устроен движок и как его лучше совершенствовать. Популярный метод, известный и максимально удобный новичку – подключение плагина. Для привлечения трафика используют плагины с « кликабельными иконками ». Я отмечу несколько из них: Share Buttons , Bookmarkz , KN Social Slide , Sexy Bookmarks Slidebar . Из сервисов, которые предлагают установить кнопки с помощью скриптов, хочу обратить внимание на: OdnaKnopka и PLUSO . А теперь подробней о каждом из них. Share Buttons После установки, в административной панели WordPress появится раздел и выпадающее меню: 
Далее понадобится произвести еще несколько настроек: Теперь нужно настроить отображение иконок соц. сетей: 
Сохраните все изменения: 
При всех удобствах, имеются и недостатки:
- ссылки не закрыты от идентификации;
- нагрузка на сайт;
- не валидный код.
Bookmarkz
Plugin устанавливается и активируется привычным способом. В настройках следует отметить галочкам лишь необходимые для отображения названия:
- отсутствие нескольких кнопок самых популярных в России социальных сетей;
- нагрузка на сайт.
KN Social Slide
Его встречаю на сайтах довольно часто, он прост в установке и настройке:
Вы можете настроить каждый раздел по своему усмотрению:
Получится не примечательная панель кнопок:
- отсутствуют некоторые востребованные в РФ соцсети;
- добавляет нагрузку на ресурс.
Sexy Bookmarks Slidebar
Многообразие кнопок может сразу сбить с толку. Но просмотрев весь перечень, я так и не нашел некоторых кнопок социальных сетей, которыми чаще всего пользуюсь сам.
Настройка на английском языке:
Все же, plugin не отвечает всем моим запросам, поэтому, не смотря на его оригинальное название, я его не выбрал.
- мало доступных кнопок;
- дополнительная нагрузка на блог.
Чудо-скрипт OdnaKnopka
Вы не хотите перегружать свой блог плагинами? Вполне разумно и оправданно. Для вас есть прекрасный сервис кнопок соцсетей: odnaknopka.ru .
Определитесь с настройками внешнего вида панели, поставьте соответствующие галочки при выборе:
И вуаля, на вашем сайте красуется виджет:
Выявлены только плюсы.
Сервис PLUSO
Система позволяет в несколько кликов в режиме онлайн выбрать дизайн иконок, настроить его и разместить в своем блоге с помощью скрипта. Расположен по адресу: share.pluso.ru .
Раньше перед установкой подобной панели, я переживал о том, как иконки впишутся в дизайн и приходилось постоянно обновлять свой сайт, чтобы посмотреть результат. Это меня очень утомляло, как любого вэб-мастера. В PLUSO допустимо сразу просмотреть будущий вид панели и подкорректировать его:
Cкрипт нужно будет скопировать и вставить на свой ресурс:
В итоге выглядит мило, а главное, не нарушен дизайн:
Положительное дополнение к ресурсу!
До новых встреч, друзья. Подписывайтесь на рассылку , пишите в комментариях отзывы об успехах блоггинге, всегда рад читать сообщения от вас!
Рекомендую прочесть следующие полезные статьи:
С уважением, Александр Сергиенко
Источник: int-net-partner.ru
Как добавить иконки соцсетей на сайт
Статьи по дизайну
Добавление значков социальных сетей на ваш сайт — это хороший способ установить связь с вашими клиентами через социальные сети, получить неформальную обратную связь с ними и вовлечь их в жизнь вашей компании.
Как можно добавить иконки на ваш сайт
Есть несколько способов добавить иконки социальных сетей на ваш сайт:
- Добавьте иконки в виде изображений в нужном формате .png, .svg или .eps.
- Добавьте их, используя иконки шрифтов — FontAwesome, Glyphicons и т. д.
- Реализуйте иконки, используя виджет WP.
- Добавьте иконки социальных сетей через плагин WP.
Вы можете выбрать наиболее подходящий для вас или попробовать их все.
Добавление иконок соцсетей как изображений (PNG, SVG, EPS, ETC.)
Если вы дизайнер, вы можете создавать или настраивать иконки самостоятельно. Но если вы не хотите этого делать или просто хотите сэкономить время, вы можете использовать множество сервисов, где можно выбрать пакеты иконок и скачать их.
Наиболее популярными являются:
Vecteezy
Выберите набор иконок, который больше всего соответствует вашим требованиям, и загрузите его. Затем загрузите файлы в медиатеку и добавьте их следующим образом (для HTML сайтов):
class=»social-icons»>
И добавьте стиль, чтобы настроить размер и положение иконок:
.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.И вот как это работает:
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, инструмент, который сэкономит много времени при добавлении иконок на ваш сайт:
Я надеюсь, что эта статья была полезна для вас, и не стесняйтесь оставлять свои комментарии относительно различных способов добавления социальных иконок!
Материал с templatemonster.com
Источник: artforlife.ru
Как добавить иконки социальных сетей на сайт
Узнайте, как легко добавить и стилизовать иконки социальных сетей на ваш сайт с помощью нашего понятного и доступного руководства!
Алексей Кодов
Автор статьи
1 июня 2023 в 15:23
Иконки социальных сетей являются важным элементом на современных сайтах, так как они позволяют пользователям делиться контентом, а также облегчают процесс нахождения и подписки на социальные каналы вашего сайта. В этой статье мы рассмотрим, как добавить иконки социальных сетей на сайт.
Выбор иконок
Для начала вам потребуются сами иконки.
Их можно найти на различных ресурсах, таких как FontAwesome, Flaticon или Iconfinder. Убедитесь, что выбранные иконки имеют подходящий формат (например, SVG или PNG) и размер.
Код HTML
Иконки социальных сетей обычно представляются в виде списка ссылок. Создайте для этого блок с классом social-icons (или любым другим, который будет использоваться в вашем CSS) и добавьте внутрь него ссылки с иконками.
Обратите внимание, что атрибут target=»_blank» позволяет открыть ссылку в новой вкладке.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Стилизация иконок
Теперь пришло время стилизовать иконки социальных сетей. Вам потребуется написать CSS-код, который будет управлять размерами, отступами и эффектами при наведении.
.social-icons < display: flex; justify-content: center; >.social-icons a < margin: 0 10px; >.social-icons img < width: 32px; height: 32px; transition: transform 0.3s; >.social-icons a:hover img
Этот код создает горизонтальный список иконок, устанавливает размеры и добавляет эффект увеличения при наведении курсора.
Не забудьте адаптировать стили в соответствии с вашим дизайном и размерами иконок!
Готово!
Теперь иконки социальных сетей должны быть успешно добавлены на ваш сайт. Убедитесь, что все ссылки ведут на правильные аккаунты и проверьте, как они выглядят на разных устройствах.
Источник: sky.pro