Собственные кнопки соцсетей для сайта
Кнопки социальных сетей для читателей достаточно удобны, кликнул и поделился понравившейся статьей. Сейчас многие сервисы предоставляют скрипты кнопок, при чем совершено бесплатно. Для вебмастера, установка не вызывает проблем. Вроде кругом плюсы?
Но!
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, лучше ставить по одному на страницу.
Как разместить код соц.кнопок в конце страницы, до комментариев ДжКомментс описано здесь.
Оставить коммент со ссылкой бесплатно можно здесь