This repository has been archived by the owner on Dec 7, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
119 lines (116 loc) · 8.65 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Examples of Meddelare usage -- fully customizable, open source, privacy aware social share buttons with counters! meddelare.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://meddelare.com/resources/font/font.css" />
<link rel="stylesheet" href="https://meddelare.com/resources/style/main.css">
<link rel="stylesheet" href="resources/style/main.css">
<!-- See https://meddelare.com/meddelare-examples/examples/button for the rest of this example -->
<link rel="stylesheet" href="examples/button/meddelare.css">
<link rel="icon" type="image/png" href="https://meddelare.com/resources/image/icon/icon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="https://meddelare.com/resources/image/icon/icon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="https://meddelare.com/resources/image/icon/icon-64x64.png" sizes="64x64" />
<link rel="icon" type="image/png" href="https://meddelare.com/resources/image/icon/icon-96x96.png" sizes="96x96" />
<link rel="image_src" href="https://meddelare.com/resources/image/icon/icon-256x256.png" />
<link rel="canonical" href="https://meddelare.com/meddelare-examples/" />
<link rel="canonical-domain" href="https://meddelare.com/" />
<meta name="title" content="Examples of Meddelare usage -- fully customizable, open source, privacy aware social share buttons with counters! meddelare.com" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Examples of Meddelare usage -- fully customizable, open source, privacy aware social share buttons with counters! meddelare.com" />
<meta name="twitter:description" content="Example of using Meddelare in the front-end of you website -- free, open source! Custom social share counters with your own hosted solution; only a single API request and minimal or zero assets to display the counters." />
<meta name="twitter:site" content="@meddelare" />
<meta name="twitter:creator" content="@meddelare" />
<meta name="twitter:image" content="https://meddelare.com/resources/image/icon/icon-256x256.png" />
<meta name="twitter:image:width" content="256" />
<meta name="twitter:image:height" content="256" />
<meta name="twitter:domain" content="meddelare.com" />
<meta property="og:site_name" content="Examples of Meddelare usage -- fully customizable, open source, privacy aware social share buttons with counters! meddelare.com" />
<meta property="og:url" content="https://meddelare.com/meddelare-examples/" />
<meta property="og:image" content="https://meddelare.com/resources/image/icon/icon-256x256.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:title" content="Examples of Meddelare usage -- fully customizable, open source, privacy aware social share buttons with counters! meddelare.com" />
<meta name="description" content="Example of using Meddelare in the front-end of you website -- free, open source! Custom social share counters with your own hosted solution; only a single API request and minimal or zero assets to display the counters." />
</head>
<body>
<header>
<h1><a href="https://meddelare.com/">Meddelare</a></h1>
<p>
Install <strong>custom social share counters</strong> on your website with your <strong>own hosted solution</strong>, which only makes <strong>a single API request</strong> and loads <strong>minimal or zero assets</strong> to display the counters.
</p>
<ul class="inline small">
<li><a href="https://twitter.com/meddelare">@meddelare on Twitter</a></li>
<li><a href="https://github.com/meddelare">@meddelare on Github</a></li>
<li><a href="https://npmjs.org/~meddelare">@meddelare on NPM</a></li>
</ul>
</header>
<section class="shutdown">
⚠️ <strong>The Meddelare project <a href="https://github.com/meddelare/meddelare-superproject/issues/8">has been shut down</a></strong> as of <nobr>2020-12-07</nobr>. No updates will be made and the source code will possibly be deleted in the future. Please download what you need as soon as possible.
</section>
<aside>
<div id="live-example-notice">Live demo!</div>
<!-- See https://meddelare.com/meddelare-examples/examples/button for the rest of this example -->
<div class="meddelare-container" data-meddelare-url="https://meddelare.com/">
<a href="https://twitter.com/intent/tweet?text=I+love+these+social+sharing+buttons!&url=https%3A%2F%2Fmeddelare.com%2F&via=meddelare&related=thomasdav_is,joelpurra&hashtags=javascript,UX,privacy,SMM" target="_blank" class="meddelare-network" data-meddelare-network="twitter" data-count="—">
<span class="meddelare-icon"></span>
</a>
<a href="https://www.facebook.com/share.php?u=https%3A%2F%2Fmeddelare.com%2F" target="_blank" class="meddelare-network" data-meddelare-network="facebook" data-count="—">
<span class="meddelare-icon"></span>
</a>
<a href="https://plus.google.com/share?url=https%3A%2F%2Fmeddelare.com%2F" target="_blank" class="meddelare-network" data-meddelare-network="googleplus" data-count="—">
<span class="meddelare-icon"></span>
</a>
</div>
</aside>
<main>
<article>
<h2>We would love to feature your widget design!</h2>
<p>
Submit your design in a <a href="https://github.com/meddelare/meddelare-examples">pull request to meddelare-examples</a> and we will add it to our list.
</p>
<div class="two columns">
<div class="left column">
<h2>Basic examples</h2>
<ul>
<li>
<a href="https://d12cncu17l9pr5.cloudfront.net/?networks=facebook,twitter,googleplus&url=https%3A%2F%2Fmeddelare.com%2F">JSON</a>
</li>
<li>
<a href="https://d12cncu17l9pr5.cloudfront.net/?networks=facebook,twitter,googleplus&url=https%3A%2F%2Fmeddelare.com%2F&callback=thisIsAnExample">JSONP</a>
</li>
<li>
<a href="examples/text/">Text</a> (<a href="https://github.com/meddelare/meddelare-examples/tree/master/examples/text">source</a>)
</li>
</ul>
</div>
<div class="right column">
<h2>Pretty examples</h2>
<ul id="pretty-examples">
<li>
<a href="examples/button/"><img src="examples/button/screenshot.png" /></a><a href="examples/button/">Button</a> (<a href="https://github.com/meddelare/meddelare-examples/tree/master/examples/button">source</a>), <a href="examples/button-multiple/">Multiple urls</a> (<a href="https://github.com/meddelare/meddelare-examples/tree/master/examples/button-multiple">source</a>)
</li>
<li>
<a href="examples/button-no-image/"><img src="examples/button-no-image/screenshot.png" /></a><a href="examples/button-no-image/">Button (no image)</a> (<a href="https://github.com/meddelare/meddelare-examples/tree/master/examples/button-no-image">source</a>)
</li>
</ul>
</div>
</article>
</main>
<footer>
<ul class="inline">
<li><a href="https://twitter.com/meddelare">@meddelare on Twitter</a></li>
<li><a href="https://github.com/meddelare">@meddelare on Github</a></li>
<li><a href="https://npmjs.org/~meddelare">@meddelare on NPM</a></li>
</ul>
<p>
<img src="https://meddelare.com/resources/image/icon/icon-64x64.png" /> <a href="https://meddelare.com/">Meddelare</a> Copyright © 2015 Team <a href="https://meddelare.com/">Meddelare</a> All rights reserved. <a href="https://github.com/meddelare">Released</a> under the <a href="https://opensource.org/licenses/MIT">MIT license</a>.
</p>
</footer>
<!-- See https://meddelare.com/meddelare-examples/examples/button for the rest of this example -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="examples/button/meddelare.js"></script>
</body>
</html>