Repository navigation
Expand file tree
/
Copy pathexamples.html
More file actions
205 lines (184 loc) · 10.2 KB
/
Copy pathexamples.html
File metadata and controls
205 lines (184 loc) · 10.2 KB
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>OpenShare Examples | Customizable API wrappers for social platforms</title>
<meta name="author" content="Digital Surgeons" />
<meta name="description" content="Example OpenShare implementations of customizable API wrappers for social networks and platforms. Zero styling, maximum flexibility. No retargeting of your users. Your data is your data." />
<meta property="og:url" content="http://openshare.social" />
<meta property="og:title" content="OpenShare Examples | Customizable API wrappers for social platforms" />
<meta property="og:description" content="Example OpenShare implementations of customizable API wrappers for social networks and platforms. Zero styling, maximum flexibility. No retargeting of your users. Your data is your data." />
<meta property="og:image" content="http://openshare.social/img/img-open-share-large.jpg" />
<meta itemprop="name" content="OpenShare Examples | Customizable API wrappers for social platforms" />
<meta itemprop="description" content="Example OpenShare implementations of customizable API wrappers for social networks and platforms. Zero styling, maximum flexibility. No retargeting of your users. Your data is your data." />
<meta itemprop="image" content="http://openshare.social/img/img-open-share-large.jpg" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@digitalsurgeons" />
<meta name="twitter:site:id" content="18189130" />
<meta name="twitter:title" content="OpenShare Examples | Customizable API wrappers for social platforms" />
<meta name="twitter:description" content="Example OpenShare implementations of customizable API wrappers for social networks and platforms. Zero styling, maximum flexibility. No retargeting of your users. Your data is your data." />
<meta name="twitter:image" content="http://openshare.social/img/img-open-share-small.jpg" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.png" type="image/x-icon" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://file.myfontastic.com/n6vo44Re5QaWo8oCKShBs7/icons.css">
<link rel="stylesheet" href="/bundle.css">
</head>
<body>
<div class="masthead--small">
<div class="masthead__inner">
<header class="header">
<h2 class="header__logo">
<a class="header__logo-link" href="/">
Open<strong class="header__logo-strong">Share</strong>
</a>
</h2>
<nav class="header__nav">
<ul class="header__nav-list">
<li class="header__nav-item">
<a class="header__nav-link" href="/#features">Features</a>
</li>
<li class="header__nav-item">
<a class="header__nav-link" href="/examples">Examples</a>
</li>
<li class="header__nav-item">
<a class="header__nav-link" href="https://github.com/dsurgeons/OpenShare/wiki">Docs</a>
</li>
<li class="header__nav-item">
<a class="header__nav-link" href="https://github.com/dsurgeons/OpenShare">GitHub</a>
</li>
<li class="header__nav-item header__nav-btn">
<a class="header__btn btn" href="/twitter/auth"><span class="fa fa-twitter"></span> Sign in</a>
</li>
<li class="header__nav-item--hide header__nav-avatar">
<a class="avatar" href="#">
<img class="avatar__img" src="" />
</a>
</li>
</ul>
</nav>
<a href="#" class="header__burger"><span class="burger-icon"></span></a>
</header>
<div class="masthead__content">
<div class="masthead__copy">
<h1 class="masthead__heading">
OpenShare Examples
</h1>
<p class="masthead__body">
We support a number of major social networks and platforms and the list is constantly growing.
Twitter, Instagram, SnapChat, WhatsApp, Google Maps, GitHub and many more. Check out the
examples below for inspiration or refer to the docs for full API reference.
</p>
</div>
<div class="masthead__ctas ctas">
<a class="ctas__cta btn" href="https://github.com/dsurgeons/OpenShare/wiki/1.-Getting-Started">Get Started</a>
<a class="ctas__cta btn--dark" href="https://github.com/dsurgeons/OpenShare">
<span class="btn__icon fa fa-github"></span>
GitHub
<div class="star-count">
<span class="star-count__icon fa fa-star"></span>
<span data-open-share-count="github-stars"
data-open-share-count-repo="dsurgeons/OpenShare"
class="star-count__num"></span>
</div>
</a>
</div>
</div>
</div>
</div>
<section class="examples">
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/danhere/pen/yJEmvm/" target="_blank">
Revealing Panels
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="yJEmvm" data-default-tab="result" data-user="danhere" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/chambaz/pen/rLNbEG" target="_blank">
Buttons with counts
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="rLNbEG" data-default-tab="result" data-user="chambaz" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/chambaz/pen/pboqKy" target="_blank">
Pinned left / bottom
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="pboqKy" data-default-tab="result" data-user="chambaz" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/chambaz/pen/XKWOoy" target="_blank">
Mobile stacked
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="XKWOoy" data-default-tab="result" data-user="chambaz" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/chambaz/pen/ezYaZe" target="_blank">
Circles with hover counts
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="ezYaZe" data-default-tab="result" data-user="chambaz" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/jekrb/pen/NrPNgR" target="_blank">
GitHub issues form
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="NrPNgR" data-default-tab="result" data-user="jekrb" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
<article class="example">
<h2 class="example__title">
<a class="example__link" href="http://codepen.io/chambaz/pen/wWByyW" target="_blank">
Animating shapes
<span class="example__icon fa fa-external-link"></span>
</a>
</h2>
<p data-height="255" data-theme-id="0" data-slug-hash="wWByyW" data-default-tab="result" data-user="chambaz" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/chambaz/pen/pboqKy/">OpenShare Example - Left / bottom pinned</a> by Adam Chambers (<a href="http://codepen.io/chambaz">@chambaz</a>) on <a href="http://codepen.io">CodePen</a>.</p>
</article>
</section>
<footer class="footer">
<div class="footer__inner">
<a class="footer__logo" href="/">
Open<strong class="footer__logo-strong">Share</strong>
</a>
<a class="footer__ds" href="http://www.digitalsurgeons.com">
<img src="/img/img-digitalsurgeons.png" alt="Digital Marketing Agency" title="Digital Marketing Agency" />
</a>
</div>
</footer>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<script src="/bundle.js"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-79013162-1', 'auto');
ga('send', 'pageview');
</script>
<script type='text/javascript'>
(function (d, t) {
var bh = d.createElement(t), s = d.getElementsByTagName(t)[0];
bh.type = 'text/javascript';
bh.src = 'https://www.bugherd.com/sidebarv2.js?apikey=b3ncpylny5z62uuiunjmzg';
s.parentNode.insertBefore(bh, s);
})(document, 'script');
</script>
</body>
</html>