Кнопка Гитхаба в Лайкли

Лайкли — отличные социальные кнопки от Ильи Бирмана. Но туда забыли положить гитхаб, давайте исправим.

Сперва likely.js нужно привести в читаемый вид, например, с помощью jsbeautifier.org. Найдите поиском d = {, в эту переменную добавляем счётчик гитхаба:

github: {
   svgi: '8.05236364,0.220606061 C3.69163636,0.220606061 0.155151515,3.75660606 0.155151515,8.11878788 C0.155151515,11.6082424 2.41793939,14.5682424 5.55636364,15.6126061 C5.95151515,15.6853333 6.09551515,15.4414545 6.09551515,15.232 C6.09551515,15.0448485 6.08872727,14.5478788 6.08484848,13.8889697 C3.888,14.3660606 3.42448485,12.8300606 3.42448485,12.8300606 C3.06521212,11.9175758 2.54739394,11.6746667 2.54739394,11.6746667 C1.83030303,11.1849697 2.60169697,11.1946667 2.60169697,11.1946667 C3.39442424,11.2504242 3.81139394,12.0087273 3.81139394,12.0087273 C4.51587879,13.2155152 5.66012121,12.8669091 6.11006061,12.6647273 C6.18181818,12.1546667 6.38593939,11.8065455 6.61139394,11.6092121 C4.85769697,11.4099394 3.01381818,10.7321212 3.01381818,7.70569697 C3.01381818,6.84363636 3.32169697,6.13818182 3.82690909,5.58642424 C3.74545455,5.38666667 3.47442424,4.58327273 3.90448485,3.49624242 C3.90448485,3.49624242 4.56727273,3.28387879 6.07612121,4.30593939 C6.70593939,4.13042424 7.38181818,4.04315152 8.05333333,4.03975758 C8.72436364,4.04315152 9.39975758,4.13042424 10.0305455,4.30593939 C11.5384242,3.28387879 12.2002424,3.49624242 12.2002424,3.49624242 C12.6312727,4.58327273 12.3602424,5.38666667 12.2792727,5.58642424 C12.7854545,6.13818182 13.0909091,6.84363636 13.0909091,7.70569697 C13.0909091,10.7398788 11.2441212,11.4075152 9.48509091,11.6029091 C9.76824242,11.8467879 10.0208485,12.3287273 10.0208485,13.065697 C10.0208485,14.1212121 10.0111515,14.9730909 10.0111515,15.232 C10.0111515,15.4433939 10.153697,15.6892121 10.5541818,15.6121212 C13.6901818,14.5653333 15.9510303,11.6072727 15.9510303,8.11878788 C15.9510303,3.75660606 12.4145455,0.220606061 8.05236364,0.220606061',
   counterUrl: 'https://api.github.com/repos/dezonik/Typograph?callback=?',
   convertNumber: function(data) {
      return data.data.watchers_count;
   },
   clickUrl: 'https://github.com/dezonik/Typograph'
}

Не забудьте поменять обе ссылки на свой репозиторий. В likely.css добавьте свойства для ховера.

.likely__widget_github:hover,
.likely__widget_github:active,
.likely__widget_github:focus {
background: rgba(224, 224, 224, 1);
border: 1px solid rgba(224, 224, 224, 1);
}

В своей хтмлке просто добавьте новый див с гитхабом.

<div class='likely'>
  <div class='facebook'>Share</div>
  <div class='vkontakte'>Share</div>
  <div class='telegram'>Send</div>
  <div class='twitter'>Tweet</div>
  <div class='github'>Watch</div>
</div>

Это всё! Вживую кнопку можно пощупать на странице Типографа.

upd

Неактуально для новой версии.

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