Selection Sharer is a mobile-friendly social share plugin that shows a floating popover that allows highlighted/selected text to be shared on Facebook, LinkedIn or via email.
On mobile devices, instead of better user experiences, the plugin will screen a social sharing popunder.
It also has the ability, when a Facebook App ID is given, to display the Facebook sharing link inside the share popover.
This Plugin has been used on Nepal Magazine, Medium, and The Kathmandu Post
How to use ?
- To use this plugin, you need to make sure “selection-sharer.css”, “jQuery” & “selection-sharer.js” files are included correctly.
<script src="//code.jquery.com/jquery.min.js"></script> <link rel="stylesheet" href="selection-sharer.css"> <script src="selection-sharer.js"></script>
2. Specify the Facebook App ID in the meta tags (OPTIONAL).
<meta property="fb:app_id" content="CONTENT HERE"> <meta property="fb:admins" content="CONTENT HERE">
3. Then initialize the plugin on the target text content and done.
$('p').selectionSharer();
4. Or …
var sharer = new SelectionSharer('p');
5. Override the default CSS rules to create your own styles.
#selectionSharerPopover:after {
content: '';
display: block;
position: absolute;
bottom: -3px;
left: 50%;
margin-left: -4px;
width: 8px;
height: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #262625;
box-shadow: 0 0 2px #262625;
}
#selectionSharerPopunder {
position: absolute;
left: 0;
width: 100%;
height: 0px;
transition: height 0.5s ease-in-out;
background: #ccc;
border: none;
box-shadow: inset 0px 10px 5px -10px rgba(0,0,0,0.5), inset 0px -10px 5px -10px rgba(0,0,0,0.5);
border-radius: 0;
overflow: hidden;
}
