Собственные кнопки соцсетей для сайта

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

Но!

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

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

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

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

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

Как установить скрипт Social Likes

Вам понадобиться скачать скрипт с кнопками:

https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js

И файл со стилями:

https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css

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

Выводятся соц. кнопки Social Likes на сайт, вот таким кодом. Его поставьте где нужно.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes_classic.css"> /*Стиль кнопок*/
<script src="https://cdn.jsdelivr.net/npm/social-likes/dist/social-likes.min.js"></script>/*Скрипт кнопок*/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>/*JS-фреймворк jQuery*/
<div class="social-likes social-likes_light">
	<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
	<div class="twitter" title="Поделиться ссылкой в Твиттере">Twitter</div>
	<div class="mailru" title="Поделиться ссылкой в Моём мире">Мой мир</div>
	<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
	<div class="odnoklassniki" title="Поделиться ссылкой в Одноклассниках">Одноклассники</div>
</div>

Пропишите ваши пути к файлу со стилями и скрипту.

 JS-фреймворк jQuery jquery.min.js, возможно не понадобиться, во всяком случает, у меня на Джумла 3+, он уже стоял. Я сначала с ним попробовал, потом закомментировал, все работало.

В Джумле, можно создать модуль с кодом кнопок и ставить в материал куда вам нужно. Подключать link-и и script-ы, можно прям в теле материала, а не только в теге head. Это не является ошибкой и код проходит валидацию. Но все же, файлы js и css, лучше ставить по одному на страницу.

Как разместить код соц.кнопок в конце страницы, до комментариев ДжКомментс описано здесь.