quoteShare.js

A jQuery plugin that lets you share highlighted text on Twitter.
Highlight some or all of this text to see it in action.

Getting Started

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>

Options

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.

Examples

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.