Здравствуйте, дорогие читатели, в этой статье, спустя довольно длительное время, опять возвращусь к теме «Что и как сделать на 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. Также причиной, что оно все не помещается, может быть плагин рейтинга, поэтому вставляйте сначала без его кода.
Интересная статья. Я сам ставил кнопки соц. сетей тоже без плагинов. Только я сам сочинял код, т.к. не нашел информации. Но получилось в принципе нормально. Возьму у тебя кое что, хочу прозрачность добавить как у тебя. Смотрится красиво. Спасибо за статью. 🙂
@Никита, Такая же песня у меня. Ставил как есть. И коды сам сочинял лишь бы работали.
Очень познавательная статья. Такой подход конечно не всем подойдет, но зато можно красиво вставить в шаблон. Спасибо.
Отличный блок. Нужно будет себе прикрутить что-то подобное.
Плагины всегда «дарят» ограничения и допнагрузку.
Давно хотел добавить к стандартным кнопкам твиттера и G+ ещё и facebook вместе с Вконтакте.
Именно эта четвёрка сегодня наиболее популярны.
*boast*
А я использовал уже готовые плагины.
В названии статьи написано, что все это делаться будет без скриптов и плагинов, а сами коды кнопок — разве не мини-скрипты? 🙂
Зачем лишний геморой? Не проще с плагином установить кнопки. Просто разницы нету, вообще.
@Kerlon999, как кому нравится;)
Так меньше отжирать оперативы будет у сервера, это раз.
И как-то пользовался плагином — «одна кнопка», или как-то так…
Так вот — захожу на свой сайт со смартфона на андроиде — и сразу мне предлагают скачать какой-то установочный файл, ну типа мобильную оперу обновить. Естественно с вирем.
Эта зараза сидела именно в таком плагине.
Так, что — правильная статья.
Все отлично. Плагины не всегда в линию выстраивают кнопки, там все не очень выглядит, лучше вручную.
То что надо! Сейчас буду устанавливать 🙂
Хотелось бы знать, есть ли все-таки реальная польза от этих кнопок?
@BesterSoft, польза будет, если уделять этому внимание. Есть разные способы убедить читателя делиться публикацией в соцсетях. А это все больше влияет на ранжирование. Например, G+ очень ценится Гуглом. Это, конечно, не основной, но один из факторов продвижения.
Спасибо интересная стать, хотя я и не люблю возиться с html, но G+ и ретвит статье поставил
Да, что и сказать, блок кнопок получился замечательный. Мне без плагинов и сервисов так и не удалось их все подружить. Надо будет попробовать вставлять кнопки в таблицу, как Вы пишете.
Ну, вот, использовал ваш метод. Все круто, все работает. Мегареспект вам за информацию.
@Алексей, рад что получилось)
Спасбо Дима, возьму на заметку, недавно сделал на своем блоге в шапке ряд социальных кнопок без плагина. Мне кажеться, можно без тегов таблицы обойтись, ну это надо более основательно в стиле прописать положение кнопок.
Автору спасибо, много перепробовал пока эту статью не нашел. Получилось красиво.
Значит оказывается все так и не сложно? Тоже голову ломал недели полторы наверное как лучше сделать а оно вот тебе.
Я сейчас как раз работаю над своим новым блогом, он на вордпресе, учусь по-немногу, читая подобные статьи, знания ведь карман не тянут. Спсаибо за интересную инфу — воспользуюсь советами