jQuery plugin for inserting social sharing functionality. Requires that Font-Awesome fonts and CSS be installed.
GitHub page found at http://arnonate.github.io/hideshare/
A demo can be found at http://natearnold.me/hideshare/example/
Font-Awesome (http://fortawesome.github.io/Font-Awesome/) is used in the example but not required for the plugin to function. To use text links simply delete the line of CSS that sets .hideshare-wrap span to display none.
Download the production version or the development version.
In your web page:
<script src="jquery.js"></script>
<script src="hideshare.min.js"></script>
<script>
jQuery(function($) {
$(".share").hideshare(); // Calls HIDESHARE on element with class "share"
});
</script>A simple usage case would involve calling HIDESHARE on a button like in the following example:
<img src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd.jpg">
<a class="share" href="#">SHARE ME</a>
<script>
$(document).ready(function() {
$(".share").hideshare({
media: "http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd.jpg"
});
});
</script>The following options may be configured:
<img src="http://farm7.staticflickr.com/6213/6243090894_8b8dd862cd.jpg">
<a class="share" href="#">SHARE ME</a>
<script>
$(document).ready(function() {
$(".share").hideshare({
link: "", // Link to URL defaults to document.URL
title: "", // Title for social post defaults to document.title
media: "", // Link to image file defaults to null
facebook: true, // Turns on Facebook sharing
twitter: true, // Turns on Twitter sharing
pinterest: true, // Turns on Pinterest sharing
googleplus: true, // Turns on Google Plus sharing
linkedin: true, // Turns on LinkedIn sharing
position: "bottom", // Options: Top, Bottom, Left, Right
speed: 50 // Speed of transition
});
});
</script>The following styles are necessary for display:
<style>
.hideshare-wrap {
position: relative;
}
.hideshare-list {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: 0;
padding: 0;
list-style: none;
text-align: center;
}
.hideshare-list li {
display: inline-block;
zoom: 1;
*display: inline;
margin: 2em 1em;
}
.hideshare-wrap span {
display: none;
}
</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent