Dependencies

jQuery - You can link to a CDN of the latest version at Google's Hosted Libraries page.

Font Awesome - Download the latest version from Font Awesome's website.

Include jQuery and Font Awesome in your html file, like so:

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

NOTE: To use Font Awesome, also include the /fonts/ directory in your project.

Usage

First, download quoteShare.js or quoteShare.min.js from this GitHub repository and include it in your html file. Be sure to place it below where you have included jQuery, like so:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<!-- quoteShare.js -->
<script src="js/quoteShare.js"></script>

Second, use the quoteShare method on the selector of your choice. For example:

<script>
$(document).ready(function(){
	$('p').quoteShare();
});
</script>

The quoteShare() method accepts options, enabling you to customize when and how your share button displays on the page.

Option	Date Type	Default	Description
animation	number	75	Speed of the animation, in milliseconds, with which the popup appears. Set to 0 to disable.
backgroundColor	string	'#55acee'	The color of the background of the Twitter icon. Default is Twitter's blue. Hex, RGB, and other color codes are accepted.
boxShadow	boolean	true	A shadow that appears below the menu. Set to false to disable.
maxLength	number	500	The maximum number of characters that must be highlighted for the share icon to appear.
minLength	number	1	The minimum number of characters that must be highlighted for the share icon to appear.
twitterColor	string	'#ffffff'	The color of the bird in the Twitter icon. Default is white. Hex, RGB, and other color codes are accepted.
twtterElipses	boolean	true	If the length of the tweet is 140 characters, quoteShare will abridge excessively long text and add an elipses. Works even if hashtags and a source are included in the tweet. Set to false to disable.
twitterHashtags	string	''	A comma separated list of hashtags that accompany the tweet.
twitterVia	string	''	A Twitter handle to accompany the tweet.

Example 1 - Basic usage

In its simplest form, quoteShare is a jQuery method that requires no options. Execute it on the element you wish to make shareable.

$('.example-1').quoteShare();

DEMO: You can highlight this text to share it with quoteShare.

Example 2 - Custom styling

quoteShare also lets you pass options to change the color of the share menu and icons.

$('.example-2').quoteShare({
	background: '#ffffff',
	twitterColor : '#55acee'
});

DEMO: When you highlight this text, the menu is white and the share icons are colored.

Example 3 - Minimum and maximum highlight length

By default, quoteShare will only share highlighted text that is longer than one character and shorter than 114 characters. However, quoteShare provides options to customize this.

$('.example-3').quoteShare({
	minLength : 20,
	maxLength : 40
});

DEMO: You can only share highlighted text in this paragraph that is between 20 and 40 characters long.

Example 4 - Remove the box shadow

You can remove the box shadow from the share menu.

$('.example-4').quoteShare({
	boxShadow : false
});

DEMO: When you highlight this text, the popup will appear without a box shadow.

Example 5 - Customize the tweet

You can add hashtags or a source Twitter handle to the tweet.

$('.example-5').quoteShare({
	twitterHashtags : 'jQuery, Twitter',
	twitterVia : 'Harry_Stevens'
});

DEMO: The tweet will include hashtags and a source.

Example 6 - Modify the popup's animation speed

You can change the speed of the animation with which the popup appears. Set it to 0 to disable animation. 1000 equals 1 second.

$('.example-6').quoteShare({
	animation : 0,
});

DEMO: The popup will appear immediately, with no animation.

Example 7 - Allow for very long tweets

You can change the speed of the animation with which the popup appears. Set it to 0 to disable animation. 1000 equals 1 second.

$('.example-7').quoteShare({
	twitterElipses : false,
});

DEMO: quoteShare can abridge excessively long text so that the tweet is 140 characters. However, if twitterElipses is set to false, the user will have to edit the tweet before sending it. If you highlight this entire block of text, you will see what happens when you set it to false.