RigWEB

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

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

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

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

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

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

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

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

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

1
2
3
4
5
6
function my_jquery() {
	wp_deregister_script( 'jquery' );
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
	wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_jquery' );

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

1
2
3
4
5
6
7
8
9
10
<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 google" data-id="gp"><i class="fa fa-google-plus"></i> Google+</a>
	<a class="push ok" data-id="ok"><i class="fa fa-odnoklassniki"></i> OK</a>
</div>
</div>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#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: 17%;
	min-width: 100px;
	line-height: 40px;
	margin: 5px 2px 20px 2px;
	font-size: 15px;
	text-align: center;
	color:#fff;
	cursor: pointer;
}
 
.facebook {background-color:#3b5998;}
.facebook:hover {background-color:#2d4373; color:#fff;}
.google {background-color:#dd4b39;}
.google:hover {background-color:#c23321; color:#fff;}
.twitter {background-color:#55acee;}
.twitter:hover {background-color:#2795e9; color:#fff;}
.vkontakte {background-color:#587ea3;}
.vkontakte:hover {background-color:#466482; color:#fff;}
.ok {background-color:#ee8208;}
.ok:hover {background-color:#ee7808; color:#fff;}

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

1
<script defer src="http://webliberty.ru/demo/share/share.js"></script>

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

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

  1. Артем

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

    Ответить

  2. Webliberty

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

    Ответить

  3. GladWeb

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

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

    Ответить

  4. Webliberty

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

    Ответить

  5. Артем

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

    Ответить

  6. Webliberty

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

    Ответить

  7. GladWeb

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

    Ответить

  8. allemiko

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

    Ответить

  9. Webliberty

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

    Ответить

  10. Артем

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

    Ответить

  11. Сергей

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

    Ответить

  12. Webliberty

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

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

    Ответить

  13. Сергей

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

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

    Ответить

  14. Дмитрий

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

    Ответить

  15. Webliberty

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

    Ответить

  16. Александр

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

    Ответить

  17. Bahus

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

    Ответить

  18. Сергей

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

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

    Ответить

  19. Елена

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

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

    Ответить

  20. Webliberty

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

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

    Ответить

  21. Елена

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

    Ответить

  22. Webliberty

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

    1
    
    <script src='http://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:

    1
    2
    3
    4
    5
    6
    7
    8
    
    $('.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);
    	}
    });

    На такую:

    1
    
    Shares.init();

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

    Ответить

  27. Елена

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

    Ответить

  28. Алексей

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

    Ответить

  29. Евгений

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

    Ответить

  30. Юлия

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

    1
    
    .social a {color:#fff;}

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

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

    Ответить

  31. Webliberty

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

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

    Ответить

  32. Станислав

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

    Ответить

  33. Станислав

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

    Ответить

  34. Станислав

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

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

    Ответить

  35. Роман

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

    Ответить

  36. Webliberty

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

    Ответить

Ваш комментарий:

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: