Skip to content

Instantly share code, notes, and snippets.

@nfreear

nfreear/sharing-widget.css.html

Created July 21, 2022 07:51
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nfreear/2582d6c366efbda0ccd5c58c5768d4e2 to your computer and use it in GitHub Desktop.
Save nfreear/2582d6c366efbda0ccd5c58c5768d4e2 to your computer and use it in GitHub Desktop.
Download ZIP
Sharing widget CSS + HTML
Raw
sharing-widget.css.html
<!doctype html><title> Sharing widget </title>
<!--<template>-->
<style>
ul {
list-style: none;
line-height: 1;
margin: 0;
padding: 0;
}
a {
display: block;
background-color: transparent;
background-repeat: no-repeat;
background-size: contain;
border-radius: .25rem;
font: 0/0 a;
outline-offset: 2px;
margin: .1rem 0;
height: 2.3rem;
width: 2.3rem;
}
:focus,
a:hover {
background: #ccc;
transition: all 500ms;
}
.facebook a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/facebook.png); }
.google a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/googleplus.png); }
.twitter a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/twitter.png); }
.tumblr a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/tumblr.png); }
.email a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/mail.png); }
.copylink a { background-image: url(https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/img/socmed/link.png); }
</style>
<ul>
<li class="facebook" title="Share on Facebook"><a href="#" data-href="https://www.facebook.com/sharer.php?u=${url}&amp;title=${txt}" data-width=400 data-height=500 >Facebook</a></li>
<li class="twitter" title="Share on Twitter"><a href="#" data-href="https://twitter.com/intent/tweet?status=${txt}+${url}" data-width=400 data-height=500 >Twitter</a></li>
<li class="google" title="Share on Google+"><a href="#" data-href="https://plus.google.com/share?url=${url}" data-width=400 data-height=250 >Google+</a></li>
<li class="tumblr" title="Share on Tumblr"><a href="#" data-href="https://www.tumblr.com/share?v=3&amp;u=${url}&amp;t=${txt}" data-width=400 data-height=500 >Tumblr</a></li>
<li class="email" title="Share on Email"><a href="#" data-href="mailto:?subject=${txt}&amp;body=${url}" >Email</a></li>
<li class="copylink" title="Copy Link"><a href="#" >Copy Link</a></li>
</ul>
</template>
<!--
NDF, 13-Jul-2022.
https://unstats.un.org/unsd/demographic-social/sconcerns/disability/statistics/#!/activities
-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment