Testing social sharing buttons

This commit is contained in:
Dan Leech 2015-11-11 16:56:47 +00:00
parent 513814cd83
commit f93f3eaa24
4 changed files with 105 additions and 18 deletions

View File

@ -98,6 +98,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -105,6 +106,10 @@
animation: none; animation: none;
background: #333; background: #333;
} }
.sharing-buttons {
height: 1.5rem;
padding: 1.5rem;
}
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
display: flex; display: flex;
@ -223,14 +228,32 @@
</head> </head>
<body> <body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <div class="sharing-buttons">
<p class="navbar__text">Like this?</p> <div class="fb-share-button" data-href="https://simpleicons.org" data-layout="button_count"></div>
<input type="hidden" name="cmd" value="_s-xclick"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://simpleicons.org" data-via="bathtype" data-dnt="true">Tweet</a>
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> </div>
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</header> </header>
<main role="main"> <main role="main">
<p class="hero">167 SVG icons for popular brands <a href="https://github.com/danleech/simple-icons">Download them from GitHub</a></p> <p class="hero">167 SVG icons for popular brands <a href="https://github.com/danleech/simple-icons">Download them from GitHub</a></p>
@ -407,6 +430,11 @@
</main> </main>
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p> <p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</footer> </footer>
<style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style> <style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style>
<script> <script>
@ -438,6 +466,7 @@
} }
} }
</script> </script>
<div id="fb-root"></div>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

View File

@ -98,6 +98,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -105,6 +106,10 @@
animation: none; animation: none;
background: #333; background: #333;
} }
.sharing-buttons {
height: 1.5rem;
padding: 1.5rem;
}
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
display: flex; display: flex;
@ -223,14 +228,32 @@
</head> </head>
<body> <body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <div class="sharing-buttons">
<p class="navbar__text">Like this?</p> <div class="fb-share-button" data-href="https://simpleicons.org" data-layout="button_count"></div>
<input type="hidden" name="cmd" value="_s-xclick"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://simpleicons.org" data-via="bathtype" data-dnt="true">Tweet</a>
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> </div>
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</header> </header>
<main role="main"> <main role="main">
<p class="hero">167 SVG icons for popular brands <a href="https://github.com/danleech/simple-icons">Download them from GitHub</a></p> <p class="hero">167 SVG icons for popular brands <a href="https://github.com/danleech/simple-icons">Download them from GitHub</a></p>
@ -407,6 +430,11 @@
</main> </main>
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p> <p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</footer> </footer>
<style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style> <style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style>
<script> <script>
@ -438,6 +466,7 @@
} }
} }
</script> </script>
<div id="fb-root"></div>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

View File

@ -3,6 +3,11 @@
</main> </main>
<footer class="footer" role="contentinfo"> <footer class="footer" role="contentinfo">
<p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p> <p>Contributions, corrections &amp; requests can be left on <a href="https://github.com/danleech/simple-icons">GitHub</a>. Company logos in icons are copyright of their respective owners. Distributed for free by <a href="https://twitter.com/bathtype">Dan Leech</a> under the Free Art License.</p>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC">
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</footer> </footer>
<style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style> <style>@import url('https://fonts.googleapis.com/css?family=Lato:400&text=ABCDEFGHIJKLMNOPQERSTUVWXYZ.!%20%23%2B%3F%26%2C1234567890');</style>
<script> <script>
@ -34,6 +39,7 @@
} }
} }
</script> </script>
<div id="fb-root"></div>
<script> <script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (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), (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

View File

@ -98,6 +98,7 @@
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 400; font-weight: 400;
letter-spacing: 0.05rem; letter-spacing: 0.05rem;
margin: 1.5rem 0 0;
padding: 0.75rem 1.5rem; padding: 0.75rem 1.5rem;
text-transform: uppercase; text-transform: uppercase;
} }
@ -105,6 +106,10 @@
animation: none; animation: none;
background: #333; background: #333;
} }
.sharing-buttons {
height: 1.5rem;
padding: 1.5rem;
}
@media (min-width: 800px) { @media (min-width: 800px) {
.navbar { .navbar {
display: flex; display: flex;
@ -223,13 +228,31 @@
</head> </head>
<body> <body>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<script>
!function(d,s,id){
var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
if(!d.getElementById(id)){
js=d.createElement(s);
js.id=id;
js.src=p+'://platform.twitter.com/widgets.js';
fjs.parentNode.insertBefore(js,fjs);
}
}(document, 'script', 'twitter-wjs');
</script>
<header class="navbar" role="banner"> <header class="navbar" role="banner">
<h1 class="title">Simple Icons</h1> <h1 class="title">Simple Icons</h1>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" class="donate-form"> <div class="sharing-buttons">
<p class="navbar__text">Like this?</p> <div class="fb-share-button" data-href="https://simpleicons.org" data-layout="button_count"></div>
<input type="hidden" name="cmd" value="_s-xclick"> <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://simpleicons.org" data-via="bathtype" data-dnt="true">Tweet</a>
<input type="hidden" name="hosted_button_id" value="UCMEG4SWEYFUC"> </div>
<input type="submit" name="submit" value="Buy Dan a coffee!" class="donate-button">
</form>
</header> </header>
<main role="main"> <main role="main">