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

Здравствуйте! По многочисленным просьбам публикую статью по установке на сайт кнопок «поделиться» в социальных сетях. Конечно, есть множество готовых решений, но большинство имеет серьёзные недостатки.

Кнопки поделиться

Один из них — малая гибкость и ограниченный выбор стандартных настроек. Взять к примеру блок Поделиться от Яндекс, с недавних пор зачем-то вместе с социальными кнопками загружается встроенная Метрика… Опять же изменить размер или цвет кнопок довольно проблематично.

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

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

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

Устанавливаем свои кнопки «поделиться» в социальных сетях

Онлайн-демо и исходники данного примера вы найдете в конце статьи, а сейчас по порядку приступим к реализации. Сперва убедитесь, что на сайте используется jQuery, в противном случае подключите его, в WordPress это лучше делать через файл functions.php:

function my_jquery() {
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

Затем подключите Font Awesome — мы будем использовать векторные иконки социальных сетей вместо изображений. Теперь необходимо вставить HTML основу кнопок в код шаблона:

<div id="share">
<div class="like">Понравилось? Поделитесь с друзьями!</div>
<div class="social" data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>">
	<a class="push facebook" data-id="fb"><i class="fa fa-facebook"></i> Facebook</a>
	<a class="push twitter" data-id="tw"><i class="fa fa-twitter"></i> Twitter</a>
	<a class="push vkontakte" data-id="vk"><i class="fa fa-vk"></i> Вконтакте</a>
	<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> Одноклассники</a>
</div>
</div>

В принципе, код универсальный, но в качестве примера я привожу социальные кнопки для WordPress. Здесь ссылка на текущую страницу где расположены кнопки выводится функцией the_permalink(), а заголовок берётся из функции the_title(). В других CMS необходимо заменить эти функции на аналогичные.

С помощью стилей оформим наши кнопочки, зададим цвет фона и текста, добавим эффект при наведении указателя курсора мыши. В style.css добавим следующий код:

#share {
	width: 100%;
	border: 1px solid #eaeaea;
	margin: 0 auto;
	background: #fff;
	text-align: center;
}
.like {
	font-size: 16px;
	font-weight: 700;
	line-height: 50px;
}
.push {
	display: inline-block;
	width: 22%;
	min-width: 100px;
	line-height: 40px;
	margin: 5px 2px 20px 2px;
	font-size: 15px;
	text-align: center;
	color: #fff;
	cursor: pointer;
}
 
.facebook {background-color: #4267b2;}
.facebook:hover {background-color: #365899; color: #fff;}
 
.twitter {background-color: #1da1f2;}
.twitter:hover {background-color: #1a91da; color: #fff;}
 
.vkontakte {background-color: #5181b8;}
.vkontakte:hover {background-color: #5b88bd; color: #fff;}
 
.odnoklassniki {background-color: #ee8208;}
.odnoklassniki:hover {background-color: #ee7808; color: #fff;}

На очереди заключительный шаг — подключение обработчика share.js, его вы найдёте в архиве с исходниками. Для этого в заголовке перед закрывающим тегом </head>вставляем строку, меняя путь к файлу на своём хостинге:

<script defer="" src="share.js"></script>

На этом всё! Не стесняйтесь оставлять сообщения в комментариях, если вдруг что-то не получается или появились вопросы.

Вот такие современные плоские кнопки социальных сетей я использую на своем блоге, они размещены на каждой странице в конце статьи. Устанавливайте, тестируйте и не забывайте делиться с друзьями!

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(10 голосов, в среднем: 4.1 из 5)
  1. Артем

    А если в подвал скрипт вставить, будет работать?

    Ответить

  2. Webliberty

    Артем, должно сработать! Собственно говоря, у меня так и сделано — все скрипты я объединил в одном файле и подключил в футере.

    Ответить

  3. GladWeb

    Очень красиво и минималистично выглядит, спасибо)

    Правда я уже не дождался вашей статьи и поставил другие кнопки, если не трудно, посмотрите пожалуйста, стоит ли поменять на ваш вариант или «И так сойдет» 🙂

    Ответить

  4. Webliberty

    GladWeb, неплохой выбор) До текущего варианта у меня как раз и были установлены кнопки share42 — легкий и быстрый код, иконки объединены в один CSS-спрайт. Отказался от них после того как перевел блог в плоский стиль — не подходили по дизайну.

    Ответить

  5. Артем

    Webliberty, вот это, кстати, тоже интересно было бы узнать про объединение скриптов в один.

    Ответить

  6. Webliberty

    Артем, я объединял вручную. Создал файл main.js и в него добавляю весь JavaScript код, а подключал через Minify для сжатия «на лету». С помощью Minify URI Builder можно автоматически объединить несколько файлов.

    Ответить

  7. GladWeb

    Webliberty, спасибо, тогда оставлю пока то, что есть))

    Ответить

  8. allemiko

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

    Ответить

  9. Webliberty

    Алем, привет, не соскучился по своему блогу? Не планируешь возвращаться в нашу дружную компанию? Новые кнопочки установишь 😉

    Ответить

  10. Артем

    Webliberty, понятно, спасибо, давно хотел привести в порядок скрипты 🙂

    Ответить

  11. Сергей

    Денис, привет! Долго ждал этого урока! Отличный вариант для кнопок.

    Хотел спросить твое мнение. В разметке ты для кнопок использовал тег ссылки <a> не лучше ли было использовать тег кнопки? Интересно твое мнение, я в последнем проекте тоже делал разметку через ссылку, а позже уже задумался может использовать тег кнопки .

    Ответить

  12. Webliberty

    Привет, Сергей! В принципе особой разницы нет, но навскидку могу предположить какие могут возникнуть казусы при использовании <button>. Для элементов форм у браузеров есть свои встроенные стили, которые порой трудно переопределить, приходится использовать !important.

    Т.е. браузеры имеют свойство применять свои размеры к элементам форм, цвета, границы, менять стили при взаимодействии. Других особенностей не вижу, можно использовать как <a>, так и <button>.

    Ответить

  13. Сергей

    Webliberty, с точки зрения валидации я проверял, все ок. С точки зрения работоспособности тоже. Вопрос возник у меня только из-за правильности использования тегов.

    Спасибо за твое мнение.

    Ответить

  14. Дмитрий

    Скажите пожалуйста, а можно ли около каждой соц.кнопки сделать счетчик? У меня сейчас так реализовано, но на некрасивых кнопках. Очень удобно — видно сколько раз нажимали. Спасибо.

    Ответить

  15. Webliberty

    Дмитрий, в данном варианте не предусмотрены счетчики. Если Вам необходим такой функционал и имеется готовая реализация, то проще изменить дизайн и сделать кнопки красивыми с помощью CSS, а за основу взять пример из статьи.

    Ответить

  16. Александр

    Красивые кнопочки получаются 😎

    Ответить

  17. Bahus

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

    Ответить

  18. Сергей

    Webliberty, здравствуй.

    Я вывел кнопки на странице, все красиво, но они не работают. Скрипт подключил в header, нечего не изменилось

    Ответить

  19. Елена

    Здравствуйте. Сделала все по инструкции, но кнопки соцсетей остаются не активными. Проверила путь до файла share.js, все правильно. Плагинов на сайте нет, кроме подписки на комментарии. Не понятно, в чем может быть конфликт, не подскажете, в чем может быть дело?

    Проверила еще на одном блоге, результат тот же — кнопки не активные, ссылки никуда не ведут. Может быть ошибка в файле share.js из архива?

    Ответить

  20. Webliberty

    Елена, файл из архива идентичен файлу который используется на демо-странице, только что сравнил в Notepad++ оба файла. Открыл Ваш сайт и вижу что не используется jQuery — эта библиотека необходима для работы кнопок, в статье есть инструкция как подключить.

    Сергей, также проверьте подключение jQuery.

    Ответить

  21. Елена

    Webliberty, странно, в файле functions.php у меня есть код подключения jQuery, указанный в статье, но кнопки все равно не работают 🙁

    Ответить

  22. Webliberty

    Елена, тогда воспользуйтесь другим способом подключения jQuery: в заголовке перед </head> добавьте строку:

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

    Ответить

  23. Елена

    Webliberty, и этот способ подключения «в лоб» почему-то также не срабатывает… кнопки по-прежнему в ауте.

    Ответить

  24. Webliberty

    По крайней мере библиотека сейчас подключена. Попробуйте следовать указаниям из статьи и подключить скрипт share.js перед </head>, а не в нижней части сайта, но обязательно после jQuery. Еще один вариант — убрать атрибут defer у тега script.

    Ответить

  25. Елена

    Сделано… но безрезультатно, кнопки не работают… (извините, коммент сначала в другую статью ошибочно написала)

    Ответить

  26. Webliberty

    Последнее что могу предложить — заменить строки в share.js:

    jQuery(document).ready(function($) {
      $('.social a').on('click', function() {
      	var id = $(this).data('id');
      	if(id) {
      		var data = $(this).parent('.social');
      		var url = data.data('url') || location.href, title = data.data('title') || '', desc = data.data('desc') || '';
      		Shares.share(id, url, title, desc);
      	}
      });
    });

    На такую:

    Shares.init();

    У Вас в шаблоне подключен скрипт jquery.form.js, возможно с ним конфликтует.

    Ответить

  27. Елена

    Webliberty, йоххоууу!!! Заработало!!! 😎 Огромное спасибо за помощь, Денис, и отличный способ по установке кнопок соцсетей на сайт! 🙂

    Ответить

  28. Алексей

    Большое спасибо, за эту познавательную статью. Очень долго искал в интернете что то подобно, но не мог найти. Благодаря Вам теперь у меня на сайте тоже появились красивый кнопки «поделиться» 😎

    Ответить

  29. Евгений

    Долго искал подобные кнопки, спасибо огромное. Но есть один баг, кнопка VK при просмотре через iPhone 4, увеличивает в две строчки, то есть значок VK на первой строчке, а на второй «Вконтакте», а все остальные кнопки в одну строчку. Получается что три нормальных, а одна дистрофик. Почините, спасибо еще раз.

    Ответить

  30. Юлия

    Приветик, Денис.
    Невероятно, но я это сделала, поставила такие же кнопочки. Добавила только

    .social a {color:#fff;}

    Иначе надписи подкрашивало синим цветом, берет свойство от ссылок в статьях сайта. Большая просьба, если можно, сделать такую кнопочку на Одноклассники, мы живем в России, они более популярны чем G+ (поделись кодом) 😉

    И еще вопросик, добавление скриптов и прочего своими силами не сильно нагружает сайт, чем например вставить кнопки от готовых сервисов?

    Ответить

  31. Webliberty

    Привет, Юля! Обновил статью, демо-страницу и архив с исходниками, добавив кнопочку для Одноклассников.

    По второй части вопроса отвечу так: скорее наоборот, готовые сервисы нагружают сайт! Примеры я приводил в первой части статьи, приводя в пример кнопки от Яндекса и Pluso. То есть помимо основного назначения кнопок они собираю данные о пользователях, передают их третьим лицам или показываю «левую» рекламу. Тоже самое могу сказать и про AddThis.

    Ответить

  32. Станислав

    Кнопки реально классные. Буквально вчера у вас нашёл их и не получалось установить из-за того, что при подключении JQuery переставали отображаться карты и изображения.

    Сегодня вернулся к вашему сайту и тут новость, добавлена кнопка «одноклассники». Это очень к стати. Хотел сам уже было её попробовать подключить дополнительно при успешном результате. Но попробовав второй раз их установить, всё встало как с виагрой))) Всё работает и корректно отображается.

    Спасибо автору. Не много ресурсов, где есть не стандартные решения с социальными кнопками вроде вашего.

    Ответить

  33. Станислав

    Хотя у меня косяк вылез. Рано обрадовался. Меню не заметил как исчезло. Сейчас с этим JQuery буду разбираться. Может оно подключено и конфликтует, но без вашего не работают кнопки тогда загадка.

    Ответить

  34. Станислав

    Разобрался. Не туда положил файл js + замена последнего кода в файле на Shares.init();

    Как я тут с сам собой диалог раскрутил… а? 😀

    Ответить

  35. Роман

    Привет, Денис! Спасибо за статью, кнопки красивые и привлекательные, внедрил на сайт, до этого кнопки выводились с помощью плагина Share Buttons. Без плагина на много лучше и сайт быстрее открывается, теперь буду стараться избавляться от лишних плагинов. Единственное, кнопка одноклассников стала как-то странно вести себя, по размеру чуть больше остальных и проявляет себя при наведении на нее.

    Ответить

  36. Webliberty

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

    Ответить

  37. Вадим

    Добрый день, у меня сайт без WordPress, да и вообще без движка. Как я могу вставить ваши кнопки на сайт? Сделал все по инструкции, но разумеется ничего не работает — меня смущают функции the_permalink и the_title.

    Ответить

  38. Webliberty

    Вадим, правильно, что смущают, так как эти функции принадлежат WordPress.

    • the_permalink — выводит постоянную ссылку на запись
    • the_title — выводит заголовок записи.

    Естественно, что эти функции не будут работать на самописном сайте, Вам нужно использовать свои функции.

    Ответить

  39. Станислав

    Странно, но код для functions.php был у меня лишним и с ним ничего на странице не грузилось (фото, карты и т.п.). А так всё работает.

    Ответить

  40. WpKot

    Спасибо! Очень красивые кнопки. До этого стояли от Яндекса (ни о чем) 🙂

    Ответить

  41. Сергей

    Установил как описано, но при клике на кнопки ничего не происходит, в консоли вижу такую ошибку:

    TypeError: $(...) is null

    Что это может означать?

    Ответить

  42. Webliberty

    Сергей, jQuery подключен?

    Также есть вероятность, что скрипт загружается асинхронно и выполняется после рендеринга HTML основы страницы. Попробуйте убрать атрибуты defer или async, если их используете.

    Ответить

  43. Александр

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

    Ответить

  44. Webliberty

    Александр, тайтлы в Битриксе выводятся другой функцией, поэтому Вам необходимо заменить ее на другую. В WordPress она такая:

    data-title="<?php the_title(); ?>"

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

    Ответить

  45. Алексей

    Огромное спасибо автору данной статьи! Очень полезная и актуальная информация. Установил себе на сайт векторные иконки и сделал социальные кнопки, смотрится и работает все хорошо. Теперь думаю с помощью векторной графики и другие модули своего сайта «приукрасить».

    Ответить

  46. Webliberty

    Для установки кнопок на DLE нужно заменить функции вывода URL и заголовка в 3 строке:

    data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>"

    на переменные, актуальные для DataLife Engine:

    data-url="{full-link}" data-title="{title}"

    Ответить

  47. Андрей

    Вы забыли в исходниках задействовать кнопку Одноклассников 😎

    Ответить

  48. Webliberty

    Андрей, благодарю за внимательность! Действительно, в скрипте забыл дописать строки, сейчас архив обновлен.

    Ответить

  49. Webliberty

    В декабре прошлого года было объявлено о решении закрыть социальную сеть Google+ для индивидуальных пользователей. Это обусловлено низкой популярностью сервиса и нецелесообразностью его обслуживания.

    Уже с 4 февраля 2019 года в Google+ нельзя будет создавать профили, страницы, сообщества и мероприятия. А 2 апреля обычные аккаунты Google+ и все созданные страницы перестанут работать, весь контент будет удалён. Доступ останется только у корпоративных пользователей пакета G Suite — услуга является платной.

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

    Ответить

  50. Игорь

    Webliberty, здраствуйте! Не подскажите для Joomla 3 какую функцию нужно подставить? Вы написали для Вордпреса и DLE… У меня все работает через компонент ZOO и я просто зашел в тупик… А Ваш прием очень нравится… Помогите пожалуйста.

    Ответить

  51. Webliberty

    Игорь, здравствуйте! К сожалению с Joomla совсем не знаком и не имею малейшего представления как там всё устроено. С радостью хотел бы помочь, но недостаточно знаний, извините. Наверняка у Joomla есть большое и отзывчивое сообщество, задайте свой вопрос на форуме поддержки и узнайте какие функции отвечают за вывод URL и заголовка.

    Ответить

  52. Игорь

    Webliberty, Не подскажите, какие переменные нужно поставить для Joomla? Второй день не могу нигде найти… 😥

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.