Красивые кнопки социальных сетей для сайта
Здравствуйте! По многочисленным просьбам публикую статью по установке на сайт кнопок «поделиться» в социальных сетях. Конечно, есть множество готовых решений, но большинство имеет серьёзные недостатки.
Один из них — малая гибкость и ограниченный выбор стандартных настроек. Взять к примеру блок Поделиться от Яндекс, с недавних пор зачем-то вместе с социальными кнопками загружается встроенная Метрика… Опять же изменить размер или цвет кнопок довольно проблематично.
Со временем популярные решения обрастают дополнительными функциями, которые не только увеличивают размер подгружаемых скриптов, но и могут содержать вредоносный код.
После использования различных вариантов я пришел к мнению, что собственное решение гораздо лучше и сегодня расскажу об этом. Но вначале я рекомендую вам ознакомиться с инструкцией по установке шрифта 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 odnoklassniki" 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>На этом всё! Не стесняйтесь оставлять сообщения в комментариях, если вдруг что-то не получается или появились вопросы.
Вот такие современные плоские кнопки социальных сетей я использую на своем блоге, они размещены на каждой странице в конце статьи. Устанавливайте, тестируйте и не забывайте делиться с друзьями!
А если в подвал скрипт вставить, будет работать?
Ответить
Артем, должно сработать! Собственно говоря, у меня так и сделано — все скрипты я объединил в одном файле и подключил в футере.
Ответить
Очень красиво и минималистично выглядит, спасибо)
Правда я уже не дождался вашей статьи и поставил другие кнопки, если не трудно, посмотрите пожалуйста, стоит ли поменять на ваш вариант или «И так сойдет» 🙂
Ответить
GladWeb, неплохой выбор) До текущего варианта у меня как раз и были установлены кнопки share42 — легкий и быстрый код, иконки объединены в один CSS-спрайт. Отказался от них после того как перевел блог в плоский стиль — не подходили по дизайну.
Ответить
Webliberty, вот это, кстати, тоже интересно было бы узнать про объединение скриптов в один.
Ответить
Артем, я объединял вручную. Создал файл main.js и в него добавляю весь JavaScript код, а подключал через Minify для сжатия «на лету». С помощью Minify URI Builder можно автоматически объединить несколько файлов.
Ответить
Webliberty, спасибо, тогда оставлю пока то, что есть))
Ответить
Всегда хотел твои кнопки стыбзить, вставлял себе, но они почему то не работали, а вот оно как сделано 😀 Спасибо.
Ответить
Алем, привет, не соскучился по своему блогу? Не планируешь возвращаться в нашу дружную компанию? Новые кнопочки установишь 😉
Ответить
Webliberty, понятно, спасибо, давно хотел привести в порядок скрипты 🙂
Ответить
Денис, привет! Долго ждал этого урока! Отличный вариант для кнопок.
Хотел спросить твое мнение. В разметке ты для кнопок использовал тег ссылки
<a>не лучше ли было использовать тег кнопки? Интересно твое мнение, я в последнем проекте тоже делал разметку через ссылку, а позже уже задумался может использовать тег кнопки .Ответить
Привет, Сергей! В принципе особой разницы нет, но навскидку могу предположить какие могут возникнуть казусы при использовании
<button>. Для элементов форм у браузеров есть свои встроенные стили, которые порой трудно переопределить, приходится использовать!important.Т.е. браузеры имеют свойство применять свои размеры к элементам форм, цвета, границы, менять стили при взаимодействии. Других особенностей не вижу, можно использовать как
<a>, так и<button>.Ответить
Webliberty, с точки зрения валидации я проверял, все ок. С точки зрения работоспособности тоже. Вопрос возник у меня только из-за правильности использования тегов.
Спасибо за твое мнение.
Ответить
Скажите пожалуйста, а можно ли около каждой соц.кнопки сделать счетчик? У меня сейчас так реализовано, но на некрасивых кнопках. Очень удобно — видно сколько раз нажимали. Спасибо.
Ответить
Дмитрий, в данном варианте не предусмотрены счетчики. Если Вам необходим такой функционал и имеется готовая реализация, то проще изменить дизайн и сделать кнопки красивыми с помощью CSS, а за основу взять пример из статьи.
Ответить
Красивые кнопочки получаются 😎
Ответить
Симпатевые кнопочки. Надо себе на новый сайт залить. А то свои приелись уже. Плюс скрипт свой, без стороннего сайта.
Ответить
Webliberty, здравствуй.
Я вывел кнопки на странице, все красиво, но они не работают. Скрипт подключил в header, нечего не изменилось
Ответить
Здравствуйте. Сделала все по инструкции, но кнопки соцсетей остаются не активными. Проверила путь до файла share.js, все правильно. Плагинов на сайте нет, кроме подписки на комментарии. Не понятно, в чем может быть конфликт, не подскажете, в чем может быть дело?
Проверила еще на одном блоге, результат тот же — кнопки не активные, ссылки никуда не ведут. Может быть ошибка в файле share.js из архива?
Ответить
Елена, файл из архива идентичен файлу который используется на демо-странице, только что сравнил в Notepad++ оба файла. Открыл Ваш сайт и вижу что не используется jQuery — эта библиотека необходима для работы кнопок, в статье есть инструкция как подключить.
Сергей, также проверьте подключение jQuery.
Ответить
Webliberty, странно, в файле functions.php у меня есть код подключения jQuery, указанный в статье, но кнопки все равно не работают 🙁
Ответить
Елена, тогда воспользуйтесь другим способом подключения jQuery: в заголовке перед
</head>добавьте строку:<script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>Ответить
Webliberty, и этот способ подключения «в лоб» почему-то также не срабатывает… кнопки по-прежнему в ауте.
Ответить
По крайней мере библиотека сейчас подключена. Попробуйте следовать указаниям из статьи и подключить скрипт share.js перед
</head>, а не в нижней части сайта, но обязательно после jQuery. Еще один вариант — убрать атрибутdeferу тегаscript.Ответить
Сделано… но безрезультатно, кнопки не работают… (извините, коммент сначала в другую статью ошибочно написала)
Ответить
Последнее что могу предложить — заменить строки в 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, возможно с ним конфликтует.
Ответить
Webliberty, йоххоууу!!! Заработало!!! 😎 Огромное спасибо за помощь, Денис, и отличный способ по установке кнопок соцсетей на сайт! 🙂
Ответить
Большое спасибо, за эту познавательную статью. Очень долго искал в интернете что то подобно, но не мог найти. Благодаря Вам теперь у меня на сайте тоже появились красивый кнопки «поделиться» 😎
Ответить
Долго искал подобные кнопки, спасибо огромное. Но есть один баг, кнопка VK при просмотре через iPhone 4, увеличивает в две строчки, то есть значок VK на первой строчке, а на второй «Вконтакте», а все остальные кнопки в одну строчку. Получается что три нормальных, а одна дистрофик. Почините, спасибо еще раз.
Ответить
Приветик, Денис.
Невероятно, но я это сделала, поставила такие же кнопочки. Добавила только
.social a {color:#fff;}Иначе надписи подкрашивало синим цветом, берет свойство от ссылок в статьях сайта. Большая просьба, если можно, сделать такую кнопочку на Одноклассники, мы живем в России, они более популярны чем G+ (поделись кодом) 😉
И еще вопросик, добавление скриптов и прочего своими силами не сильно нагружает сайт, чем например вставить кнопки от готовых сервисов?
Ответить
Привет, Юля! Обновил статью, демо-страницу и архив с исходниками, добавив кнопочку для Одноклассников.
По второй части вопроса отвечу так: скорее наоборот, готовые сервисы нагружают сайт! Примеры я приводил в первой части статьи, приводя в пример кнопки от Яндекса и Pluso. То есть помимо основного назначения кнопок они собираю данные о пользователях, передают их третьим лицам или показываю «левую» рекламу. Тоже самое могу сказать и про AddThis.
Ответить
Кнопки реально классные. Буквально вчера у вас нашёл их и не получалось установить из-за того, что при подключении JQuery переставали отображаться карты и изображения.
Сегодня вернулся к вашему сайту и тут новость, добавлена кнопка «одноклассники». Это очень к стати. Хотел сам уже было её попробовать подключить дополнительно при успешном результате. Но попробовав второй раз их установить, всё встало как с виагрой))) Всё работает и корректно отображается.
Спасибо автору. Не много ресурсов, где есть не стандартные решения с социальными кнопками вроде вашего.
Ответить
Хотя у меня косяк вылез. Рано обрадовался. Меню не заметил как исчезло. Сейчас с этим JQuery буду разбираться. Может оно подключено и конфликтует, но без вашего не работают кнопки тогда загадка.
Ответить
Разобрался. Не туда положил файл js + замена последнего кода в файле на
Shares.init();Как я тут с сам собой диалог раскрутил… а? 😀
Ответить
Привет, Денис! Спасибо за статью, кнопки красивые и привлекательные, внедрил на сайт, до этого кнопки выводились с помощью плагина Share Buttons. Без плагина на много лучше и сайт быстрее открывается, теперь буду стараться избавляться от лишних плагинов. Единственное, кнопка одноклассников стала как-то странно вести себя, по размеру чуть больше остальных и проявляет себя при наведении на нее.
Ответить
Роман, на демо-странице работает, поэтому не могу определить с чем может быть связано такое поведение кнопки.
Ответить
Добрый день, у меня сайт без WordPress, да и вообще без движка. Как я могу вставить ваши кнопки на сайт? Сделал все по инструкции, но разумеется ничего не работает — меня смущают функции
the_permalinkиthe_title.Ответить
Вадим, правильно, что смущают, так как эти функции принадлежат WordPress.
the_permalink— выводит постоянную ссылку на записьthe_title— выводит заголовок записи.Естественно, что эти функции не будут работать на самописном сайте, Вам нужно использовать свои функции.
Ответить
Странно, но код для functions.php был у меня лишним и с ним ничего на странице не грузилось (фото, карты и т.п.). А так всё работает.
Ответить
Спасибо! Очень красивые кнопки. До этого стояли от Яндекса (ни о чем) 🙂
Ответить
Установил как описано, но при клике на кнопки ничего не происходит, в консоли вижу такую ошибку:
TypeError: $(...) is nullЧто это может означать?
Ответить
Сергей, jQuery подключен?
Также есть вероятность, что скрипт загружается асинхронно и выполняется после рендеринга HTML основы страницы. Попробуйте убрать атрибуты
deferилиasync, если их используете.Ответить
Добрый день, сайт на битриксе, есть такая проблема, поставил ваши красивые кнопочки, но когда перехожу на страницу соцсети, информации от сайта нет, только ссылка, картинок нет, тайтлов тоже, хотя с татйлами и ссылками я понимаю в чем проблема не пойму как картинку зацепить.
Ответить
Александр, тайтлы в Битриксе выводятся другой функцией, поэтому Вам необходимо заменить ее на другую. В WordPress она такая:
data-title="<?php the_title(); ?>"Картинки подцепляются скриптами самих соцсетей, здесь я ничем помочь не могу. Но в своей практике такое встречал: форум на phpBB также не видит картинок, т.к. они хэшируются и не хранятся в открытом виде…
Ответить
Огромное спасибо автору данной статьи! Очень полезная и актуальная информация. Установил себе на сайт векторные иконки и сделал социальные кнопки, смотрится и работает все хорошо. Теперь думаю с помощью векторной графики и другие модули своего сайта «приукрасить».
Ответить
Для установки кнопок на DLE нужно заменить функции вывода URL и заголовка в 3 строке:
data-url="<?php the_permalink(); ?>" data-title="<?php the_title(); ?>"на переменные, актуальные для DataLife Engine:
data-url="{full-link}" data-title="{title}"Ответить
Вы забыли в исходниках задействовать кнопку Одноклассников 😎
Ответить
Андрей, благодарю за внимательность! Действительно, в скрипте забыл дописать строки, сейчас архив обновлен.
Ответить
В декабре прошлого года было объявлено о решении закрыть социальную сеть Google+ для индивидуальных пользователей. Это обусловлено низкой популярностью сервиса и нецелесообразностью его обслуживания.
Уже с 4 февраля 2019 года в Google+ нельзя будет создавать профили, страницы, сообщества и мероприятия. А 2 апреля обычные аккаунты Google+ и все созданные страницы перестанут работать, весь контент будет удалён. Доступ останется только у корпоративных пользователей пакета G Suite — услуга является платной.
С учётом этих изменений мной принято решение исключить фрагменты кода с поддержкой Google Plus из кнопок соцсетей. В том случае, если вы хотите продолжить их использование, дополните код фрагментами из текстового файла, добавленного в архив.
Ответить
Webliberty, здраствуйте! Не подскажите для Joomla 3 какую функцию нужно подставить? Вы написали для Вордпреса и DLE… У меня все работает через компонент ZOO и я просто зашел в тупик… А Ваш прием очень нравится… Помогите пожалуйста.
Ответить
Игорь, здравствуйте! К сожалению с Joomla совсем не знаком и не имею малейшего представления как там всё устроено. С радостью хотел бы помочь, но недостаточно знаний, извините. Наверняка у Joomla есть большое и отзывчивое сообщество, задайте свой вопрос на форуме поддержки и узнайте какие функции отвечают за вывод URL и заголовка.
Ответить
SVG лучше, чем эти awesome иконки.
Ответить
Webliberty, Не подскажите, какие переменные нужно поставить для Joomla? Второй день не могу нигде найти… 😥
Ответить