Кнопки социальных сетей

Кнопки социальных сетей

Как сделать крутящиеся кнопки соцсетей

Привет всем читателям блога SEOjedi! Недавно прикрутил себе на блог новые, стильные кнопки соцсетей и немного «оживил» их. В этот же день начали поступать вопросы,  на сколько это сложно, сделать кнопки социальных сетей крутящимися и, как я это сделал. Решил ответить всем сразу — это абсолютно не сложно даже для начинающих, делается быстро и не тормозит сайт. Ну и заодно, полезная статья получилась.

А теперь все по порядку. Так, как блог у меня обучающий, то постараюсь максимально подробно расписать, что и за что отвечает в коде. Пример кнопок вы можете увидеть в верхней части блога. Делается это при помощи CSS. Вначале приведу пример кода, а потом распишу что к чему в нем. Сразу предупреждаю, что в примере присутствуют мои ссылки на соцсети и картинки, вам надо их будет изменить на свои!

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> 
<div id="social"> 
	<!--Start Rss Icon--> 
		<a title="Подпишитесь на Rss анал" href="http://feeds.feedburner.com/seokitchen" target="_blank"><img border="0" src="https://promotiger.ru/images/social/rss.png" style="margin-right:1px;" align="right" alt="Icon RSS"/></a> 
	<!--End Rss Icon--> 

	<!--Start Email Rss Icon--> 
		<a rel="nofollow" title="Получите бесплатные обновления по электронной почте" href="http://feedburner.google.com/fb/a/mailverify" target="_blank"><img border="0" src="https://promotiger.ru/images/social/mail.png" style="margin-right:1px;" align="right" alt="Icon Email RSS"/></a> 
	<!--End Email Rss Icon-->
	
	<!--Start Facebook Icon--> 
		<a rel="nofollow" title="Facebook Page" href="https://www.facebook.com/windrose.by" target="_blank"><img border="0" src="https://promotiger.ru/images/social/facebook.png" style="margin-right:1px;" align="right" alt="Icon Facebook"/></a> 
	<!--End Facebook Icon--> 
	
	<!--Start Twitter Icon--> 
		<a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/WindroseBY" target="_blank"><img border="0" src="https://promotiger.ru/images/social/twitter.png" style="margin-right:1px;" align="right" alt="Icon Twitter"/></a> 
	<!--End Twitter Icon--> 
	
	<!--Start Google+ Icon--> 
		<a title="Follow Us On Google+" rel="nofollow" href="https://plus.google.com/+FimaKorolev" target="_blank"><img style="margin-right:1px;" src="https://promotiger.ru/images/social/google.png" align="right" alt="Icon Google+"/></a> 
	<!--End Google+ Icon--> 
	
	<!--Start Pinterest Icon--> 
		<a title="Follow Our Pins" rel="nofollow" href="http://www.pinterest.com/windroseby/" target="_blank"><img style="margin-right:1px;" src="https://promotiger.ru/images/social/google.png" align="right" alt="Follow Me on Pinterest" /></a> 
	<!--End Pinterest Icon--> 
</div>

Основные пояснения по коду расположенному между тегами <style>:

  • Псевдокласс :hover — определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, проще говоря кнопка мыши не нажата. Ну и там определяем, что будет происходить с нашей кнопкой при наведении на нее курсора. В нашем случае через свойство background добавляем полупрозрачность transparent;opacity. Свойство opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность.
  • Свойство moz-transition — специальное свойство для создания эффекта анимированного перехода при изменении css-свойств элемента.
  • Свойство webkit-transition — задержка перед выполнением анимационного перехода.

Ну и дальше по ходу движения все для вращения иконок, 0.8 s — время вращения, можно менять. Rotate(360deg) — на сколько градусов поворачиваться, можно изменять. Это в принципе и все, что заставляет крутиться кнопки социальных сетей. Т.е. стиль у нас готов, осталось дело за малым, найти сами кнопки и правильно их прописать.

Большое количество бесплатных иконок социальных сетей можно найти и бесплатно скачать здесь. Прописываются при помощи HTML кода, я подробно описывал сей процесс в этой статье. Поэтому здесь просто приведу пример:

<!--Start Twitter Icon--> 
		<a rel="nofollow" title="Follow Our Updates On Twitter" href="https://twitter.com/WindroseBY" target="_blank"><img border="0" src="https://promotiger.ru/images/social/twitter.png" style="margin-right:1px;" align="right" alt="Icon Twitter"/></a> 
<!--End Twitter Icon-->

Как вы понимаете, вам надо будет изменять URL-ы социальной сети и пути к картинке. В коде можно переименовать тайтлы на свои. Если хотите убрать какую либо социалку, то просто удалите ненужные строки. Если надо добавить другую социалку, просто допишите строки.

По поводу установки всего этого добра. Могу предложить два способа:

  1. Первый — это установка при помощи виджета. Добавляете «Текстовый блок» на боковую панель, а в него копируете ваш код.
  2. Второй способ немного посложнее — вам надо будет вставить код «крутящихся кнопок социальных сетей» в файле header.php вашей темы, между тегами <body> в нужном месте. Я например вставил сразу после «mine-menu» и применил выравнивание по правому краю при помощи значения align=»right».

 

Ну вот? как то так! Как говорится, подобьем бабки. Пример кода имеется, где и как искать иконки вы уже знаете, остается только вписать аккаунты ваших социалок. Если что-то не будет получаться, пишите в комментариях или спрашивайте через форму обратной связи в Контактах. Удачи!

Оцените статью
( 1 оценка, среднее 5 из 5 )
Поделиться с друзьями
Блог [SEO Jedi]
Добавить комментарий

  1. Евгений

    Полезно, прикрутил. А вот как в бэкграунд поставить картинку для вона? То есть как вон сделать из png файла?

  2. SEOjedi автор

    Да, это плагин. Называется Shareaholic. Надпись наверное можно добавить как-то так Рассказать друзьям!< /p >'; ?> Размещаете его непосредственно на кодом кнопок.

  3. Илья

    Ну, вот стрелка около кнопочек с надписью share and enjoy — это плагин? Если да, то какой?
    Или ещё как можно над этими кнопочками добавить надпись «Рассказать друзьям» или другую? Я помню, что в каком-то файле можно это прописать, но не помню в каком =)

  4. SEOjedi автор

    Добрый день, Илья!Если вам нравятся кнопочки с для «шаринга» — то это плагин. А вот ч/б кнопки, которые крутятся, это на мои аккаунты в соцсетях ссылки. Что вас интересует больше?

  5. Илья

    Здравствуйте.
    А вот оформить эти кнопочки как?
    В смысле как у вас(со стрелочкой) или просто надпись сделать «расскажите друзьям».

  6. Роман Кияшко

    Здорово,полезные штуки.Берём на заметку)))

  7. Илья

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

  8. Геймер

    Подскажите, как эти кнопочки прикрутить через position: fixed, но только не краю браузера или экрана, а к контентной части? Вроде бы их нужно привязывать к родительскому блоку. Как это сделать, может у кого есть готовый код, или ссылка на подробный мануал.

  9. Ирина

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

  10. SEOjedi автор

    Добрый день, Петр! Не, у меня все работает. Да оно и не может не работать…

  11. SEOjedi автор

    Добрый день, Евгений! Зашел к вам на сайт, проверил работу кнопок. Все нормально работает. Почистите кэш.

  12. Евгений

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

  13. Пётр

    Немного удивлён. Сделано, как я вижу, без всяких плагинов. Не так давно видел нечто подобное (уж не знаю, как конкретно это было реализовано, с плагинами или без), но мало того, что картинки толком не отображались, в результате чего нельзы было понять что и откуда, но и сами кнопки не с первого раза срабатывали. У вас такого не бывало, всё работает?

  14. Никита

    точно, не разобрался мельком глянул показался платным. Запарился переделывать png иконки точнее менять их цвет но получилось прям в цвет!) Хорошо что наткнулся на вашу статью)

  15. adamgrin

    А еще и погуглить можно, там всего навалом.

  16. Антон К.

    Можно было бы еще одноклассники добавить!

  17. SEOjedi автор

    Там куча бесплатных кнопок, ищите лучше )))

  18. Никита Сергеевич

    Этот сервис предоставляющий иконки платный?((

  19. Никита Сергеевич

    Еще бы кнопочки оригинальные найти, не посоветуйте?

  20. SEOjedi автор

    Добрый день, Тимур! Это я для wordpress описывал, но на самом деле, особой разницы нет..

  21. тимур

    У меня вопрос а то что вы объяснили в статье она для какого движка?Просто я как то создал сайт на блогспоте и там все через шаблон надо лезть и вот думаю данная процедура прокатит?

  22. Павел Пашкан

    отлично!
    Для инфобизнесмена это как раз то что нужно!

  23. SEOjedi автор

    Да

  24. Никита Сергеевич

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

  25. Сергей

    Вопрос: а могу ли я, человек, который слабо соображает в устройстве движка, но более менее понимает код, сделать то, что вы сейчас рассказали?