-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
executable file
·348 lines (346 loc) · 28.3 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
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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
<!doctype html>
<!-- TODO: https://github.com/stefanbohacek/SimpleSharingButtons/issues/13
<html itemscope itemtype="http://schema.org/WebApplication" ng-app="app" ng-controller="AppCtrl" manifest="/cache.manifest">
-->
<html itemscope itemtype="http://schema.org/WebApplication" ng-app="app" ng-controller="AppCtrl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Share to Facebook, Twitter, and other social networks using simple HTML buttons" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Simple Sharing Buttons Generator by @stefanbohacek</title>
<meta property="og:title" content="Simple Sharing Buttons Generator" />
<meta property="og:description" content="Share to Facebook, Twitter, and other social networks using simple HTML buttons" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://simplesharingbuttons.com/" />
<meta property="og:image" content="http://simplesharingbuttons.com/images/preview-2.9.png" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@stefanbohacek">
<meta name="twitter:title" content="Simple Sharing Buttons Generator">
<meta name="twitter:description" content="Share to Facebook, Twitter, and other social networks using simple HTML buttons">
<meta name="twitter:image:src" content="http://simplesharingbuttons.com/images/preview-2.9.png">
<meta name="twitter:domain" content="http://simplesharingbuttons.com/">
<meta itemprop="name" content="Simple Sharing Buttons Generator">
<meta itemprop="description" content="Create simple HTML sharing buttons to share your web content on Facebook, Twitter, and other social networks.
">
<meta itemprop="image" content="http://simplesharingbuttons.com/images/preview-2.9.png">
<link type="text/plain" rel="author" href="http://stefanbohacek.com/humans.txt" />
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/main.2.9.7.min.css">
<link href='https://fonts.googleapis.com/css?family=Merriweather+Sans|Fjalla+One' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Sue+Ellen+Francisco&text=Tryit,sharethispage:' rel='stylesheet' type='text/css'>
<link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="images/favicon-144.png">
<link rel="shortcut icon" href="images/favicon.ico"/>
<link rel="apple-touch-icon" href="images/favicon-152.png">
<link rel="apple-touch-icon-precomposed" href="images/favicon-152.png">
<link rel="icon" href="images/favicon-32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicon-64.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="https://simplesharingbuttons.tumblr.com/rss" />
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<nav class="shifted-reverse" role="navigation">
<ul class="pull-left">
<li><a title="v2.9 by @stefanbohacek" goto="intro" href="#intro" onclick="return false;"><span class="label site-logo">SSBG</span></a></li>
<li><a goto="style" href="#style" onclick="return false;"><i class="fa fa-list"></i><span class="label">Style</span></a></li>
<li><a goto="networks" href="#networks" onclick="return false;"><i class="fa fa-cog"></i><span class="label">Networks</span></a></li>
<li><a goto="info" href="#info" onclick="return false;"><i class="fa fa-info-circle"></i><span class="label">Info</span></a></li>
<li><a goto="preview" href="#preview" onclick="return false;"><i class="fa fa-eye"></i><span class="label">Preview</span></a></li>
<li><a goto="code" href="#code" onclick="return false;"><i class="fa fa-code"></i><span class="label">Code</span></a></li>
</ul>
<ul class="pull-right">
<li><a href="#about" goto="about" title="Learn more"><i class="fa fa-question-circle"></i></a></li>
<li><a nightmode href="#" title="Night mode"><i class="far fa-moon"></i></a></li>
<li>|</li>
<li><a href="mailto:[email protected]?subject=Simple Sharing Buttons Generator" target="_blank" title="Get in touch"><i class="fa fa-envelope"></i></a></li>
</ul>
</nav>
<section id="intro" class="big">
<div id="intro-content">
<header>
<h1 class="shifted">Simple Sharing Buttons Generator</h1>
<p class="try-it shifted-reverse">Try it, share this page:</p>
<ul class="share-buttons share-buttons-margin">
<li class="shifted-icons"><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsimplesharingbuttons.com%2F" target="_blank"><i class="fab fa-facebook-square fa-2x"></i></a></li>
<li class="shifted-icons"><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fsimplesharingbuttons.com%2F&text=Simple%20Sharing%20Buttons%20Generator: http%3A%2F%2Fsimplesharingbuttons.com%2F&via=stefanbohacek" target="_blank" title="Tweet"><i class="fab fa-twitter-square fa-2x"></i></a></li>
<li class="shifted-icons"><a href="http://www.tumblr.com/share?v=3&u=http%3A%2F%2Fsimplesharingbuttons.com%2F&t=Simple%20Sharing%20Buttons%20Generator&s=" target="_blank" title="Post to Tumblr"><i class="fab fa-tumblr-square fa-2x"></i></a></li>
<li class="shifted-icons"><a href="https://getpocket.com/save?url=https%3A%2F%2Fsimplesharingbuttons.com&title=Simple%20Sharing%20Buttons%20Generator" target="_blank" title="Add to Pocket"><i class="fab fab fa-get-pocket fa-2x" aria-hidden="true"></i><span class="sr-only">Add to Pocket</span></a></li></a></li>
<li class="shifted-icons"><a href="http://pinterest.com/pin/create/button/?url=http%3A%2F%2Fsimplesharingbuttons.com%2F&media=http://simplesharingbuttons.com/images/preview.png&description=Share%20to%20Facebook%2C%20Twitter%2C%20Google%2B%20and%20other%20social%20networks%20using%20simple%20HTML%20buttons" target="_blank" title="Pin it"><i class="fab fa-pinterest-square fa-2x"></i></a></li>
<li class="shifted-icons"><a href="http://www.reddit.com/submit?url=http%3A%2F%2Fsimplesharingbuttons.com%2F&title=Simple%20Sharing%20Buttons%20Generator" target="_blank" title="Submit to Reddit"><i class="fab fa-reddit-square fa-2x"></i></a></li>
<li class="shifted-icons"><a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fsimplesharingbuttons.com%2F&title=Simple%20Sharing%20Buttons%20Generator&summary=Share%20to%20Facebook%2C%20Twitter%2C%20Google%2B%20and%20other%20social%20networks%20using%20simple%20HTML%20buttons&source=http%3A%2F%2Fsimplesharingbuttons.com%2F" target="_blank" title="Share on LinkedIn"><i class="fab fa-linkedin fa-2x"></i></a></li>
<li class="shifted-icons"><a href="http://wordpress.com/press-this.php?u=http%3A%2F%2Fsimplesharingbuttons.com%2F&t=Simple%20Sharing%20Buttons%20Generator&s=Share%20to%20Facebook%2C%20Twitter%2C%20Google%2B%20and%20other%20social%20networks%20using%20simple%20HTML%20buttons&i=http://simplesharingbuttons.com/images/preview.png" target="_blank" title="Publish on WordPress"><i class="fab fa-wordpress fa-2x"></i></a></li>
<li class="shifted-icons"><a href="mailto:?subject=Simple%20Sharing%20Buttons%20Generator&body=Share%20to%20Facebook%2C%20Twitter%2C%20Google%2B%20and%20other%20social%20networks%20using%20simple%20HTML%20buttons: http%3A%2F%2Fsimplesharingbuttons.com%2F" target="_blank" title="Email"><i class="fas fa-envelope-square fa-2x"></i></a></li>
</ul>
<div class="intro" itemprop="description">
<p class="shifted">Create <strong>light-weight</strong>, <strong>mobile-friendly</strong> sharing buttons for Facebook, Twitter, and other social networks -- it's all <strong>completely free</strong>!</p>
<p class="shifted"><a href="#about" goto="about">Learn more</a> or <a href="#style" goto="style">create your buttons</a>. And here is <a href="https://stefanbohacek.com/project/fediverse-sharing-button/?ref=simplesharingbuttons.com">a fediverse version</a>.</p>
</div>
<a class="ph-link" style="position:absolute;bottom:0;right:0;" href="https://www.producthunt.com/products/simple-sharing-buttons-generator?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-simple-sharing-buttons-generator" target="_blank" rel="noopener"><img loading="lazy" src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=22623&theme=light&period=daily" alt="Simple Sharing Buttons Generator - Easily create mobile-friendly, static sharing buttons | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54"></a>
</header>
</div>
</section>
<section id="style" class="big">
<div id="section-content">
<h2>Choose your style</h2>
<form id="form-style" class="radio">
<input type="radio" id="style_social_flat_rounded_rects_svg" name="style" ng-model="style" value="social_flat_rounded_rects_svg">
<label class="block-label" updatestyle for="style_social_flat_rounded_rects_svg">Social Flat Rounded Rects <sup><strong>SVG</strong></sup>
<img title="Preview of Flat Web Icon Set - Color" src="images/previews/social-flat-rounded-rects-svg.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_color" name="style" ng-model="style" value="color" checked="checked">
<label class="block-label" updatestyle for="style_color">Flat Web Icon Set - Color
<img title="Preview of Flat Web Icon Set - Color" src="images/previews/flat-web-icon-set-color-alt.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_black" name="style" ng-model="style" value="black">
<label class="block-label" updatestyle for="style_black">Flat Web Icon Set - Black
<img title="Preview of Flat Web Icon Set - Black" src="images/previews/flat-web-icon-set-black-alt.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_inverted" name="style" ng-model="style" value="inverted">
<label class="block-label" updatestyle for="style_inverted">Flat Web Icon Set - Inverted
<img title="Preview of Flat Web Icon Set - Inverted" src="images/previews/flat-web-icon-set-inverted-alt.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_font_awesome" name="style" ng-model="style" value="font_awesome">
<label class="block-label" updatestyle for="style_font_awesome">Font Awesome (Web Fonts)<sup help class="help" title="Pinboard is not supported by Font Awesome, no code will be generated. You can apply your own CSS, below is an example style."> ? </sup>
<div class="fa-preview" title="Preview of Font Awesome">
<i class="fab fa-facebook-square fa-2x"></i>
<i class="fab fa-twitter-square fa-2x"></i>
<i class="fab fa-tumblr-square fa-2x"></i>
<i class="fab fa-pinterest-square fa-2x"></i>
<i class="fab fa-reddit-square fa-2x"></i>
<i class="fab fa-linkedin fa-2x"></i>
<i class="fab fa-wordpress fa-2x"></i>
<i class="fas fa-envelope-square fa-2x"></i>
</div>
</label>
<input type="radio" id="style_simple_icons" name="style" ng-model="style" value="simple_icons">
<label class="block-label" updatestyle for="style_simple_icons">Simple Icons
<img title="Preview of Simple Icons" src="images/previews/simple-icons-alt.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_simple_icons_black" name="style" ng-model="style" value="simple_icons_black">
<label class="block-label" updatestyle for="style_simple_icons_black">Simple Icons - Black
<img title="Preview of Simple Icons - Black" src="images/previews/simple-icons-black-alt.png" class="icon-style img-responsive" />
</label>
<input type="radio" id="style_none" name="style" ng-model="style" value="none">
<label class="block-label" updatestyle for="style_none" title="Names of networks will be used instead of icons. You can apply your own CSS styles.">Only text<sup help class="help" title="Names of networks will be used instead of icons. You can apply your own CSS styles."> ? </sup></label>
</form>
<a class="next" href="#networks" goto="networks"><i class="far fa-hand-point-right"></i> Next</a>
</div>
</section>
<section id="networks" class="big">
<div id="section-content">
<h2>Choose your <span selectallnetworks title="Click to choose all networks">networks</span></h2>
<p class="instructions" ng-show="show_fa_instructions"><strong>Note:</strong> Pinboard is not supported by Font Awesome, no code will be generated.</p>
<form id="form-networks" class="checkboxes">
<div class="one-third">
<input type="checkbox" id="data_network_facebook" name="data_network" ng-model="facebook" value="facebook">
<label for="data_network_facebook">Facebook</label><br/>
<input type="checkbox" id="data_network_twitter" name="data_network" ng-model="twitter" value="twitter">
<label for="data_network_twitter">Twitter</label><br/>
<input type="checkbox" id="data_network_tumblr" name="data_network" ng-model="tumblr" value="tumblr">
<label for="data_network_tumblr">Tumblr</label><br/>
<input type="checkbox" id="data_network_pinterest" name="data_network" ng-model="pinterest" value="pinterest">
<label for="data_network_pinterest">Pinterest</label><br/>
</div>
<div class="one-third">
<input type="checkbox" id="data_network_pocket" name="data_network" ng-model="pocket" value="pocket">
<label for="data_network_pocket">Pocket</label><br/>
<input type="checkbox" id="data_network_reddit" name="data_network" ng-model="reddit" value="reddit">
<label for="data_network_reddit">Reddit</label><br/>
<input type="checkbox" id="data_network_linkedin" name="data_network" ng-model="linkedin" value="linkedin">
<label for="data_network_linkedin">LinkedIn</label><br/>
</div>
<div class="one-third">
<input type="checkbox" id="data_network_wordpress" name="data_network" ng-model="wordpress" value="wordpress">
<label for="data_network_wordpress">WordPress</label><br/>
<input type="checkbox" id="data_network_pinboard" name="data_network" ng-model="pinboard" value="pinboard">
<label for="data_network_pinboard">Pinboard</label><br/>
<input type="checkbox" id="data_network_email" name="data_network" ng-model="email" value="email">
<label for="data_network_email">Email</label><br/>
</div>
</form>
<p class="instructions">Something missing? Check out <a href="https://stefanbohacek.com/blog/2013-09-simple-sharing-buttons-free/#other" target="_blank">this blog post</a>.</p>
<a class="next" href="#info" goto="info"><i class="far fa-hand-point-right"></i> Next</a>
</div>
</section>
<section id="info" class="big">
<div id="section-content">
<h2>Your website's info</h2>
<form id="mode" class="radiobuttons mode-selection">
<input type="radio" id="modenojs" name="mode" ng-model="mode" value="nojs" checked="checked">
<label for="modenojs">No JavaScript <sup help class="help" title="Default setting. No JavaScript will be used"> ? </sup></label>
<input type="radio" id="modejs" name="mode" ng-model="mode" value="js">
<label for="modejs">JavaScript <sup help class="help" title="JavaScript will be used to detect site information automatically, so that you can add the same code on multiple pages, for example on a blog."); return false;"> ? </sup></label>
<!--
<input type="radio" id="modephp" name="mode" ng-model="mode" value="php">
<label for="modephp">PHP <sup><strong> BETA </strong></sup></label>
-->
</form>
<div class="instructions">
<p>Choose <strong>JavaScript</strong> if you want to include the buttons on multiple pages, otherwise you can fill out the information below.</p>
<p><strong>Hint:</strong> Once you add the URL, use the <i class="fa fa-magic"></i> icon to detect the information automatically.</p>
<p ng-show="show_fb_instructions"><strong>Note:</strong> Facebook <a href="https://developers.facebook.com/bugs/357750474364812/" target="_blank">no longer accepts custom parameters</a>, please use <a href="http://ogp.me/" target="_blank">Open Graph</a> instead.</p>
<p class="mode-instructions" ng-show="show_jsmode_instructions"><strong>Note:</strong> Please set the "URL of your page" below to your home page. This will be a fallback URL when your visitor's JavaScript is disabled.</p>
<p class="mode-instructions" ng-show="show_php_instructions"><strong>Note:</strong> ???</p>
</div>
<form id="website-info">
<ul>
<li>
<label for="input-url" class="infield">URL of your page</label>
<input id="input-url" ng-model="url" type="text" title="URL of your page">
<span ng-show="mode == 'nojs'" id="magic"><i sitesummary title="Read page information automatically" ng-class="magic_icon"></i></span>
</li>
<li ng-show="mode == 'nojs'">
<label for="input-title" class="infield">Short title</label>
<input id="input-title" ng-model="title" type="text" title="Short title">
</li>
<li ng-show="mode == 'nojs'">
<label for="textarea-description" class="infield">Brief description</label>
<textarea id="textarea-description" ng-model="description" name="data_description" title="Brief description"></textarea>
</li>
<span help class="alt-label help" title="You can leave the boxes below empty">Optional</span>
<li>
<label class="infield" for="input-twitter">Your Twitter username <span class="hide-small">(without @)</span></label>
<input id="input-twitter" ng-model="twitter_handle" type="text" title="Your Twitter username (without @)">
</li>
<li ng-show="mode == 'nojs'">
<label class="infield" for="input-image">URL of an image preview*</label>
<input id="input-image" ng-model="preview_image_url" type="text" title="URL of a preview image (for example screenshot of your page), used with Pinterest and Wordpress">
<p class="instructions">* The optional image preview is used with Pinterest and Wordpress. If you want to control which image is used by Facebook, and Twitter, read about <a target="_blank" href="http://ogp.me/">Open Graph</a>, <a target="_blank" href="https://dev.twitter.com/cards/markup">Twitter Card Tags</a> and <a target="_blank" href="https://developers.google.com/+/web/snippet/">Schema.org microdata</a>.</p>
<div class="preview-image-wrapper">
<img title="Image preview" ng-src="{{preview_image_thumbnail}}">
</div>
</li>
</ul>
</form>
<a class="next" href="#preview" goto="preview"><i class="far fa-hand-point-right"></i> Next</a>
</div>
</section>
<section id="preview" class="big">
<div id="section-content">
<h2>Live preview</h2>
<!-- TODO: The hardcoded value of 32 is a temporary solution to only showing the below note when there is no preview to show.
This should definitely be refactored in the future. -->
<p class="instructions" ng-show="show_fa_instructions"><strong>Note:</strong> Pinboard is not supported by Font Awesome, no code will be generated.</p>
<p class="instructions" ng-show="html.length === 32"><a href="#networks" goto="networks">Choose some networks first!</a></p>
<section id="preview-canvas" ng-bind-html="preview_html">
</section>
<p class="instructions">Seeing an error when sharing your site? <a target="_blank" href="http://stackoverflow.com/questions/15878721/facebook-share-link-returning-404-redirect-error-when-page-exists">Read this.</a></p>
<a class="next" href="#code" goto="code"><i class="far fa-hand-point-right"></i> Next</a>
</div>
</section>
<section id="code" class="big">
<div id="call-out">
<p class="call-out-label">Find this tool useful?</p>
<p class="call-out-text">Please consider a small donation via
<a href="https://www.paypal.me/stefanbohacek" target="_blank">PayPal</a> or the form below.
<strong>Thank you!</strong>
</p>
<hr/>
<form id="tip-me" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<!-- <input type="hidden" name="return" value="http://stefanbohacek.com/thank-you-donation"> -->
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="6WUY9E5QLB4RE">
This tool is and will remain <strong>free</strong>, but I don't mind if you
<input type="hidden" name="on0" value="Send me">send me<select name="os0" class="tip-choice">
<option value="a dollar ->">a dollar</option>
<option value="two dollars ->">two dollars</option>
<option value="five bucks ->">five bucks</option>
</select>
<input type="hidden" name="currency_code" value="USD">
<button name="submit" title="Send via PayPal"><strong>Send</strong> via <i class="fab fa-paypal"></i></button>
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
<div id="section-content">
<h2>Grab the code</h2>
<p class="instructions">Make sure to copy both the HTML and CSS! Need more help? Check out <a href="https://stefanbohacek.com/project/simple-sharing-buttons-generator/#tutorials" target="_blank">these tutorials</a>.
</p>
<form id="generated-code">
<span help class="help alt-alt-label" title="This is your HTML code.">HTML</span>
<textarea ng-model="html" id="generated_html" name="generated_html"></textarea>
<span resetcss class="help alt-alt-label" title="This is your CSS code, click to reset">CSS</span>
<textarea ng-model="css" id="generated_css" name="generated_css"></textarea>
</form>
<div>
<div ng-show="show_download">
<p class="instructions"><strong>Download the icons below.</strong> You will need to upload them to your website and if necessary, change the <code>src</code> attribute of the <code><img></code> tags. <a href="https://stefanbohacek.com/project/simple-sharing-buttons-generator/#images" target="_blank">Learn how.</a></p>
<p class="download-wrapper center-text">
<a download id="download" ng-href="download/{{download_url}}" title="Click to download your icons"><i class="fa fa-download"></i> Download the icons</a>
</p>
</div>
<p class="instructions" ng-show="show_fa_instructions">You can download <strong>Font Awesome</strong> from <a href="http://fontawesome.io/" target="_blank">their official website</a>. Alternatively you can include this code inside your <code>head</code> element:<br/>
<code><link href="https://use.fontawesome.com/releases/v5.10.2/css/all.css" rel="stylesheet"></code><br/>
Make sure you have the latest version of Font Awesome; alternatively, get your embed code <a href="https://fontawesome.com/get-started/web-fonts-with-css">here</a>.
Note that you will also need to apply <strong>custom CSS</strong> (for color, hover style etc).
</p>
<p class="instructions" ng-show="show_nostyle_instructions">Don't forget to apply <strong>your own CSS</strong> (for color, hover style etc).
</p>
</div>
</div>
</section>
<section id="about" class="big">
<div id="section-content">
<h2>About this site</h2>
<p><strong>Simple Sharing Buttons Generator</strong> is a <a href="https://twitter.com/search?q=simplesharingbuttons.com&src=typed_query&f=live" target="_blank">popular</a> <a href="https://github.com/stefanbohacek/SimpleSharingButtons" target="_blank">open source</a> tool made by <a href="https://twitter.com/stefanbohacek/" target="_blank">@stefanbohacek</a> that lets your create <a href="http://www.ericmobley.net/social-media-share-buttons-impact-on-performance/" target="_blank">light-weight</a> sharing buttons for social networks, including Twitter or Facebook, that <a href="http://zurb.com/article/883/small-painful-buttons-why-social-media-bu" target="_blank"><strong>speed up your website</strong></a> by avoiding downloading <a href="http://www.benmarshall.me/sharethis-slowing-down-site/" target="_blank">unnecessary JavaScript files</a> and they <a href="https://en.wikipedia.org/wiki/Facebook_like_button#Tracking" target="_blank">keep your user's activity private</a>.</p>
<p>You can choose from <a goto="style" href="#style" onclick="return false;">several styles</a>, including SVG images and <a href="http://fontawesome.io/" target="_blank"><strong>Font Awesome</strong></a>. This is site is <strong>free to use</strong>, check out above for <a href="#code" goto="code">donation options</a>.</p>
<p>Some of the sites using Simple Sharing Buttons Generator:</p>
<ul>
<li><a href="http://thesocietypages.org">thesocietypages.org</a></li>
<li><a href="http://explorableexplanations.com">explorableexplanations.com</a></li>
<li><a href="http://earthprimer.com">earthprimer.com</a></li>
<li><a href="http://botwiki.org">botwiki.org</a></li>
</ul>
<p>For more information, see also:</p>
<ul>
<li><a target="_blank" href="https://simplesharingbuttons.tumblr.com/">official blog with updates</a></li>
<li><a target="_blank" href="https://stefanbohacek.com/project/simple-sharing-buttons-generator/#tutorials">tutorials</a></li>
<li><a target="_blank" href="http://technical.ly/brooklyn/2016/09/06/simple-sharing-buttons-generator-stefan-bohacek/">technical.ly</a></li>
<li><a target="_blank" href="https://www.producthunt.com/tech/simple-sharing-buttons-generator">Product Hunt</a></li>
</ul>
<h3>Attributions</h3>
<ul>
<li>
<a href="http://iconsandcoffee.com/" target="_blank">iconsandcoffee.com</a>, the creators of the Flat Web Icon Set
</li>
<li>
<a href="https://twitter.com/bathtype" target="_blank">Dan Leech</a>, the creator of <a href="http://simpleicons.org/" target="_blank">Simple Icons</a>
</li>
<li>
<a href="https://twitter.com/davegandy" target="_blank">Dave Gandy</a>, the creator of the <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> icon font
</li>
<li>
<a href="http://www.aha-soft.com/" target="_blank">Aha-Soft</a>, the creators of the <a href="https://www.iconfinder.com/iconsets/social-flat-rounded-rects" target="_blank">Social Flat Rounded Rects</a> icon set
</li>
</ul>
<a gototop class="back-to-top back-to-top-hidden" href="#"><i class="far fa-hand-point-up"></i> Back to top</a>
<p class="hashtags center-text">by <a href="https://twitter.com/stefanbohacek/">@stefanbohacek</a> <a href="https://twitter.com/hashtag/indieweb" target="_blank">#indieweb</a> <a href="https://twitter.com/hashtag/openweb" target="_blank">#openweb</a></p>
<p class="stickers center-text">
<a href="https://fightfascism.glitch.me/"><img src="images/fight-fascism-180px.jpg" title="Fight Fascism sticker by Angus Johnston" alt="Fight fascism" ></a>
<a href="https://indieweb.org/"><img src="images/indiewebcamp-text.png" title="IndieWebCamp logo" alt="IndieWebCamp"></a>
</p>
</div>
</section>
<script defer src="libs/jquery.min.js"></script>
<script defer src="libs/angular.min.js"></script>
<script defer src="js/controllers.2.10.min.js"></script>
<script>
var _paq = window._paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="https://matomo.stefanbohacek.dev/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '4']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
</body>
</html>