Share Selected Text On Twitter & Email - jQuery Selection Sharer

Share Selected Text On Twitter & Email - jQuery Selection Sharer
File Size: 24.1 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Selection Sharer is a mobile-friendly jQuery social share plugin for displaying a floating popover that allows to share highlighted/selected text on Twitter or via Email. On mobile devices, the plugin will display a social share popunder instead for better user experiences. It also has the ability to show the Facebook share link inside the share popover when a Facebook App ID is provided.

See also:

How to use it:

1. 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;
}

This awesome jQuery plugin is developed by xdamman. For more Advanced Usages, please check the demo page or visit the official website.