Блок кнопок социальных сетей без плагинов и скриптов

Здравствуйте, дорогие читатели, в этой статье, спустя довольно длительное время, опять возвращусь к теме «Что и как сделать на wordpress». Те, кто не впервые гостят на моем блоге, наверно заметили, сразу по окончании любой статьи довольно интересно оформленную область с кнопками социальных сетей, а также кнопкой рейтинга. Некоторые даже спрашивали, как её сделать, но поскольку в комментариях все это дело довольно сложно объяснить я решил написать статью на тему, как создать без помощи скриптов и плагинов (с использованием только CSS и HTML) красивый блок кнопок социальных сетей.

Для тех, кто не понял о каких кнопках идет речь, привожу их скрин чуть ниже 🙂

Пожалуй, данный вариант подойдет не только для обладателей сайтов на CMS wordpress, а и любых других движках, так как для работы этих кнопок потребуется всего лишь поддержка PHP.

Итак, давайте приступим. Первым делом для начала давайте получим код для вставки всех этих кнопок. Получить код кнопки «Мне нравится» от Facebook можно здесь, от Вконтакте — здесь. Код кнопки Google +1 нужно получить здесь. Под номером четыре в блоке у меня стоит php-код, который служит для вызова функции голосования за статьи. Для того чтобы реализовать этот рейтинг необходимо сначала установить этот плагин и поставить вот такой код <?php the_ratings();  ?>  его вызова в наш блок.

Подготовительные работы закончились. У нас есть нужные коды кнопок, теперь остается самое главное – как их красиво и аккуратно вставить в наш шаблон wordpress.

Помню, когда еще очень давно хотел вставить такие кнопки столкнулся с одной проблемой: кнопки «Мне нравится» от Вконтакте и Facebook никак не хотели ставать в один ряд. Последняя всё время перескакивала на следующую строку. Из-за чего общий их вид меня не устраивал. Немного побродив по разным форумам и блогам, я нашел довольно простое решение этой проблемы: все, что надо было сделать, это вставить их с использованием таблицы. Вот тут-то и без начальных навыков html не обойтись, а если вы хотите этот блок еще и красиво приукрасить, то нужно знать и CSS.

Для тех, кто не владеет не первым, не вторым привел ниже готовый код, который просто нужно вставить в указанные чуть ниже файлы вашего шаблона. К каждой строке кода также напишу подробные комментарии, благодаря чему вы сможете подправить вид блока под свои нужды.

Этот код вставляем в то место где вы хотите увидеть блок с социальными кнопками (в wordpress я вставил его в файл single.php сразу после окончания статьи).

<div class="button_soc"> <!--button – название div класса прописанного в CSS-->
<table style="padding-top:5px; padding-left:15px;"> <!-- padding-top:5px – отступ сверху 5 пикселей, padding-left:15px – отступ слева 15 пскселей-->
<tr vertical-align:bottom >
<td>
<!--Сюда вставляем код вызова кнопки от Вконтакте-->
</td>
<td>
<!--Сюда вставляем код вызова кнопки от Facebook-->
</td>
<td>
<!--Сюда вставляем код вызова кнопки Google +1-->
</td>
<td>
<?php the_ratings();  ?> <!--это код вызова рейтинга, для его работы надо сначала установить плагин	-->
</td>
</tr>
 </table>
</div>

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

.button_soc {width:500px; height:36px; margin-top:30px; margin-bottom:15px; margin-left:10px; border:1px solid #343333; background-color:#EEEEEE; /*здесь указано ширина, высота блока, отступ сверху, снизу, слева, толщина, типа и цвет рамки, цвет заднего плана блока*/
	-moz-box-shadow: 4px 4px 6px #924466; /*в этой строке в  двух последующих указанны настройки тени от блока*/
	-webkit-box-shadow: 4px 4px 6px #924466;
	box-shadow: 4px 4px 6px #924466;
border-style: DASHED; /* стиль границы, в данном случае пунктирной линией*/
border-color: # B3B3B3; /*цвет границы*/
border-radius: 7px; /*закругление, радиус закругление углов блока*/
/* Internet Explorer */
filter:alpha(opacity=60); /*прозрачность блока для Internet Explorer*/
/* CSS3 standard */
opacity:0.6 /* прозрачность блока стандарт CSS3*/
}

/* ниже описано тоже самое, только учетом того все ниже описанное будет происходит когда вы наведете на блок курсор мышки. Свойство hover */
.button_soc:hover  { width:500px; height:36px; margin-top:30px; margin-bottom:15px; margin-left:10px; border:1px solid #343333; background-color:#F3F6FA;
	-moz-box-shadow: 4px 4px 6px #924466;
	-webkit-box-shadow: 4px 4px 6px #924466;
	box-shadow: 4px 4px 6px  #924466;
border-style: DASHED;
border-color: #B3B3B3;
border-radius: 7px;
/* Internet Explorer */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85
 }

Вот и все. Если вы проделали все правильно, то у вас должен появиться на сайте красивый блок из социальных кнопок. Единственное что я хочу заметить, стоит поэкспериментировать с цветами и прозрачностью, вы уже там подправьте как лучше для вашего сайта. Также если кнопки и блок немного «разъехались» и не ровно сидят, то это можно исправить с помощью параметров блока div, таких как: width, height, margin-top, margin-bottom и margin-left. Просто выставляйте наиболее подходящие значение в пикселях и все.

На этом всё, спасибо за внимание. Надеюсь, после этой статьи вы не только обзавелись еще одним способом добавления на сайт красивых кнопок социальных сетей, а еще и обогатились знаниями в области html и CSS.

P.S. Прошу в комментариях высказывать свое мнение по выше представленному способу добавления соц кнопок, буду очень благодарен :).

 UPD: спустя пол часа после написания статьи

При добавлении кнопок не забудьте изменить значение для кнопки от Facebook data-width=450 на меньшее. Вместо 450 поставьте 70 или 80. Также причиной, что оно все не помещается, может быть плагин рейтинга, поэтому вставляйте сначала без его кода.