Лайкли – социальные кнопки, которые не стыдно поставить
Опубликовано: 02.09.2018
Многие заметили, что я запилил на блоге для теста лёгкие и красивые социальные кнопки. Давно искал универсальный скрипт, чтобы были основные русскоязычные социалки , включая Одноклассники. Плюс нужна была поддержка Ретины (Retina).
Лайкли – это те самые социальные кнопки, которые не стыдно поставить на сайт. Выглядят красиво (в том числе и на ретине), грузятся быстро, можно задавать свой текст и ссылку. Что ещё нужно?
Поддерживаются следующие социальные сети: Twitter, Facebook, ВКонтакте, Одноклассники, Google Plus, Pinterest.
Сама процедура установки Лайкли довольна проста, поэтому опишу процесс конкретно с WordPress (есть некоторые нюансы).
Для начала качаем архив (ссылка ниже), распаковываем его и получаем 3 файла.
license.txt – Описание лицензии, под которой распространяется код. likely.css и likely.js – Файлы скрипта.Переходим в папку своей темы WordPress, заливаем likely.css в папку css (если нет – создаём), а likely.js – в js (аналогично, если нету – создаём).
Также скрипту необходима библиотека jQuery . Она наверняка уже есть на вашем сайте, поэтому подключать её нет смысла.
Теперь открываем header.php. В раздел <head> </head> нужно добавить:
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/css/likely.css"> <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/likely.js"></script>Если у вас всё же нету jQuery – вставьте ещё такую строчку:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>После этого там, где хотите вывести кнопки, вставьте вот такой код:
<div class="likely" data-url="<?php the_permalink() ?>" data-title="<?php the_title(); ?>"> <div class="twitter" data-via="sk8er72">Твитнуть</div> <div class="vkontakte">Поделиться</div> <div class="facebook">Поделиться</div> <div class="gplus">Плюсануть</div> <div class="odnoklassniki">Класснуть</div> <div class="pinterest" data-media="тут_картинка.png">Запинить</div> </div>Обязательно смените sk8er72 во второй строке, вставьте в кавычки свой ник в Twitter. Если вам не нужно указывать юзера, который будет упоминаться при твите, просто уберите весь пункт data-via .
В первой строке, в data-url , вставлена переменная, которую WordPress меняет на ссылку, а в data-title вставляется заголовок статьи. Если параметры полностью убрать, то будет автоматически вставляться текущий <title> страницы и ссылка, на которой юзер находится в данный момент.
Ещё есть отдельная опция у Pinterest'а – data-media . Сюда нужно вставлять картинку (вместо тут_картинка.png), которая попадёт в Pinterest.
Есть ещё настройки внешнего вида (процитирую с сайта разработчика):
class="likely likely-light " – Скин, который хорошо смотрится на тёмном и фотографическом фоне. Если фотография слишком светлая, лучше использовать обычный скин. class="likely likely-small " – Маленькие кнопки. class="likely likely-big " – Большие кнопки.Но я всё равно допиливал их под себя из за особенностей дизайна. Сделать это просто, достаточно подкорректировать likely.css.
Скачать Лайкли
Под социальным замком ссылка на официальную страницу Лайкли, на сайте разработчика.
Кнопка загрузки:
Скачать Лайкли
Если ссылка недоступна - попробуйте зайти на главную страницу сайта разработчика .
Заметили, что скоро лето? Стоит заказать себе кондиционер на сайте mirclimata.ru , чтобы устанавливать социальные кнопки в комфортной температуре.
Вот и всё. Приятного пользования кнопками! (: И не забудьте поделиться в социальных сетях данной статьёй с помощью социокнопок ниже.
