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

Fima Korolev

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

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

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

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

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

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

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

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

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

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

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

 

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


-->

24 комментариев »

  1. Илья:

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

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

      • Илья:

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

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

  2. Роман Кияшко:

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

  3. Илья:

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

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

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

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

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

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

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

  9. Антон К.:

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

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

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

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

      • Никита:

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

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

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

  12. тимур:

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

  13. Павел Пашкан:

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

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

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

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

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">