vitalif-js
/
social-likes-nojq
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
social-likes-nojq/specs/specs.html

424 lines
25 KiB
HTML
Raw Permalink Normal View History

Fix line endings.
2013-02-05 13:25:43 +04:00
<!DOCTYPE html>
<html lang="ru-RU">
<head>
<meta charset="utf-8">
<title>Social Likes</title>
Build.
2014-01-16 15:08:32 +04:00
<link id="styles_flat" href="../social-likes_flat.css" rel="stylesheet">
Fix skin switcher.
2013-12-25 12:00:46 +04:00
<link id="styles_classic" href="../social-likes_classic.css" rel="stylesheet" disabled>
BIrman skin draft.
2013-12-31 11:46:36 +04:00
<link id="styles_birman" href="../social-likes_birman.css" rel="stylesheet" disabled>
Fix skin switcher.
2013-12-25 12:00:46 +04:00
<script>
(function() {
function updateSkin() {
function el(id) { return document.getElementById(id); }
el('styles_flat').disabled = true;
el('styles_classic').disabled = true;
BIrman skin draft.
2013-12-31 11:46:36 +04:00
el('styles_birman').disabled = true;
Fix skin switcher.
2013-12-25 12:00:46 +04:00
el('styles_' + location.hash.slice(1)).disabled = false;
}
if (location.hash) {
updateSkin();
}
else {
location.hash = '#flat';
}
window.onhashchange = updateSkin;
})();
</script>
Update jQuery versions.
2014-11-19 18:38:00 +03:00
New single button popups.
2014-02-04 10:38:31 +04:00
<!--[if lt IE 9]>
Update jQuery versions.
2014-11-19 18:38:00 +03:00
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
New single button popups.
2014-02-04 10:38:31 +04:00
<![endif]-->
<!--[if gte IE 9]><!-->
Update jQuery versions.
2014-11-19 18:38:00 +03:00
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
New single button popups.
2014-02-04 10:38:31 +04:00
<!--<![endif]-->
Skin switcher on demo page.
2013-12-24 18:04:38 +04:00
<script src="../src/social-likes.js"></script>
Fix line endings.
2013-02-05 13:25:43 +04:00
Flat skin draft.
2013-09-22 20:33:22 +04:00
<style>
body {
Skin switcher on demo page.
2013-12-24 18:04:38 +04:00
margin:0;
padding:20px;
Flat skin draft.
2013-09-22 20:33:22 +04:00
font-family:Arial;
}
BIrman skin draft.
2013-12-31 11:46:36 +04:00
table {
border-collapse:collapse;
}
td {
padding:0;
}
Flat skin draft.
2013-09-22 20:33:22 +04:00
.dark-bg {
margin:0 -20px;
padding:20px;
background:#333;
}
New single button popups.
2014-02-04 10:38:31 +04:00
section {
margin-bottom:10px;
}
Skin switcher on demo page.
2013-12-24 18:04:38 +04:00
.skin-switcher {
margin-top:-20px;
margin-bottom:40px;
}
.skin-switcher a {
display:inline-block;
padding-top:20px;
outline:0;
}
:target {
color:inherit;
text-decoration:none;
font-weight:bold;
cursor:none;
}
BIrman skin draft.
2013-12-31 11:46:36 +04:00
.show-grid .grid {
border-left:1px solid hsla(0,0%,0%,.2);
}
Flat skin draft.
2013-09-22 20:33:22 +04:00
</style>
Fix line endings.
2013-02-05 13:25:43 +04:00
</head>
Skin switcher on demo page.
2013-12-24 18:04:38 +04:00
<body class="skin_classic">
BIrman skin draft.
2013-12-31 11:46:36 +04:00
<div class="skin-switcher">
Skin:
<a id="flat" href="#flat">Flat</a>,
<a id="birman" href="#birman">Birman</a>,
<a id="classic" href="#classic">Classic</a>.
<a id="grid" href="#">Toggle grid</a>
</div>
<div class="grid">
Skin switcher on demo page.
2013-12-24 18:04:38 +04:00
Fix line endings.
2013-02-05 13:25:43 +04:00
<h3>Standard</h3>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<div class="social-likes" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
Use Google+ counter by Yandex. There is one limitation: it will show counter only for the first button set (=== share URL) on a page.
2014-01-14 10:18:07 +04:00
<div class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</div>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
</div>
Fix line endings.
2013-02-05 13:25:43 +04:00
Flat skin draft.
2013-09-22 20:33:22 +04:00
<h3>Standard (dark background)</h3>
<div class="dark-bg">
Service detection refactoring (#61).
2014-04-10 09:51:02 +04:00
<div class="social-likes" data-url="http://mail.ru/">
<div data-service="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div data-service="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div data-service="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div data-service="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div data-service="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
<div data-service="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</div>
<div data-service="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
</div>
Flat skin draft.
2013-09-22 20:33:22 +04:00
</div>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<h3>Standard (light)</h3>
<ul class="social-likes social-likes_light" data-url="http://mail.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
Remove links to old Google+ counter proxy.
2014-01-16 11:22:05 +04:00
<li class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
</ul>
Flat skin draft.
2013-09-22 20:33:22 +04:00
<table>
<tr>
<td style="vertical-align:top">
<h3>Vertical</h3>
<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
Flat skin draft.
2013-09-22 20:33:22 +04:00
</ul>
</td>
<td style="padding-left:40px">
<h3 style="margin-bottom:3px">Vertical (dark background)</h3>
<div class="dark-bg">
<ul class="social-likes social-likes_vertical" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
Flat skin draft.
2013-09-22 20:33:22 +04:00
</ul>
</div>
</td>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<td style="vertical-align:top; padding-left:40px">
<h3>Vertical (light)</h3>
<ul class="social-likes social-likes_vertical social-likes_light" data-url="http://sapegin.github.io/social-likes/" data-title="Свой текст">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</td>
Flat skin draft.
2013-09-22 20:33:22 +04:00
</tr>
</table>
Fix line endings.
2013-02-05 13:25:43 +04:00
<h3>Vertical (no counters)</h3>
Flat skin draft.
2013-09-22 20:33:22 +04:00
<ul class="social-likes social-likes_vertical" data-counters="no">
Fix line endings.
2013-02-05 13:25:43 +04:00
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
</ul>
Ability to show zeroes.
2013-10-29 00:23:10 +04:00
<h3>Vertical (with zeroes)</h3>
<ul class="social-likes social-likes_vertical" data-zeroes="yes">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере">Twitter</li>
</ul>
Fix line endings.
2013-02-05 13:25:43 +04:00
<h3>Single button</h3>
New single button popups.
2014-02-04 10:38:31 +04:00
<section>
<ul class="social-likes social-likes_single" data-url="http://maill.ru/">
BIrman skin draft.
2013-12-31 11:46:36 +04:00
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
New single button popups.
2014-02-04 10:38:31 +04:00
</section>
<section style="padding-left:100px">
<div class="social-likes social-likes_single social-likes_light" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
<div class="plusone" title="Плюсануть в Гугле">Google+</div>
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</div>
</div>
</section>
<section>
BIrman skin draft.
2013-12-31 11:46:36 +04:00
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
</ul>
New single button popups.
2014-02-04 10:38:31 +04:00
</section>
Fix line endings.
2013-02-05 13:25:43 +04:00
Add test case with unexisting domain and zeroes
2015-11-17 11:07:26 +03:00
<h3>Single button (with zeroes)</h3>
<section>
<ul class="social-likes social-likes_single" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
<li class="plusone" title="Плюсануть в Гугле">Google+</li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</li>
</ul>
</section>
<section style="padding-left:100px">
<div class="social-likes social-likes_single social-likes_light" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</div>
<div class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</div>
<div class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</div>
<div class="plusone" title="Плюсануть в Гугле">Google+</div>
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest">Pinterest</div>
</div>
</section>
<section>
<ul class="social-likes social-likes_single social-likes_light social-likes_single-light" data-url="http://mail.ru/" data-single-title="Share me" data-zeroes="yes">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
</ul>
</section>
Readme and demo.html for mode 'Icons only'
2013-08-22 18:02:31 +04:00
<h3>Icons only</h3>
<ul class="social-likes social-likes_notext" data-url="http://maps.mail.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
Readme and demo.html for mode 'Icons only'
2013-08-22 18:02:31 +04:00
</ul>
Add test case with unexisting domain and zeroes
2015-11-17 11:07:26 +03:00
</section>
<h3>Icons only (with zeroes)</h3>
<ul class="social-likes social-likes_notext" data-url="http://maill_TRUE_UNEXISTING_DOMAIN_NO_SHARES_I_DARE_YOU.ru/" data-zeroes="yes">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
Readme and demo.html for mode 'Icons only'
2013-08-22 18:02:31 +04:00
<h3>Icons only (no counters)</h3>
<ul class="social-likes social-likes_notext" data-url="http://mail.ru/" data-counters="no">
Update deps, fix bower.json filename.
2013-06-17 11:43:01 +04:00
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
Readme and demo.html for mode 'Icons only'
2013-08-22 18:02:31 +04:00
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
Update deps, fix bower.json filename.
2013-06-17 11:43:01 +04:00
<li class="plusone" title="Плюсануть в Гугле"></li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Icons only (light)</h3>
<ul class="social-likes social-likes_notext social-likes_light" data-url="http://maps.mail.ru/">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Icons only (light, no counters)</h3>
<ul class="social-likes social-likes_notext social-likes_light" data-url="http://mail.ru/" data-counters="no">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке"></li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" data-url="http://github.com" data-title="Не #mail_ru" title="Опубликовать ссылку в Твиттере"></li>
<li class="mailru" title="Опубликовать ссылку в Моём мире"></li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте"></li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках"></li>
<li class="plusone" title="Плюсануть в Гугле"></li>
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Pinterest"></li>
</ul>
<h3>Custom font-size</h3>
<ul class="social-likes" data-url="http://mail.ru/" style="font-size:30px">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
<li class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</li>
<li class="mailru" title="Опубликовать ссылку в Моём мире">Мой мир</li>
<li class="vkontakte" title="Опубликовать ссылку во Вконтакте">Вконтакте</li>
<li class="odnoklassniki" title="Опубликовать ссылку в Одноклассниках">Одноклассники</li>
Remove links to old Google+ counter proxy.
2014-01-16 11:22:05 +04:00
<li class="plusone" title="Опубликовать ссылку в Гугл-плюсе">Google+</li>
Flat skin draft. 1. No pixels. 2. SVG icons → web fonts. 3. Light version. 4. ul>li → div>div. 5. JS refactoring.
2013-10-29 00:02:23 +04:00
<li class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</li>
Update deps, fix bower.json filename.
2013-06-17 11:43:01 +04:00
</ul>
Fix line endings.
2013-02-05 13:25:43 +04:00
<h3>Old initialization HTML</h3>
<ul class="social-likes">
<li class="facebook"><a href="#" title="Опубликовать ссылку на Фейсбуке">Facebook</a></li>
<li class="twitter"><a href="#" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</a></li>
</ul>
Delay counters initialization because it prevented counters to show up after reinitialization with the same URL.
2014-11-20 18:32:02 +03:00
<h3>Reinitialization</h3>
<div id="social-likes-re">
<div class="social-likes" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
</div>
</div>
<p><a href="#" id="social-likes-reinit">Reinit</a></p>
<script>
var slre = $('#social-likes-re');
var slre_html = slre.html();
$('#social-likes-reinit').click(function() {
slre.html(slre_html);
slre.find('.social-likes').socialLikes();
return false;
});
</script>
Improve manual initialization.
2013-04-17 17:11:33 +04:00
<h3>Manual initialization</h3>
Dynamic change of Pinterest image.
2014-02-04 13:03:37 +04:00
<div id="social-likes-manual" data-url="http://mail.ru/">
<div class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</div>
<div class="twitter" data-via="sapegin" data-related="DessiTeckel:Моя такса" title="Опубликовать ссылку в Твиттере">Twitter</div>
<div class="pinterest" data-media="http://s3-ec.buzzfed.com/static/enhanced/webdr02/2013/8/20/11/anigif_enhanced-buzz-31256-1377012172-9.gif" title="Опубликовать ссылку в Пинтересте">Pinterest</div>
</div>
forceUpdate option.
2014-02-12 16:22:30 +04:00
<p><a href="#" id="social-likes-update">Change URL</a>, <a href="#" id="social-likes-update-force">Force update</a></p>
Improve manual initialization.
2013-04-17 17:11:33 +04:00
<script>
Global counter event.
2013-08-08 11:00:53 +04:00
var sl = $('#social-likes-manual');
sl.on('counter.social-likes', function(event, service, number) {
console.log('Counter', service, number);
});
popup_opened and popup_closed events.
2014-02-12 16:40:51 +04:00
sl.on('popup_opened.social-likes', function(event, service, win) {
console.log('Popup opened', service, win);
});
sl.on('popup_closed.social-likes', function(event, service) {
console.log('Popup closed', service);
$(event.currentTarget).socialLikes({forceUpdate: true}); // Update counters
});
Global counter event.
2013-08-08 11:00:53 +04:00
sl.socialLikes();
Ability to dynamically update URL.
2014-02-04 12:50:52 +04:00
$('#social-likes-update').click(function() {
sl.socialLikes({
url: 'https://github.com/sapegin/grunt-webfont/',
Dynamic change of Pinterest image.
2014-02-04 13:03:37 +04:00
title: 'SVG to webfont converter for Grunt',
data: {
media: 'http://birdwatcher.ru/i/userpic.jpg'
}
Ability to dynamically update URL.
2014-02-04 12:50:52 +04:00
});
return false;
});
forceUpdate option.
2014-02-12 16:22:30 +04:00
$('#social-likes-update-force').click(function() {
sl.socialLikes({forceUpdate: true});
return false;
});
JavaScript options
2013-11-01 19:00:21 +04:00
</script>
<h3>Manual initialization with JavaScript options</h3>
<ul id="social-likes-manual-options">
<li class="facebook" title="Опубликовать ссылку на Фейсбуке">Facebook</li>
</ul>
Add test case with unexisting domain and zeroes
2015-11-17 11:07:26 +03:00
JavaScript options
2013-11-01 19:00:21 +04:00
<script>
$('#social-likes-manual-options').socialLikes({
url: 'https://github.com/sapegin/social-likes/',
title: 'Beautiful “like” buttons with counters for popular social networks',
JavaScript options: yes/true fixes
2013-12-05 17:08:30 +04:00
counters: true,
zeroes: false
JavaScript options
2013-11-01 19:00:21 +04:00
});
Improve manual initialization.
2013-04-17 17:11:33 +04:00
</script>
Fix line endings.
2013-02-05 13:25:43 +04:00
<h3>User button &amp; custom count</h3>
<script>
var socialLikesButtons = {
surfingbird: {
clickUrl: 'http://surfingbird.ru/share?url={url}',
//popupUrl: 'http://surfingbird.ru/share?url={url}',
pupupWidth: 650,
popupHeight: 500
}
};
</script>
<style>
.social-likes__button_surfingbird {
background: #f2f3f5;
color: #596e7e;
border-color: #ced5e2;
}
.social-likes__icon_surfingbird {
background: url(http://surfingbird.ru/img/share-icon.png) no-repeat 2px 3px;
}
</style>
Fix buttons with links.
2014-01-16 11:20:18 +04:00
<div class="social-likes">
<div class="surfingbird" data-counter="666">Surf</li>
</div>
BIrman skin draft.
2013-12-31 11:46:36 +04:00
</div>
<script>
if ('localStorage' in window) {
$('body').toggleClass('show-grid', localStorage.getItem('show-grid') === 'true');
$('#grid').click(function(e) {
$('body').toggleClass('show-grid');
localStorage.setItem('show-grid', $('body').hasClass('show-grid'));
e.preventDefault();
});
}
</script>
Fix line endings.
2013-02-05 13:25:43 +04:00
</body>
</html>