This repository has been archived by the owner on Apr 21, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (87 loc) · 5.66 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<title>Demo: Lightning-Fast Social Media Buttons with Counters</title>
<meta name="description" content="Lightning-fast Social Media Buttons with Counters"/>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700,800,400italic' rel='stylesheet' type='text/css'>
<link href="dist/css/main.min.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Demo: Lightning-Fast Social Media Buttons with Counters" />
<meta property="og:description" content="A demo page for a tutorial about creating fast social media buttons with counters with just 1 request and 3kB of code" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://xfiveco.github.io/fast-social-media-buttons/" />
<meta property="og:image" content="https://raw.githubusercontent.com/xfiveco/fast-social-media-buttons/gh-pages/dist/img/fast-social-media-buttons.jpg" />
<meta property="og:url" content="http://xfiveco.github.io/fast-social-media-buttons/" />
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="c-icon--twitter" viewBox="0 0 100 81.22">
<title>Twitter</title>
<path d="M89.72,29.63c0.06,0.89.06,1.78,0.06,2.67,0,27.09-20.62,58.31-58.31,58.31A57.92,57.92,0,0,1,0,81.41a42.52,42.52,0,0,0,4.95.25,41,41,0,0,0,25.44-8.76A20.53,20.53,0,0,1,11.23,58.69,25.77,25.77,0,0,0,15.1,59a21.7,21.7,0,0,0,5.39-.7A20.5,20.5,0,0,1,4.06,38.2V37.94a20.66,20.66,0,0,0,9.26,2.6A20.53,20.53,0,0,1,7,13.13,58.26,58.26,0,0,0,49.24,34.58a23.19,23.19,0,0,1-.51-4.69,20.51,20.51,0,0,1,35.47-14,40.35,40.35,0,0,0,13-4.95,20.43,20.43,0,0,1-9,11.29A41.05,41.05,0,0,0,100,19,44,44,0,0,1,89.72,29.63Z" transform="translate(0 -9.39)" />
</symbol>
<symbol id="c-icon--facebook" viewBox="0 0 51.92 100">
<title>Facebook</title>
<path d="M76,16.59H66.53c-7.39,0-8.77,3.55-8.77,8.65V36.6H75.36L73,54.39H57.75V100H39.36V54.39H24V36.6H39.36V23.5C39.36,8.29,48.68,0,62.26,0A117.7,117.7,0,0,1,76,.72V16.59Z" transform="translate(-24.04)" />
</symbol>
<symbol id="c-icon--linkedin" viewBox="0 0 100 95.57">
<title>LinkedIn</title>
<path d="M12,22.26H11.85C4.62,22.26,0,17.32,0,11.13S4.82,0,12.11,0,24,4.82,24.09,11.13,19.47,22.26,12,22.26ZM22.72,95.57H1.24V31.05H22.72V95.57Zm77.28,0H78.58V61.07c0-8.66-3.12-14.58-10.87-14.58-5.92,0-9.44,4-11,7.81A16.17,16.17,0,0,0,56,59.57v36H34.57c0.26-58.46,0-64.52,0-64.52H56v9.38H55.86c2.8-4.43,7.88-10.87,19.47-10.87,14.13,0,24.67,9.25,24.67,29v37Z" />
</symbol>
<symbol id="c-icon--google" viewBox="0 0 97.98 100">
<title>Google</title>
<path class="a" d="M98.21,42.84A44.3,44.3,0,0,1,99,51.17C99,79.69,79.85,100,51,100A50,50,0,0,1,51,0,48.09,48.09,0,0,1,84.54,13.09L70.93,26.17A28.11,28.11,0,0,0,51,18.42C34,18.42,20,32.55,20,50S34,81.57,51,81.57C70.8,81.57,78.22,67.38,79.39,60H51V42.84h47.2Z" transform="translate(-1.01)"/>
</symbol>
<symbol id="c-svg--bolt" viewBox="0 0 300 624.26">
<title>Bolt</title>
<path d="M186.4 0L80.49 270.34l149.37.12L0 624.26l300-384.1H140.04L282.24.15 186.4 0z"/>
</symbol>
</defs>
</svg>
<div class="c-container">
<h1>Lightning-Fast Social Media Buttons with Counters</h1>
<img src="dist/img/bolt.svg" alt="" class="c-bolt">
<div class="c-strike-through">
<ul class="o-list-bare c-share-buttons js-share-buttons">
<li>
<a href="https://twitter.com/share?url=#url" class="c-share-buttons__button" title="Share on Twitter" target="_blank">
<svg class="c-share-buttons__icon">
<use xlink:href="#c-icon--twitter"></use>
</svg>
</a>
</li>
<li>
<a href="http://www.facebook.com/sharer/sharer.php?u=#url" class="c-share-buttons__button" title="Share on Facebook" target="_blank">
<svg class="c-share-buttons__icon">
<use xlink:href="#c-icon--facebook"></use>
</svg>
<span class="c-share-buttons__counter js-fb-count"></span>
</a>
</li>
<li>
<a href="https://www.linkedin.com/shareArticle?mini=true&url=#url" class="c-share-buttons__button" title="Share on LinkedIn" target="_blank">
<svg class="c-share-buttons__icon">
<use xlink:href="#c-icon--linkedin"></use>
</svg>
<span class="c-share-buttons__counter js-linkedin-count"></span>
</a>
</li>
<li>
<a href="https://plus.google.com/share?url=#url" class="c-share-buttons__button" title="Share on Google+" target="_blank">
<svg class="c-share-buttons__icon">
<use xlink:href="#c-icon--google"></use>
</svg>
<span class="c-share-buttons__counter js-googleplus-count"></span>
</a>
</li>
</ul>
</div>
<p>This is a demo page for a tutorial about creating a <a href="https://www.xfive.co/blog/lightning-fast-social-media-buttons-with-counters/" target="_blank">fast social media buttons with counters</a> with just <strong>1 request</strong> and <strong>3kB of code</strong>. Check out its <a href="https://github.com/xfiveco/fast-social-media-buttons/">GitHub repository</a>.</p>
<p>Please, share this demo page so it better demonstrates how counters work ;) Thanks.</p>
<p class="c-footer"><a href="https://www.xfive.co/">Xfive.co</a> - Developers who care</p>
</div>
<!-- / .c-container -->
<script src="dist/js/bundle.js" async></script>
</body>
</html>