Делаем социальные кнопки себе на сайт


Не скажу что являюсь любителем различных виджетов или социальных кнопок на сайтах, но тем не менее, я постарался сделать их максимально минималистичными, что бы не было броскости, и не раздражали как пользователя, так и владельца сайта.


Для примера я ограничился несколькими соцсетями, и скайпом (в обучающих целях это будет полезно, по скольку ссылки на мессенджеры, или почту выглядят немножко по другому, но бывает что они нужны, так что в примере я решил добавить один такой элемент), которые мы вставим в боковую панель, или в футер, тут уже как кому понадобится :-)


Пример будет для движка WonderCMS версии 2 и выше, но этот прием можно использовать и на любом HTML сайте, либо встроить в шаблон любой другой цмс.


Итак: для начала нам нужно открыть файл шаблона theme.php


Вверху мы увидим ссылки на файлы стилей, фавикон (если есть), и бутстрап, которые находятся сразу после HEAD

Вставляем туда следующие строки:


<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Далее ниже ищем теги бокового меню:

<?=wCMS::page('content')?>
<?=wCMS::block('subside')?>
<?=wCMS::footer()?>

Выбираем нужный из трех (контент - содержимое, сабсайд - боковое меню, или футер - нижняя строка), и прописываем сразу под одним из них следующие строки:


<center>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-youtube"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-vk"></a>
<a href="#" class="fa fa-skype"></a>
</center>

Я сразу указал вывести наши кнопки по центру, это будет выглядеть более эстетично.


Теперь нашим кнопочкам нужно создать внешний вид (открываем style.css нашего шаблона)

Прописываем в удобном нам месте (можно в конце) эти строки:

.fa {
  padding: 7px;
  font-size: 25px;
  width: 25px;
  text-align: center;
  text-decoration: none;
  margin: 2px 2px;
  border-radius: 50%;
}

.fa:hover {
    opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-vk {
  background: #125688;
  color: white;
}
После чего сохраняем и перезагружаем страницу (ctrl+f5)
и наши кнопочки появятся там, где их прописали.

Не забудьте прописать ваши ссылки на фейсбук, твиттер, ютюб, инстаграм, вконтакте, и скайп, что бы кнопки работали правильно.

Не забудьте про скайп ( остальные мессенджеры работают по тому же принципу), в котором ссылка на ваш аккаунт выглядит иначе, что бы пользователь вашей страницы мог вам позвонить, водите  skype:SkypeUser?call, где вместо SkypeUser вписываете свой логин