Лайкли

Лайкли — социокнопки, которые не стыдно поставить:

Отправить
Поделиться
Запинить
Отправить
Поделиться
Запинить
Отправить
Поделиться
Запинить
Отправить
Поделиться
Запинить
Отправить
Поделиться
Запинить
Отправить
Поделиться
Запинить

Две расцветки, три размера, десять соцсетей, любой текст на кнопках, поддержка ретины.


Скачать архив
или возьмите с Гитхаба

Установка и использование

Добавьте в элемент <head> на странице:

<script src="/путь/к/likely.js"></script>
<link rel="stylesheet" href="/путь/к/likely.css">

Вставьте кнопки в нужное место, расположите в любом порядке, уберите лишние, подпишите как нравится:

<div class="likely">
  <div class="twitter">Твитнуть</div>
  <div class="facebook">Поделиться</div>
  <div class="vkontakte">Поделиться</div>
  <div class="telegram">Отправить</div>
  <div class="odnoklassniki">Класснуть</div>
  <div class="linkedin">Линкануть</div>
  <div class="whatsapp">Вотсапнуть</div>
  <div class="pinterest" data-media="i/pinnable.jpg">Запинить</div>
</div>

Настройка

Классы, меняющие внешний вид (все примеры выше):

class="likely likely-light"
Скин, который хорошо смотрится на тёмном и фотографическом фоне. Если фотография слишком светлая, лучше использовать обычный скин.
class="likely likely-small"
Маленькие кнопки.
class="likely likely-big"
Большие кнопки.

Параметры у основного элемента:

data-url="..."
Какая ссылка должна попасть в соцсети. По умолчанию — адрес страницы, на которой стоят кнопки, поэтому обычно можно не указывать.
data-title="Лайкли: социокнопки, которые не стыдно поставить"
Название страницы, которое должно попасть в соцсети. По умолчанию — тайтл страницы.

У элемента Твиттера:

data-via="ilyabirman"
Какой акаунт упомянуть в твите. Поменяйте мой на свой :-)

У элемента Телеграма:

data-text="Зацени-ка"
Какой текст отправить вместе со ссылкой в Телеграм.

У элемента Пинтереса:

data-media="i/pinnable.jpg"
Картинка, которая должна попасть в Пинтерес.

Для того, чтобы в Фейсбук попадала конкретная, а не случайная картинка, используйте такой тег внутри элемента <head>:

<meta property="og:image" content="path/to/image" />

Кто использует

Молоко

Барни и Гарден

Гагаджет

Палач

Фактрум

Кредитономика

Джо-блайнд

Бэкстейдж.бай

Револьверлаб

Панкисофт

Арми-докс

Карс-дейли

Авто 43

Город Киров

Про город Рязань

Икона

Бизнес-класс

Свобода слова

Толпа профинансирует

Эспрезо

ФКФВ

Образовательные проекты

Игры дизайнеров

Гильдия

Курсы китайского

Школа психологии Нины Айзман

Счастливая жизнь после расставания

Сайты

Зерулс

Биатлонтайм

Квартирка

Энви.рент

Толкор

Фотографии старого Ярославля

Творчество Андрея Платонова

Карта метро Парижа Кости Коновалова

Велосипедизация Санкт-Петербурга

Немцов мост

Кац предлагает победить

Провинция

Сосединг

Мазе-джорнал

Помидорко

Подбокс

Совотека

Гастрорайд

Метростат

Страницы.ру

Чит-энджин

Аспикс

Покажи данные

Рюмочная

Скрупуло

Кикгудс

Джон Голт

Найсбэйбишоп

Компьютерная помощь в Санкт-Петербурге

Крымский военно-исторический фестиваль

Турскидка.ру

Кулинар

Конференция Творческое лето

Подкаст Паник-саундс

Дизайнерские компании

Дизайн-бюро Артёма Горбунова

Лаборатория данных

Бракодельня

Типоманьякс

Офис проектирования взаимодействия

Постим

Ай-эм

Недизайнерские компании

Центр управления законом

Ненком: альтернативная энергия для дома и бизнеса

Вандер-хостелс: хостелы в Питере

Мопарт: ремонт мототехники

Топрайт: агенство интернет-маркетинга

Уникальные розы

Продукты

Эгея: движок интересных блогов

Чатра: чат для сайтов

Скрапп: коллекционирование дизайнерских решений

Кешер: кожаные портмоне ручной работы

Мой фотопоток: распечатай свой инстаграм

Зона: фильмы онлайн

В кармане: менеджер документов

Пайп: дешёвые звонки

Метромап.фр: схема метро Парижа

Михаил Хвостов

Павел Урусов

Нелли Кам

Евгений Журавлёв

Сергей Яковлев

Георгий Ермаков

Антон Зуев

Павел Шиншин

Юрий Кетов

Андрей Карелин

Эльбрус Нигматуллин

Илья Страйков

Андрей Грузов

И авторы многих блогов на Эгее


Илья Бирман
Дизайнер и автор

Николай Рысь
Мейнтейнер и разработчик

Иван Акулов
Разработчик
Поделиться
Отправить
Запинить