В настоящее время социальный обмен является неотъемлемой частью любого веб-сайта. Они позволяют пользователям мгновенно распространять информацию с помощью нескольких щелчков мышью, поделившись вашей статьей. В то время как маркетинг в социальных сетях является популярной темой, конструкторы сайтов, такие как Weebly, не предлагают виджет для обмена в социальных сетях для пользователей. К сожалению, даже пользователи бизнес-плана на Weebly не будут иметь достойных значков для публикации в социальных сетях на своем сайте после оплаты почти 25 долларов в месяц. В этой статье мы создадим настраиваемый виджет социального обмена CSS для сайта Weebly и объясним, как добавить его на свой сайт Weebly со ссылками на социальные сети.
К сожалению, это нужно делать на каждой странице, добавляя URL-адрес страницы. Ознакомьтесь с нашей отдельной статьей о том, как добавить значки социальных сетей по умолчанию и специальный виджет вращающихся значков в основном для добавления социальных профилей на ваш сайт Weebly.
Поскольку целью этой статьи не является обсуждение аспекта дизайна, мы предоставим полный код CSS, как показано ниже. В основном мы используем отличные шрифтовые значки для значков социальных сетей с шириной контейнера 300 пикселей для размещения пяти значков социальных сетей – Facebook, Twitter, Google+, Pinterest и LinkedIn.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<style>
/* Container */
.column {
width: 300px;
}
/* Individual Icons with first Box for Facebook */
.box {
background-color: #3b5998;
color: rgba(251, 244, 217, 0.99);
display: block;
width: 17%;
text-align: center;
float: left;
margin-right: 1px;
border-radius: 50%;
}
/* Twitter */
.box:first-child + .box {
background-color: #55acee;
}
/* Google+ */
.box:first-child + .box + .box {
background-color: #dc4e41;
}
/* Pinterest */
.box:first-child + .box + .box + .box {
background-color: #bd081c;
}
/* LinkedIn */
.box:first-child + .box + .box + .box +.box {
background-color: #0077b5;
}
/* Link Effects */
.column a {
text-decoration: none;
color: #ffffff;
outline: none;
-webkit-transition: 0.5s ease;
transition: 0.5s ease;
}
/*Font Awesome Icons Effects */
.box .fa {
margin: 10px;
display: block;
font-size: 26px;
}
/* Box Hover Effects */
.box:hover {
opacity: 0.7;
}
</style>
Ниже приведен HTML-код вместе с URL-адресом общего доступа для виджета социальных сетей:
<div class="column">
<a href="https://www.facebook.com/sharer/sharer.php?u=www.webnots.com" class="box">
<div class="fa fa-facebook"></div>
</a>
<a href="https://twitter.com/home?status=www.webnots.com" class="box">
<div class="fa fa-twitter"></div>
</a>
<a href="https://plus.google.com/share?url=www.webnots.com" class="box">
<div class="fa fa-google-plus"></div>
</a>
<a href="https://pinterest.com/pin/create/button/?url=http%3A//img.webnots.com/2015/06/header_logo_home_2x.png&media=www.webnots.com&description=" class="box">
<div class="fa fa-pinterest"></div>
</a>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=www.webnots.com&title=YOUR%20TITLE%20HERE&summary=&source=" class="box">
<div class="fa fa-linkedin"></div>
</a>
</div>
На опубликованном сайте виджет будет выглядеть следующим образом:
Мы использовали этот URL-адрес сайта, убедитесь, что заменили соответствующий контент, как указано ниже, из HTML:
- Facebook, Twitter и Google+ – замените URL сайта своим собственным.
- Pinterest – замените изображение и URL.
- LinkedIn – замените URL сайта и заголовок.
В случае, если вы хотите использовать в качестве виджета «следите за нами», просто замените URL-адреса в части «href» ссылками на ваши собственные социальные профили.
Добавление CSS и HTML на Weebly
- Вставьте CSS в раздел «Код заголовка» нужной страницы или поместите его в «Настройки», чтобы код действовал на уровне сайта. Узнайте больше о том, как добавить CSS на сайт Weebly.
Добавить код заголовка на страницу
- Добавьте HTML-контент на страницу, где вы хотите разместить значки, используя элемент «Вставить код ».
- Опубликуйте свой сайт, чтобы увидеть значки обмена в действии.
Настройка виджета
- Хотя мы объяснили, что с пятью значками, вы можете добавить любое количество значков. Обратитесь к цветовым кодам значков социальных сетей, чтобы подобрать цвет для своих значков.
- Ширина всего контейнера составляет 300 пикселей для автоматического выравнивания значков на мобильных устройствах. Если вы добавляете дополнительные значки, обязательно используйте запросы @media для правильного выравнивания значков на мобильном устройстве.
- Ширина отдельного значка составляет 17% в классе CSS «.box», который вы можете уменьшить или увеличить по своему усмотрению.
- Размер значка составляет 26 пикселей с классом CSS «.box .fa», который вы можете изменить по своему усмотрению.
- Если вы добавляете больше значков, просто добавьте «+ .box» и определите цвет фона значков.
Источник записи: www.webnots.com