Виджет простых значков социальных сетей для Weebly

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

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

Пользовательский виджет значков социального обмена CSS

Поскольку целью этой статьи не является обсуждение аспекта дизайна, мы предоставим полный код 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 для виджета значков социального обмена

Ниже приведен 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» и определите цвет фона значков.